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)

Searching Database…

1.2K ·GitHub
Chatbot-template
这是什么？一个用 Next.js、AI SDK 和 shadcn/ui 构建的极简聊天机器人模板，已接好线，可直接运行在 Vercel AI Gateway 上。
这是成品应用，还是供我扩展的入门模板？它是一个 Next.js 入门模板，供你克隆或部署后用自己的工具和 UI 加以扩展，而不是可安装的库或软件包。
怎么让它跑起来？可以直接零配置部署到 Vercel，因为 Vercel 会通过 OIDC 自动向 AI Gateway 认证；也可以克隆仓库，添加网关凭据后在本地运行 Next.js 开发服务器。
本地开发需要 AI Gateway 密钥吗？需要——本地开发时，你要么需要从关联的 Vercel 项目获取 OIDC token，要么需要在 .env.local 中把 AI Gateway API 密钥设置为 AIGATEWAYAPIKEY；部署在 Vercel 上则不需要。
聊天接口原样公开暴露安全吗？不安全——/api/chat 默认公开且无需认证，任何人调用它都会烧掉你的 AI Gateway 额度；README 建议在接入真实流量前加上限流、消费上限或认证。
我可以部署到别处，还是只能绑定 Vercel？它是围绕 Vercel 的 AI Gateway 设计的，支持一键部署和自动 OIDC 认证；在其他地方运行也可以，但你需要手动提供网关 API 密钥。
内置的工具调用示例是做什么的？它包含一个由服务端执行的 GitHub 仓库查询工具供模型调用，运行时会在界面上渲染一行带链接的统计信息，显示 star 数、fork 数和语言。
人在回路的问卷功能是什么？模型可以通过一个交互式 'askuser' 工具提出澄清问题，用户通过聊天中内联渲染的 shadcn 问卷组件来回答。
怎么给聊天机器人添加我自己的工具？在 tools/ 中新建一个文件，导出带 description、inputSchema 和 execute 函数的 tool()，在 tools/index.ts 中注册，然后在 components/parts/ 中添加对应的 part 组件用于渲染。
聊天机器人可以用哪些 AI 提供商？它自带 AI SDK 提供的 Anthropic、OpenAI 和 Vercel AI Gateway 适配器，可选模型列表在 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