chatbot-template README

The project's README from github.com/shadcn-ui/chatbot-template. As one markdown file: README.md.

chatbot-template

A minimal chatbot template built with Next.js, the AI SDK, shadcn/ui, shadcn/react, shadcn/typeset and the Vercel AI Gateway.

GitHub stars GitHub forks License

Features

Deploy

Deploy with Vercel

That's it — no configuration needed. Vercel deployments authenticate to the AI Gateway automatically via OIDC, and usage runs on your team's AI Gateway credits.

Local development

pnpm install

Then give the app a gateway credential, either by pulling an OIDC token from your linked Vercel project:

vercel link
vercel env pull

or by creating an API key in the Vercel dashboard (AI Gateway → API Keys) and adding it to .env.local:

cp .env.example .env.local
# then set AI_GATEWAY_API_KEY=...

Start the dev server:

pnpm dev

Configuration

Env var Required Description
AI_GATEWAY_API_KEY Local dev only AI Gateway API key. Not needed on Vercel deployments (OIDC).

The model list lives in lib/models.ts — the first entry is the default model.

Security

The /api/chat route is public and unauthenticated — every request spends your AI Gateway credits. That's fine for a personal demo, but before putting it in front of real traffic you should:

The route already validates the request body, restricts models to lib/models.ts, caps output tokens and step count, and aborts generation on client disconnect — but those bound a single request, not overall volume.

How it works

Tool parts

Assistant messages are a list of typed parts. components/chat-message.tsx switches on part.type and delegates each one to a component in components/parts/:

Part type Component Renders
text text-part.tsx Markdown via react-markdown and shadcn/typeset.
tool-github_repo github-repo-part.tsx A spinner while the lookup runs, then a linked stat line (stars, forks, language).
tool-web_search web-search-part.tsx A "Searching the web…" status while the search runs, then a persistent "Searched the web" line per search.
tool-ask_user ask-user-part.tsx The answered questions inline. Pending questions render in question-card.tsx, pinned to the scroller bottom.
source-url sources-part.tsx Web search citations, deduped into a "Searched N websites" drawer once the message finishes streaming.

Tool parts move through states as the stream progresses — input-streaming → input-available → output-available (or output-error) — and each component switches on part.state to show progress, results, and failures.

Adding your own tool

  1. Create tools/<name>.ts (the filename is the model-facing tool name) exporting a tool() with a description, an inputSchema, and an execute function (omit execute for tools the user answers in the UI, like ask_user), then register it in tools/index.ts.
  2. Add a part component in components/parts/ and a case "tool-<name>" in chat-message.tsx.

Message types are inferred from the tool definitions via InferUITools, so part.input and part.output are fully typed in your part component — renaming a tool field is a build error, not a silent undefined.

Adding components

npx shadcn@latest add button

License

MIT — see LICENSE.

chatbot-template (shadcn-ui/chatbot-template)

rate-limiting
Searching Database…

1.2K ·GitHub
Chatbot-template
What is this?A minimal chatbot template built with Next.js, the AI SDK, and shadcn/ui, wired up to run on the Vercel AI Gateway.
Is this a finished app or a starter template I build on?It's a Next.js starter template meant to be cloned or deployed and extended with your own tools and UI, not an installable library or package.
How do I get it running?Deploy it straight to Vercel with zero config since Vercel auto-authenticates to the AI Gateway via OIDC, or clone the repo and run the Next.js dev server locally after adding a gateway credential.
Do I need an AI Gateway key for local development?Yes - for local dev you need either an OIDC token pulled from your linked Vercel project or an AI Gateway API key set as AIGATEWAYAPIKEY in .env.local; on Vercel itself this isn't needed.
Is the chat endpoint safe to expose publicly as-is?No - /api/chat is public and unauthenticated by default, so anyone hitting it burns your AI Gateway credits; the README recommends adding rate limiting, a spend cap, or auth before real traffic.
Can I deploy this anywhere, or is it tied to Vercel?It's designed around Vercel's AI Gateway with one-click deployment and automatic OIDC auth; running it elsewhere still works but you'll need to supply the gateway API key manually.
What does the built-in tool calling example do?It includes a server-executed GitHub repo lookup tool that the model can call, which renders a linked stat line showing stars, forks, and language while it runs.
What is the human-in-the-loop questionnaire feature?The model can ask clarifying questions through an interactive 'askuser' tool, which the user answers via a shadcn questionnaire component rendered inline in the chat.
How do I add my own tool to the chatbot?Create a file in tools/ exporting a tool() with a description, inputSchema and execute function, register it in tools/index.ts, then add a matching part component in components/parts/ for rendering.
Which AI providers can the chatbot use?It ships with Anthropic, OpenAI and Vercel AI Gateway adapters from the AI SDK, and the selectable model list is configured in lib/models.ts.
What are similar projects?chatbot, whirl, sim, LibreChat, boardui, assistant-ui, voltagent, gemini-fullstack-langgraph-quickstart
Which topics is it in?rate-limiting, web-search, tool-calling, oidc, shadcn-ui, human-in-the-loop, template, nextjs, chatbot, streaming, ui-components, anthropic
Creator
shadcn-ui
Size
0.1 MB
Stars
1.2K
Updated
CommitOct 15
Age
2mo
Commits · 90 Days