chatbot-template

克隆即用的 AI 聊天界面模板，几行配置接上模型就能跑

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署对话助手 🍴 复刻 127 🐛 待处理 4 👀 关注 3

GitHub ↗

GitHub 星标 ★ 1196

维护状态较活跃

是否开源开源

定价模式 🏷️完全免费开源免费模板，需自行部署

项目预览

chatbot-template 项目界面预览图 — 图片来源：GitHub 官方仓库名片

项目数据

分类对话助手

开发团队shadcn-ui

GitHubhttps://github.com/shadcn-ui/chatbot-template

定价模式🏷️完全免费

价格说明开源免费模板，需自行部署

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言TypeScript

GitHub 星标★ 1196

上线时间2026-08-11 00:00:00

代码更新2026-10-15

仓库体积84 KB

本站数据更新2026-11-03

维护状态较活跃

收录时间2026-09-14

浏览次数3

项目介绍

chatbot-template 是一个用 Next.js、AI SDK、shadcn/ui 等现代前端技术栈搭建的极简聊天机器人模板，运行在 Vercel AI Gateway 上。它解决的是开发者从零构建 AI 对话界面时重复造轮子的问题：把流式响应、消息列表、输入框、模型切换等常见交互封装成开箱即用的骨架，让开发者只需关注业务逻辑和模型接入。核心能力包括基于 AI SDK 的流式对话渲染、shadcn 组件体系带来的统一视觉与可定制性、以及通过 Vercel AI Gateway 快速切换多家模型提供商。项目定位是模板而非完整产品，代码量小、结构清晰，适合作为二次开发起点，也适合学习 Next.js App Router 与 AI SDK 的配合方式。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-09-14 · 当前星标 ★ 1196

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：入门约 10 分钟部署方式：本地安装 6 步

环境要求

已安装 pnpm（README 使用 pnpm install 安装依赖）
Node.js 运行环境（Next.js 项目的本地开发基础，README 未指定版本）
本地开发需要 Vercel AI Gateway 的 API Key（AI_GATEWAY_API_KEY）
部署到 Vercel 时需要 Vercel 团队与 AI Gateway 额度，无需手动配置密钥

安装与启动步骤

1克隆仓库

把 chatbot-template 仓库拉到本地，GitHub 地址来自项目信息中的仓库链接。
```
git clone https://github.com/shadcn-ui/chatbot-template.git
```
2进入项目目录

后续所有安装和启动命令都在仓库根目录执行。
```
cd chatbot-template
```
3安装依赖

README 的 Local development 一节给出的唯一安装命令，使用 pnpm 安装项目依赖，网络慢时可配置镜像。
```
pnpm install
```
4配置网关密钥

本地开发需要给应用一个 AI Gateway 凭据，也就是环境变量 AI_GATEWAY_API_KEY；README 未给出具体文件名，按 Next.js 惯例放在项目根目录的环境变量文件中即可。
5启动本地开发

以开发模式启动 Next.js 应用。README 节选未明确写出启动命令，pnpm dev 是该模板的常规启动方式，若报错请以仓库 README 为准。
```
pnpm dev
```
6按需切换模型

模型列表定义在 lib/models.ts 中，列表的第一项就是默认模型，想换默认模型改这里即可。

关键配置

配置项	必填	说明	示例
`AI_GATEWAY_API_KEY`	是	AI Gateway API 密钥，仅本地开发需要；Vercel 部署走 OIDC 自动认证，无需配置	`sk-xxxxxxxx`
`lib/models.ts 中的模型列表`	否	决定可选模型，数组第一项为默认模型	`第一个条目 = 默认模型`