| name | chatbot-template |
| description | Scaffold and extend chatbot-template, shadcn/ui's minimal Next.js starter for building an AI chatbot with the AI SDK, shadcn/react, shadcn/typeset, and the Vercel AI Gateway. It ships streaming markdown chat, tool calling (a server-executed GitHub repo lookup, provider-native web search, and a human-in-the-loop `ask_user` questionnaire), and one-click Vercel deploy with OIDC gateway auth. Use when the user wants to spin up a Next.js AI chat app fast, add a custom tool with a typed UI part, swap or restrict the model list, or harden the public `/api/chat` route before shipping. Triggers on: "chatbot-template", "shadcn chatbot", "AI SDK chat app", "Next.js AI SDK starter", "Vercel AI Gateway chat", "streaming chat with shadcn/typeset", "ask_user questionnaire tool", "shadcn/react message scroller".
|
| allowed-tools | Bash Read Write Edit Glob Grep |
| compatibility | Node.js + pnpm (repo ships a pnpm-lock.yaml / pnpm-workspace.yaml). Next.js 16 / React 19 / TypeScript. Needs an AI Gateway credential for local dev (`vercel env pull` or a manual `AI_GATEWAY_API_KEY`) — none is needed on Vercel deployments, which authenticate via OIDC. MIT licensed.
|
| metadata | {"tags":"chatbot-template, nextjs, ai-sdk, shadcn-ui, shadcn-react, vercel-ai-gateway, streaming-chat, tool-calling, react","platforms":"Claude, ChatGPT, Gemini, Codex","version":"1.0","source":"https://github.com/shadcn-ui/chatbot-template"} |
chatbot-template
chatbot-template is shadcn/ui's minimal, opinionated Next.js starter for an AI
chatbot: streaming markdown responses (react-markdown + shadcn/typeset),
typed tool calling, provider-native web search, and a human-in-the-loop
ask_user questionnaire the model can trigger to ask clarifying questions.
It deploys to Vercel with zero configuration — the AI Gateway authenticates
automatically via OIDC — or runs locally against a gateway API key.
When to use this skill
- Scaffolding a new Next.js AI chatbot instead of hand-wiring
useChat,
streaming, and markdown rendering from scratch
- Adding a custom tool (server-executed or UI-answered) with a typed part
component that renders its
input-streaming / input-available /
output-available states
- Restricting or reordering the model list, or wiring web search per model
- Hardening the public
/api/chat route (rate limiting, spend caps, auth)
before putting it in front of real traffic
- Understanding how assistant message "parts" (
text, tool-*,
source-url) map to components so you can extend the chat UI safely
When not to use this skill
- The user needs persistent chat history, multi-user auth, or a database —
this template has none of that; build it on top rather than expecting it
out of the box
- The target stack isn't Next.js/React — this is a Next.js App Router
template tied to
useChat and RSC-style API routes
- The goal is running an LLM entirely offline/bare-metal with no cloud
gateway → not this skill; see the
nightrun skill for a no-OS boot-to-LLM
appliance instead
- The ask is about the AI SDK or shadcn/ui in the abstract, unrelated to this
specific starter template → use general AI SDK / shadcn/ui docs instead
Instructions
Step 1: Get the code
git clone --depth 1 https://github.com/shadcn-ui/chatbot-template.git
cd chatbot-template
Or click "Deploy with Vercel" on the README for a zero-config deploy — no
env vars needed, since Vercel deployments authenticate to the AI Gateway via
OIDC automatically and billing runs on the team's AI Gateway credits.
Step 2: Install and give the app a gateway credential
pnpm install
Then either pull an OIDC token from a linked Vercel project:
