Next.js Chatbot — production patterns for web chatbots (AI SDK 7)
Opinionated blueprint for production Next.js web chatbots: AI SDK 7 ToolLoopAgent, human-in-the-loop tool approval, PostgreSQL session persistence, consent gating, SQL-first search, per-tool UI rendering, popup widget embedding, streaming error handling, theming, and evals
- What
- Opinionated blueprint for production Next.js web chatbots: AI SDK 7 ToolLoopAgent, human-in-the-loop tool approval, PostgreSQL session persistence, consent gating, SQL-first search, per-tool UI rendering, popup widget embedding, streaming error handling, theming, and evals
- Cost
- Free
- Needs
- a Next.js project (opinionated stack: bun, AI SDK 7, shadcn/ui + ai-elements, Drizzle + PostgreSQL); a billed model API key for live responses; check package.json — v6 codebases need the v6 name translations included in the skill
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @laguagu's nextjs-chatbot skill, listed here with credit to its creator: an opinionated blueprint for production web chatbots that covers the patterns the SDK docs skip. It gives the agent stack defaults (bun runtime, AI SDK 7 `ToolLoopAgent` with a v6 fallback table, shadcn/ui + ai-elements, Drizzle + PostgreSQL, Zustand client state), agent setup with portable reasoning-effort configuration, a route handler with consent gating and session upsert, human-in-the-loop tool approval with a 6-state render machine, message streaming-state handling (chat-level status, not tool-part states) to stop action-icon flicker, `MessageScroller` instead of hand-rolled stick-to-bottom, streaming-stable markdown via shadcn typeset, popup widget embedding (FAB + iframe + widget.js), SQL-first search guidance, per-tool UI rendering, message feedback persisted to the database, scope enforcement and prompt-injection defense blocks for the system prompt, grounding rules against hallucinated component names, and a testing split (UI harness without the model vs model benchmarks for stability). Honest caveats: opinionated stack (bun, Drizzle, shadcn) — adapt if yours differs; snippets are AI SDK v7 names and fail quietly on v6 codebases (check package.json); needs a billed model API key and PostgreSQL for full persistence; verify version-sensitive claims against the installed SDK, not this page. MIT licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a Next.js project (opinionated stack: bun, AI SDK 7, shadcn/ui + ai-elements, Drizzle + PostgreSQL); a billed model API key for live responses; check package.json — v6 codebases need the v6 name translations included in the skill Install "Next.js Chatbot — production patterns for web chatbots (AI SDK 7)" for me. It gives my agent @laguagu's production chatbot blueprint: AI SDK 7 ToolLoopAgent setup, route handler with consent gating and PostgreSQL session persistence, human-in-the-loop tool approval, per-tool UI rendering, popup widget embedding, streaming error handling (never leak raw error text to the browser), scope enforcement and prompt-injection defense, grounding rules, theming, and the testing split (UI harness vs model benchmarks). MIT licensed. Repository: https://github.com/laguagu/claude-code-nextjs-skills/blob/main/skills/nextjs-chatbot/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code — the model key lives in env, never in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "nextjs-chatbot". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. check my AI SDK version against the v6/v7 translation table; add the recommended MCP servers to .mcp.json; set up the PostgreSQL chat_sessions/chat_messages tables; keep my model key in env only). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.