2026/9/6 19:50:25
FEATURED · 精选文章 
Next.js AI Chatbot 模板从 clone 到能跑只要 5 分钟【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot你大概率遇到过这种问题纯文本对话的 demo 十分钟就能写出来但真要给别人看时才开始补窟窿——历史存哪、文件传哪、用户怎么切模型、刷新页面正在流式输出的回答怎么办。chatbot 这个模板就是冲着这些痛点来的它是 Vercel 出的 Next.js AI Chatbot 项目把流式聊天、多模型切换、登录认证、历史持久化、文件上传和文档侧边栏全部打包好clone 下来就能跑。⚡ 它到底能做什么切模型不用改代码模型列表在 lib/ai/models.ts 里配置界面选择器里点一下就换OpenAI、DeepSeek、Kimi、Grok 都是预置好的。流式输出 自动恢复回答到一半刷新页面use-auto-resume.ts 会把没播完的流接回去不用重新发问。Artifact 侧边栏AI 写代码、写文档、做表格时内容直接进右侧面板带编辑器、diff 和预览相当于一个协作工作区。历史和文件都落库聊天记录进 Postgres上传的文件走 Vercel Blob账号体系用 Auth.js后端这块你一行不用写。多模态输入输入框可以直接挂附件针对文件内容提问。 五分钟跑起来git clone https://link.gitcode.com/i/567e84235e4841678cf4892aa7a428c8pnpm install复制.env.example为.env填 5 个值AI_GATEWAY_API_KEY非 Vercel 部署必须AI Gateway 的 key、AUTH_SECRET、POSTGRES_URL、REDIS_URL、BLOB_READ_WRITE_TOKEN。部署到 Vercel 的话 Gateway 认证走 OIDC 自动完成少填一项pnpm db:migrate初始化数据库pnpm dev浏览器开localhost:3000跑起来后左侧是历史列表中间是输入区底部就是模型选择器功能都在明面上。 怎么把它改成你的加一个新模型在 lib/ai/models.ts 的chatModels数组里加一条id、provider、网关路由前端选择器自动出现就这几行。想绕过 Gateway 直连自己的 key改 lib/ai/providers.ts 的getLanguageModel把gateway.languageModel换成对应 provider 即可。给它加一个工具在 lib/ai/tools/ 里新建文件用tool zod 定义入参和返回值仓库里的get-weather.ts就是完整范本照着抄一个查汇率的差不多半小时的事。改行为和界面AI 的回答风格、什么时候开 Artifact全由lib/ai/prompts.ts里的提示词决定直接编辑就行界面则是 shadcn/ui Tailwind通用组件在components/ui/聊天专属组件在components/chat/改样式不用碰业务逻辑。 谁在用它 下一步如果你是想给内部做个演示或者快速验证产品想法的全栈开发clone 下来把lib/ai/prompts.ts里的角色提示词换成你的业务设定当天就能给人看。如果你是在学 AI SDK 怎么做流式数据流、断流恢复和工具调用约定这个仓库是最好的参照物——每个机制都是生产级写法直接读源码就行。README 里有完整的部署和环境变量说明建议先本地跑通一遍再决定砍掉哪些功能留下哪些。【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Next.js AI Chatbot 模板：从 clone 到能跑只要 5 分钟
Next.js AI Chatbot 模板从 clone 到能跑只要 5 分钟【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot你大概率遇到过这种问题纯文本对话的 demo 十分钟就能写出来但真要给别人看时才开始补窟窿——历史存哪、文件传哪、用户怎么切模型、刷新页面正在流式输出的回答怎么办。chatbot 这个模板就是冲着这些痛点来的它是 Vercel 出的 Next.js AI Chatbot 项目把流式聊天、多模型切换、登录认证、历史持久化、文件上传和文档侧边栏全部打包好clone 下来就能跑。⚡ 它到底能做什么切模型不用改代码模型列表在 lib/ai/models.ts 里配置界面选择器里点一下就换OpenAI、DeepSeek、Kimi、Grok 都是预置好的。流式输出 自动恢复回答到一半刷新页面use-auto-resume.ts 会把没播完的流接回去不用重新发问。Artifact 侧边栏AI 写代码、写文档、做表格时内容直接进右侧面板带编辑器、diff 和预览相当于一个协作工作区。历史和文件都落库聊天记录进 Postgres上传的文件走 Vercel Blob账号体系用 Auth.js后端这块你一行不用写。多模态输入输入框可以直接挂附件针对文件内容提问。 五分钟跑起来git clone https://link.gitcode.com/i/567e84235e4841678cf4892aa7a428c8pnpm install复制.env.example为.env填 5 个值AI_GATEWAY_API_KEY非 Vercel 部署必须AI Gateway 的 key、AUTH_SECRET、POSTGRES_URL、REDIS_URL、BLOB_READ_WRITE_TOKEN。部署到 Vercel 的话 Gateway 认证走 OIDC 自动完成少填一项pnpm db:migrate初始化数据库pnpm dev浏览器开localhost:3000跑起来后左侧是历史列表中间是输入区底部就是模型选择器功能都在明面上。 怎么把它改成你的加一个新模型在 lib/ai/models.ts 的chatModels数组里加一条id、provider、网关路由前端选择器自动出现就这几行。想绕过 Gateway 直连自己的 key改 lib/ai/providers.ts 的getLanguageModel把gateway.languageModel换成对应 provider 即可。给它加一个工具在 lib/ai/tools/ 里新建文件用tool zod 定义入参和返回值仓库里的get-weather.ts就是完整范本照着抄一个查汇率的差不多半小时的事。改行为和界面AI 的回答风格、什么时候开 Artifact全由lib/ai/prompts.ts里的提示词决定直接编辑就行界面则是 shadcn/ui Tailwind通用组件在components/ui/聊天专属组件在components/chat/改样式不用碰业务逻辑。 谁在用它 下一步如果你是想给内部做个演示或者快速验证产品想法的全栈开发clone 下来把lib/ai/prompts.ts里的角色提示词换成你的业务设定当天就能给人看。如果你是在学 AI SDK 怎么做流式数据流、断流恢复和工具调用约定这个仓库是最好的参照物——每个机制都是生产级写法直接读源码就行。README 里有完整的部署和环境变量说明建议先本地跑通一遍再决定砍掉哪些功能留下哪些。【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址: https://gitcode.com/GitHub_Trending/ai/chatbot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
