今天给大家介绍一个近期在 GitHub 上快速蹿红、由官方团队出品的开源项目——shadcn-ui/chatbot-template。这是一个基于 Next.js 打造的极简 AI 聊天机器人模板,把当下最主流的 AI 应用开发技术栈浓缩进了一个可以直接部署的项目里。
项目简介
chatbot-template 由大名鼎鼎的 shadcn 团队官方维护,是一个”开箱即用”的 AI 对话应用模板。它整合了 Next.js、AI SDK、shadcn/ui、shadcn/typeset 以及 Vercel AI Gateway 等组件,让你在几分钟之内就能跑起一个具备流式对话、工具调用、联网搜索等能力的完整聊天机器人。
项目的亮点在于零配置部署:一键点击 Vercel 部署按钮即可上线,部署后通过 OIDC 自动完成 AI Gateway 鉴权,使用你团队的 AI Gateway 额度,几乎不需要任何额外设置。
核心功能
- 流式对话:基于 streamText 实现实时流式输出,配合 markdown 渲染和 shadcn/typeset 让回复排版更美观。
- 工具调用(Tool Calling):内置了几个实用的工具示例,包括 GitHub 仓库信息查询、交互式问卷(ask_user)以及各模型厂商自带的联网搜索。
- 联网搜索:直接调用 provider 内置的 web search 工具,并自动去重整理出”搜索了 N 个网站”的引用来源抽屉。
- 人机协作问卷:模型可以在对话中主动向用户提问澄清需求,配合 shadcn questionnaire 组件在界面上呈现。
技术特色
这个项目最值得称道的是它对”工具链消息渲染”的优雅抽象。助手消息被拆分为一组类型化 parts,chat-message.tsx 根据 part.type 分发到不同的组件渲染:文本用 Markdown 渲染,工具调用有专属的加载态和结果展示,每个 part 都会经历 input-streaming → input-available → output-available 的状态流转。
更实用的一点是类型安全:消息类型通过 InferUITools 从工具定义自动推导,重命名某个工具字段会直接变成编译错误,而不是悄悄返回 undefined。当你需要新增一个工具时,只需在 tools/ 目录新建一个文件(文件名即模型侧的工具名),再注册对应的 part 组件即可。
详细使用步骤
1. 一键部署
点击仓库 README 里的 “Deploy with Vercel” 按钮即可,无需任何配置。Vercel 部署会自动通过 OIDC 完成 AI Gateway 鉴权,使用你团队的 AI Gateway 额度。
2. 本地开发
pnpm install
接着给应用配置一个 Gateway 凭据,可以通过关联 Vercel 项目拉取 OIDC token:
vercel link
vercel env pull
或者在 Vercel 控制台(AI Gateway → API Keys)创建 API key 并写入 .env.local:
cp .env.example .env.local
# 然后设置 AI_GATEWAY_API_KEY=...
最后启动开发服务器:
pnpm dev
3. 配置
唯一的环境变量是 AI_GATEWAY_API_KEY(仅本地开发需要,Vercel 部署用 OIDC 无需设置)。模型列表存放在 lib/models.ts,其中第一个条目就是默认模型。
适用场景
- 快速原型验证:想快速做一个 AI 对话产品 demo,用它省去大量脚手架搭建时间。
- 学习 AI 应用开发:代码结构清晰、类型安全,是学习”流式对话 + 工具调用”最佳实践的绝佳范例。
- 企业内部小工具:加入自己的工具后,可以快速改造成客服助手、知识库问答等内部工具。
- 产品 MVP 起点:作为正式 AI 产品的起步模板,再逐步补齐鉴权、限流等生产级能力。
安全提示
需要注意,项目默认 /api/chat 路由是公开且无需鉴权的,每次请求都会消耗你的 AI Gateway 额度。作为个人 demo 没问题,但上线前务必加上限流(Vercel WAF 或 @upstash/ratelimit)、设置预算上限,并按需添加鉴权。
总的来说,chatbot-template 是一个设计精良、代码质量上乘、真正”即拿即用”的 AI 聊天应用模板,非常适合想快速上手 AI 应用开发的开发者。感兴趣的话不妨去 GitHub 上点个 Star,跑起来试试看。
项目地址:https://github.com/shadcn-ui/chatbot-template(MIT 协议)
















cqlbgzs@163.com 1年前0
d好879445037@qq.com 2年前0
购买了 无法下载Alexcc 3年前0
强大Alexcc 3年前0
看不了教程Alexcc 3年前0
雷刺下载Alexcc 3年前0
下载Alexcc 3年前0
下载dsa456159 3年前0
下载