nextjs-chatbotlisted
Install: claude install-skill laguagu/claude-code-nextjs-skills
# Next.js Chatbot
Opinionated blueprint for production **web** chatbots. Focuses on patterns **not** covered by `/ai-sdk-6`, `/ai-elements`, or `/nextjs-shadcn` — use those skills for general SDK, component, and framework questions. For multi-platform bots (Slack, Teams, Discord), use `/vercel:chat-sdk` instead.
## Stack defaults
- **Runtime:** bun
- **Model:** `gpt-5.4` with `reasoningEffort: "none"`
- **AI SDK:** `ai@6` — `ToolLoopAgent`, `createAgentUIStreamResponse`
- **UI:** shadcn/ui + ai-elements (see `/ai-elements` for component docs)
- **ORM:** Drizzle + PostgreSQL
- **State:** Zustand for client-side chat state (consent, session, suggestions)
- **Attachments:** See `/ai-elements` Attachments component for file upload
## Recommended MCP servers
- **next-devtools** (`next-devtools-mcp@latest` via npx) — route inspection, build diagnostics. See [nextjs.org/docs/app/guides/mcp](https://nextjs.org/docs/app/guides/mcp)
- **ai-elements** (via `mcp-remote` → `https://registry.ai-sdk.dev/api/mcp`) — component registry search
Add both to `.claude/settings.json` mcpServers.
## Agent setup
```ts
export function createAgent(opts?: { model?: LanguageModel }) {
return new ToolLoopAgent({
model: opts?.model ?? openai("gpt-5.4"),
instructions,
providerOptions: { openai: { reasoningEffort: "none" } },
tools,
stopWhen: stepCountIs(10),
});
}
export const agent = createAgent();
export type AgentUIMessage = InferAgentUIMessage<typeof agent>;
```
Export b