chatbot-template

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: