Agent skill · software engineering · laguagu
nextjs-chatbot
Advanced patterns for production Next.js web chatbots built with AI SDK 7 (with a fallback table for projects still on v6) + ai-elements. Covers tool calling with human-in-the-loop (HITL) approval, PostgreSQL session persistence, GDPR consent gating, SQL-first search, per-tool UI rendering, popup widget embedding, message feedback, follow-up suggestions, scope enforcement, streaming error handling, and evals. Use when building a customer support bot, conversational interface, or any web chatbot needing tool approval, database sessions, or custom tool output components. Not a scaffolding tool — use `/ai-app` to scaffold from scratch, `/ai-sdk-7` for general SDK questions, `/ai-elements` for chat UI components, `/vercel:chat-sdk` for multi-platform (Slack/Teams/Discord) bots.
Why this skill is useful
Adds advanced patterns and executable code for building production-grade chatbots with specific integrations and compliance features that the AI wouldn't generate on its own.
What it needs
Requires bun, drizzle, zustand installed locally. Requires openai account access. About 11k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
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 both factory and singleton — factory needed for benchmarks. Wrap with devToolsMiddleware() in dev. ⚠️ Reasoning effort is the portable top-level reasoning, not providerOptions.openai.reasoningEffort — set both and the top-level one is silently ignored, so your setting does nothing. Raising it above "low" means keeping sendReasoning: false on the stream: the Responses API rejects a reasoning part that comes back on the next turn without its required follower, and a context trimmer that strips step-start/tool- usually doesn't strip this one. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/nextjs-chatbot