OpenVibeBETA

vercel/chatbot

Chat SDK

用生产级 Next.js 模板学习流式对话、工具调用与持久化

在 GitHub 查看 从 30 分钟挑战开始
难度
中等
适合
入门 / 进阶
主要语言
TypeScript
GitHub
★ 20.8k
许可证
Apache-2.0
快照日期
2026年8月9日

先判断要不要学

这个项目值得拆什么？

Chat SDK 是 Vercel 维护的可修改 AI 聊天模板，结合 Next.js App Router、AI SDK、Auth.js、Postgres 和 Blob 存储，并通过 artifacts 与 tools 展示对话之外的生成式 UI。它适合用一条真实聊天链路学习流式传输、模型抽象、身份、数据持久化和 E2E 测试。

  1. 01

    从服务端 streamText 到客户端消息状态的路径清晰。

  2. 02

    工具调用与 artifact 让学习不停在文本聊天。

  3. 03

    登录、聊天记录、文件和测试齐全，能看到完整产品边界。

可以学什么

不只是看代码，而是找到产品的骨架

  • 学 AI 接入
  • 学用户登录
  • 学数据库
  • 学界面
  • 学产品结构
  • 学部署
01

流式对话全链路

从 chat API 的模型调用追到客户端消息和错误状态。

app/(chat)/api/chat/route.ts · components/chat.tsx · hooks
02

Tools 与 Artifacts

观察工具 schema、服务端执行和生成式 UI 如何通过统一消息协议连接。

lib/ai/tools · artifacts · components/artifact.tsx
03

对话数据模型

理解 user、chat、message、vote 与 document 如何支撑历史和反馈。

lib/db/schema.ts · lib/db/queries.ts · lib/db/migrations

三段学习路径

从理解、修改到做出你的版本

0130 分钟先跑通

跟通一次聊天请求

  1. 读 README Features
  2. 从 chat route 找到 AI SDK 调用
  3. 对照 schema 标出持久化节点

完成标志：一张请求、流、UI、数据库的链路图。

022 小时动手改

新增一个只读工具

  1. 定义工具输入 schema
  2. 用固定数据实现执行
  3. 在聊天 UI 渲染结果
  4. 测试无效参数和模型未调用工具

完成标志：一个可测试的 tool-call 纵向切片。

031 天做变体

改造为细分领域助手

  1. 替换系统提示与模型选择
  2. 新增领域数据工具
  3. 限制文件类型、工具权限和 token 预算
  4. 补登录、流中断、重试与越权 E2E

完成标志：一个有持久化、工具边界与回归测试的领域聊天应用。

评分解释

每一分都要说清楚为什么

可复刻性20 / 25
20 / 25

模板导向明确，但外部服务较多。

文档与代码清晰度18 / 20
18 / 20

README、目录与测试导航良好。

新手学习价值17 / 20
17 / 20

适合已会 Next.js 的入门者。

产品完整度14 / 15
14 / 15

聊天、身份、持久化、文件和工具闭环完整。

vibe coding 代表性10 / 10
10 / 10

是 AI 应用骨架的直接参考。

活跃度5 / 5
5 / 5

Vercel 持续维护。

新颖性4 / 5
4 / 5

Artifacts 和 tools 比基础聊天更有学习价值。