nextjs-chatbot

Next.js Chatbot

Opinionated blueprint for production web chatbots. Focuses on patterns not covered by /ai-sdk-7, /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: a non-reasoning flagship with reasoning effort off — chat latency is the product. Read the version from the provider's live catalog, not from here.
• AI SDK: ai@7 — ToolLoopAgent, createAgentUIStreamResponse. ⚠️ Check package.json — on a v6 codebase the names below are wrong; see If the project is still on ai@6.
• UI: shadcn/ui (Base UI base) + ai-elements (see /ai-elements for component docs)
• Scroll: @shadcn/react MessageScroller — don't hand-roll stick-to-bottom
• Markdown: shadcn typeset (typeset typeset-chat), streaming-stable
• 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
• ai-elements (via mcp-remote → https://registry.ai-sdk.dev/api/mcp) — component registry search

Add both to the project's .mcp.json (claude mcp add writes it for you); .claude/settings.json only enables and permits servers, it does not define them.

Agent setup

export function createAgent(opts?: { model?: LanguageModel }) {
  return new ToolLoopAgent({
    model: opts?.model ?? openai(CHAT_MODEL), // one constant, read from env
    instructions,                             // NOT `system` — that is v6
    reasoning: "low",                         // portable top-level, see below
    tools,
    stopWhen: isStepCount(10),
  });
}
export const agent = createAgent();
export type AgentUIMessage = InferAgentUIMessage<typeof agent>;