如何在本地 5 分钟跑起一个多模型 AI 聊天应用Vercel Chatbot 模板指南【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot想做一个能登录、有历史记录、还能随时换模型的 AI 聊天应用与其从零写起不如直接看 Vercel 开源的 Chatbot 模板。它是一个基于 Next.js 的完整 AI 聊天应用认证、数据库、文件上传、文档编辑全都预置好了。这篇文章带你 5 分钟搞清楚它能干什么、内部怎么分工、跑起来要敲哪几条命令、想改哪儿就打开哪个文件。它是怎么工作的一个网关、一套接口、一张表把整个项目拆开看其实是三块。模型调用层。项目通过 Vercel AI SDK一套把各家大模型调用统一成一个 API 的开发者工具包访问模型所有请求都从 lib/ai/providers.ts 的getLanguageModel这个入口出去。应用代码不关心模型背后是谁家的只传一个模型 id。模型清单。当前启用的模型都列在 lib/ai/models.ts 里包括 DeepSeek、Kimi、Grok 等几个每个模型还标了走哪条网关线路gatewayOrder。加模型就是往这个数组里加一项。存储层。数据落在 Neon Serverless Postgres 上表结构在 lib/db/schema.ts用户、会话、消息、点赞、文档各是一张表聊天记录和对话可见性公开/私有都有现成字段。文件走 Vercel Blob登录用 Auth.js都不用你自己接。本地跑起来的四条命令克隆仓库git clone https://gitcode.com/GitHub_Trending/ai/chatbot安装依赖pnpm install建表迁移pnpm db:migrate启动开发服务pnpm dev启动前在.env.local里配好AI_GATEWAY_API_KEY、认证相关参数等必要环境变量即可部署到 Vercel 时网关密钥自动签发可省掉这一步。跑起来后打开localhost:3000注册一个账号就能开始对话模型在界面右上角切换。拿它做什么两个立刻能用的玩法客服问答机器人。用户登录后可以开多个会话历史全部入库会话标题由模型自动生成。想调整机器人口吻打开 lib/ai/prompts.ts 改regularPrompt里的系统提示词就行比如要求它回答控制在三句以内。AI 写作工作台。模板内置了 Artifact 侧边栏让 AI 写文档、写代码、生成表格时内容会实时渲染在右侧面板还支持让模型对已有文档做定点修改、标注修改建议。对应的工具定义在 lib/ai/tools/比如create-document.ts负责新建、edit-document.ts负责查找替换式编辑。想定制改哪几个文件换模型 / 加模型只动 lib/ai/models.ts 一处配置清单改了界面下拉框自动跟着变改交互风格系统提示词在 lib/ai/prompts.ts改界面打开 components/chat/聊天窗口、输入框、侧边栏都在这里基于 shadcn/ui 和 Tailwind CSS组件都是独立的单文件绕开网关直连厂商把 lib/ai/providers.ts 里的网关调用换成 AI SDK 的 OpenAI、Anthropic 等直连 provider几行代码的事常见坑与下一步别把.env提交进仓库里面有能操作你 AI 账号的密钥跳过pnpm db:migrate会直接查不到表首次启动务必先跑迁移切换模型时注意能力差异不支持工具调用的模型用不了 Artifact 功能界面会自动按getCapabilities的探测结果做降级建议的路线是先按上面的四条命令跑通改一遍系统提示词感受效果再去动模型清单和 UI 组件。模板里的每个文件都是可参考的写法读 app/(chat)/api/chat//api/chat/) 这条对话 API 链路就能看懂流式输出和自动续传是怎么实现的。【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何在本地 5 分钟跑起一个多模型 AI 聊天应用：Vercel Chatbot 模板指南
如何在本地 5 分钟跑起一个多模型 AI 聊天应用Vercel Chatbot 模板指南【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot想做一个能登录、有历史记录、还能随时换模型的 AI 聊天应用与其从零写起不如直接看 Vercel 开源的 Chatbot 模板。它是一个基于 Next.js 的完整 AI 聊天应用认证、数据库、文件上传、文档编辑全都预置好了。这篇文章带你 5 分钟搞清楚它能干什么、内部怎么分工、跑起来要敲哪几条命令、想改哪儿就打开哪个文件。它是怎么工作的一个网关、一套接口、一张表把整个项目拆开看其实是三块。模型调用层。项目通过 Vercel AI SDK一套把各家大模型调用统一成一个 API 的开发者工具包访问模型所有请求都从 lib/ai/providers.ts 的getLanguageModel这个入口出去。应用代码不关心模型背后是谁家的只传一个模型 id。模型清单。当前启用的模型都列在 lib/ai/models.ts 里包括 DeepSeek、Kimi、Grok 等几个每个模型还标了走哪条网关线路gatewayOrder。加模型就是往这个数组里加一项。存储层。数据落在 Neon Serverless Postgres 上表结构在 lib/db/schema.ts用户、会话、消息、点赞、文档各是一张表聊天记录和对话可见性公开/私有都有现成字段。文件走 Vercel Blob登录用 Auth.js都不用你自己接。本地跑起来的四条命令克隆仓库git clone https://gitcode.com/GitHub_Trending/ai/chatbot安装依赖pnpm install建表迁移pnpm db:migrate启动开发服务pnpm dev启动前在.env.local里配好AI_GATEWAY_API_KEY、认证相关参数等必要环境变量即可部署到 Vercel 时网关密钥自动签发可省掉这一步。跑起来后打开localhost:3000注册一个账号就能开始对话模型在界面右上角切换。拿它做什么两个立刻能用的玩法客服问答机器人。用户登录后可以开多个会话历史全部入库会话标题由模型自动生成。想调整机器人口吻打开 lib/ai/prompts.ts 改regularPrompt里的系统提示词就行比如要求它回答控制在三句以内。AI 写作工作台。模板内置了 Artifact 侧边栏让 AI 写文档、写代码、生成表格时内容会实时渲染在右侧面板还支持让模型对已有文档做定点修改、标注修改建议。对应的工具定义在 lib/ai/tools/比如create-document.ts负责新建、edit-document.ts负责查找替换式编辑。想定制改哪几个文件换模型 / 加模型只动 lib/ai/models.ts 一处配置清单改了界面下拉框自动跟着变改交互风格系统提示词在 lib/ai/prompts.ts改界面打开 components/chat/聊天窗口、输入框、侧边栏都在这里基于 shadcn/ui 和 Tailwind CSS组件都是独立的单文件绕开网关直连厂商把 lib/ai/providers.ts 里的网关调用换成 AI SDK 的 OpenAI、Anthropic 等直连 provider几行代码的事常见坑与下一步别把.env提交进仓库里面有能操作你 AI 账号的密钥跳过pnpm db:migrate会直接查不到表首次启动务必先跑迁移切换模型时注意能力差异不支持工具调用的模型用不了 Artifact 功能界面会自动按getCapabilities的探测结果做降级建议的路线是先按上面的四条命令跑通改一遍系统提示词感受效果再去动模型清单和 UI 组件。模板里的每个文件都是可参考的写法读 app/(chat)/api/chat//api/chat/) 这条对话 API 链路就能看懂流式输出和自动续传是怎么实现的。【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考