AI 应用前端后端交互助手【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址https://gitcode.com/GitHub_Trending/ai/chatbot点击查看免费下载本指南以开源项目 ChatbotVercel 出品的 AI Chatbot 模板的 README.md 为核心骨架完整讲解该模板的功能特性、AI 模型接入方式、AI Gateway 认证方案、环境变量配置、数据持久化设计以及从本地运行到 Vercel 一键部署的完整链路。读完本文你将掌握如何基于 Next.js App Router AI SDK 快速搭建一个可自部署、支持多模型路由、具备聊天历史与文档生成能力的生产级聊天机器人并理解其底层源码实现。项目概览一个功能完备且可高度定制的 AI 聊天机器人模板Chatbot前身名为 AI Chatbot是一个免费、开源的聊天机器人模板基于 Next.js 与 AI SDKVercel AI SDK构建旨在帮助开发者快速搭建功能强大的聊天机器人应用。它并非一个只具备最小能力的演示项目而是涵盖了从认证、对话、文件上传、文档Artifact生成、评分投票到数据持久化的完整产品能力可作为独立上线的起点也可作为深度定制的基础。从仓库结构可以看到项目的完整布局app/(chat)主聊天界面与应用路由包括api/chat、api/history、api/messages、api/vote、api/models、api/suggestions、api/document、api/files/upload等一组完整的 REST 端点app/(auth)基于 Auth.jsNextAuth的登录、注册与认证逻辑components/chat聊天界面组件消息列表、侧边栏、Artifact 编辑器、多模态输入等lib/aiAI 模型配置、Prompt、Provider 与工具Tool定义lib/db基于 Drizzle ORM 的数据库 Schema、迁移脚本与查询层。技术栈全景五大核心组件README 明确指出模板依赖以下五类核心技术构成了整个应用的基石。Next.js App Router路由与渲染范式模板使用 Next.js 的 App Router带来两层核心收益高级路由能力文件系统路由天然支持嵌套布局、加载态与错误边界聊天会话按chat/[id]组织页面见 app/(chat)/chat/[id]/page.tsx实现无缝导航与性能优化RSC 与 Server ActionsReact Server ComponentsRSCs负责服务端渲染以提升性能Server Actions 用于服务端数据变更。典型应用是 app/(chat)/actions.ts/actions.ts) 中的generateTitleFromUserMessage——模型只负责为会话生成标题再通过updateChatTitleById写回数据库避免了额外的前端请求往返。从 package.json 可见当前模板基于next16.2.10 与react19.2.7 构建开发命令使用next dev --turbo启用 Turbopack。AI SDK统一的 LLM 编程接口AI SDKai7.0.15为整个应用提供了与 LLM 交互的统一 API覆盖三类核心能力统一 API 生成文本、结构化对象与工具调用借助streamText、tool等函数模板在 app/(chat)/api/chat/route.ts/api/chat/route.ts) 中通过streamText完成流式对话并结合convertToModelMessages、createUIMessageStreamResponse将流式结果转换为前端可消费的 UI 消息流构建动态聊天与生成式 UI 的 Hooks如useChat、useArtifact等支撑多模态输入、文档生成等交互多 Provider 支持通过 AI Gateway 统一接入 OpenAI、Anthropic、Google、xAI 等模型提供商。shadcn/ui组件体系与视觉样式UI 层基于 shadcn/ui 构建底层依赖 Tailwind CSS 完成样式设计并采用 Radix UI 提供的组件原语primitive保证可访问性与灵活性。仓库中components/ui目录收录了 sidebar、dialog、select、tooltip、dropdown-menu 等数十个由 shadcn/ui 风格管理的组件。数据持久化Postgres Blob 双存储Neon Serverless Postgres用于保存聊天历史与用户数据。从 lib/db/schema.ts 可以看到完整的表结构设计User、Chat、Message_v2、Vote_v2、Document、Suggestion、StreamVercel Blob用于高效的文件存储对应BLOB_READ_WRITE_TOKEN环境变量与 app/(chat)/api/files/upload/route.ts/api/files/upload/route.ts) 上传端点。Auth.js安全且简单的认证模板使用 Auth.jsnext-auth5.0.0-beta.25实现认证。核心配置位于 app/(auth)/auth.config.ts/auth.config.ts)包含basePath: /api/auth认证 API 挂载路径pages.signIn指向/login、pages.newUser指向首页trustHost: true适配多环境部署。此外 app/(auth)/api/guest/route.ts/api/guest/route.ts) 还提供了访客游客模式配合 lib/ai/entitlements.ts 中按用户类型定义的maxMessagesPerHour限额实现对匿名用户的消息频率控制。模型接入基于 Vercel AI Gateway 的统一模型路由README 的 Model Providers 一节指出模板通过 Vercel AI Gateway以统一接口访问多个 AI 模型所有模型都在lib/ai/models.ts中配置并为每个模型指定了 provider 路由。模型注册表chatModels查看 lib/ai/models.ts 的chatModels数组可以完整看到模板内置的五个模型以当前仓库源码为准模型 ID名称Provider特点与 gatewayOrderdeepseek/deepseek-v3.2DeepSeek V3.2deepseek快速且支持工具调用路由顺序bedrock→deepinframoonshotai/kimi-k2.5Kimi K2.5moonshotaiMoonshot AI 旗舰模型路由顺序fireworks→bedrockopenai/gpt-oss-20bGPT OSS 20Bopenai紧凑型推理模型reasoningEffort: low路由顺序groq→bedrockopenai/gpt-oss-120bGPT OSS 120Bopenai开源 120B 参数模型reasoningEffort: low路由顺序fireworks→bedrockxai/grok-4.1-fast-non-reasoningGrok 4.1 Fastxai快速非推理模型支持工具调用路由仅xai其中默认对话模型为DEFAULT_CHAT_MODEL moonshotai/kimi-k2.5标题生成模型titleModel同样使用 Kimi K2.5但其gatewayOrder为fireworks→bedrock说明同一个模型在不同用途下可以走不同的提供商路由。ChatModel类型定义了每个模型的公共结构id、name、provider、description以及两个可选字段——gatewayOrderGateway 故障转移的提供商顺序和reasoningEffort推理强度取值none | minimal | low | medium | high。modelsByProvider进一步按 provider 对模型做了分组索引便于按厂商筛选。能力探测getCapabilities 与 getModelAvailability模板并不仅仅静态声明模型还会在运行时向 AI Gateway 探测每个模型的实际能力对应getCapabilities函数它并发请求https://ai-gateway.vercel.sh/v1/models/{modelId}/endpoints从响应中提取reasoningsupported_parameters中是否包含reasoningtoolssupported_parameters中是否包含toolsvision架构声明的input_modalities中是否包含image。该探测结果缓存在lib/ai/models.mock.ts/models.test.ts对应的测试环境中驱动前端模型选择器components/ai-elements/model-selector.tsx动态展示每个模型是否支持工具、视觉与推理。getModelAvailability则通过端点健康度status、最近 15 分钟/1 小时 uptime、p50/p95 延迟将模型可用性归为healthy/impacted/unknown三档判定阈值定义在PROVIDER_IMPACTED_UPTIME_THRESHOLD 99、PROVIDER_IMPACTED_P50_MS 10_000、PROVIDER_IMPACTED_P95_MS 30_000中。Provider 注入gateway.languageModel在 lib/ai/providers.ts 中getLanguageModel(modelId)直接调用gateway.languageModel(modelId)创建语言模型实例——这正是 AI SDK 的 Gateway 能力把不同厂商的模型通过一个统一接口暴露调用时只需传入模型 ID。测试环境下则会切换到models.mock中的模拟模型myProvider使 tests/e2e 的端到端测试不依赖真实付费 API。在 app/(chat)/api/chat/route.ts/api/chat/route.ts) 中服务端会校验请求体中的modelId是否属于allowedModelIdschatModels中所有 ID 的集合非法的模型 ID 会直接返回bad_request错误防止任意指定模型。AI Gateway 认证两种部署环境的差异README 明确区分了两种 AI Gateway 认证方式Vercel 部署认证由平台自动处理通过 OIDCOpenID Connect令牌完成无需任何手工配置——这也是 .env.example 注释中 vercel uses OIDC automatically 的含义非 Vercel 部署必须在.env.local中手动设置AI_GATEWAY_API_KEY环境变量Gateway 请求将使用该 API Key 完成身份认证。因此如果你打算把模板部署到自有服务器、Docker 或本地环境AI_GATEWAY_API_KEY是必须配置的关键密钥。环境变量清单按 .env.example 逐项解读README 要求使用 .env.example 中定义的环境变量来运行 Chatbot并推荐优先通过 Vercel Environment Variables 管理本地使用.env文件即可。以下按仓库.env.example逐项说明环境变量作用生成/获取方式AUTH_SECRETAuth.js 会话签名密钥openssl rand -base64 32或在线随机密钥生成器AI_GATEWAY_API_KEY非 Vercel 部署时访问 AI Gateway 所需Vercel AI Gateway 控制台创建BLOB_READ_WRITE_TOKENVercel Blob 文件存储的读写令牌Vercel Blob 存储项目创建POSTGRES_URLNeon Serverless Postgres 连接串用于聊天历史与用户数据Neon 或 Vercel Postgres 项目创建REDIS_URLRedis 连接串Vercel Redis 项目创建两点重要提醒来自 README 原文.env文件本身足以运行整个应用不需要额外的配置中心切勿把.env文件提交进 Git——一旦泄露攻击者可借此控制你的 AI 提供商与认证账户。数据持久化设计Postgres 表结构与迁移README 提到用 Neon Serverless Postgres 保存聊天历史与用户数据其实际表结构定义在 lib/db/schema.ts通过 Drizzle ORM 描述User用户账号含email、passwordbcrypt 哈希、isAnonymous访客标记、emailVerified等字段Chat会话记录含title、visibilitypublic/private通过userId外键关联用户Message_v2消息记录role标记角色parts与attachments以 JSON 存储多模态消息内容Vote_v2消息点赞/点踩isUpvoted主键为(chatId, messageId)复合键Document文档Artifact记录kind区分text/code/image/sheetSuggestion文档编辑建议通过(documentId, documentCreatedAt)外键关联文档Stream可恢复的流式响应记录。迁移逻辑在 lib/db/migrate.ts若未设置POSTGRES_URL则跳过迁移并退出否则连接数据库并执行lib/db/migrations目录下的 SQL 迁移文件。pnpm db:migrate对应脚本npx tsx lib/db/migrate.ts而pnpm build也会先执行tsx lib/db/migrate再构建应用确保生产构建前数据库已就绪。文件上传侧则走 Vercel Blobapp/(chat)/api/files/upload/route.ts/api/files/upload/route.ts) 接收前端多模态输入上传的文件返回 Blob 存储地址供消息引用。一键部署到 VercelREADME 提供了一键部署能力点击 README 中的 Deploy with Vercel 按钮即可将 Chatbot 部署到自己的 Vercel 账号。仓库中 vercel.json 与 vercel-template.json 定义了 Vercel 平台相关的构建与路由配置。由于 AI Gateway 在 Vercel 环境通过 OIDC 自动认证这种部署方式下你无需手动配置AI_GATEWAY_API_KEY只需在 Vercel 控制台补齐AUTH_SECRET、BLOB_READ_WRITE_TOKEN、POSTGRES_URL、REDIS_URL等环境变量即可。本地运行指南完整命令行流程README 给出了标准的本地运行流程共三步准备 三条命令。以下结合 package.json 中的脚本逐一展开。第一步准备 Vercel CLI 并关联项目npm i -g vercel全局安装 Vercel CLI。然后执行vercel link将本地实例与你的 Vercel 项目及 GitHub 账号关联该命令会创建.vercel目录保存链接信息。第二步拉取环境变量vercel env pull从 Vercel 项目下载已配置的环境变量到本地.env.local随后被 lib/db/migrate.ts 中的dotenv读取。如果你的.env.local缺失db:migrate会因POSTGRES_URL未定义而跳过迁移。第三步安装依赖、迁移数据库并启动pnpm install pnpm db:migrate # 初始化数据库或应用最新的数据库变更 pnpm devpnpm install安装依赖。当前仓库使用pnpm10.32.1作为包管理器见package.json的packageManager字段pnpm db:migrate执行lib/db/migrate.ts把lib/db/migrations中的迁移应用到POSTGRES_URL指向的数据库pnpm dev以 Turbopack 启动开发服务器next dev --turbo。完成后应用模板即可在 localhost:3000 访问。常用补充脚本除 README 提及的命令外package.json还提供了一批开发辅助脚本值得说明pnpm build先迁移数据库再执行生产构建pnpm start生产模式启动pnpm test运行 Playwright 端到端测试tests/e2e下覆盖了 API、认证、聊天与模型选择器场景pnpm db:generate/db:push/db:studio基于 Drizzle Kit 的 Schema 生成、推送与数据库可视化操作。核心链路一次对话请求如何被处理将 README 的各模块串起来一次完整的对话请求在 app/(chat)/api/chat/route.ts/api/chat/route.ts) 中大致经历以下阶段从源码结构看鉴权与会话通过auth()获取会话区分注册用户与访客使用checkBotId拦截机器人流量checkIpRateLimit做 IP 级限流并结合entitlementsByUserType检查每用户小时消息上限请求校验用postRequestBodySchema见 app/(chat)/api/chat/schema.ts/api/chat/schema.ts)解析请求体校验modelId是否在allowedModelIds内模型装载与流式生成getLanguageModel(modelId)从 AI Gateway 取得语言模型streamText结合systemPromptlib/ai/prompts.ts开始流式生成并通过convertToModelMessages转换历史消息工具调用对话过程中模型可按需调用createDocument、editDocument、updateDocument、getWeather、requestSuggestions等工具。以 lib/ai/tools/create-document.ts 为例它通过dataStream向前端推送data-kind、data-id、data-title等事件实时驱动文档Artifact界面的创建kind参数由 zod 枚举校验code/text/sheet并分发到对应的文档处理器持久化流式完成后saveChat、saveMessages将会话与消息写入 PostgresgenerateTitleFromUserMessage异步生成标题并updateChatTitleById回写。前端侧data-stream-provider.tsx与data-stream-handler.tsxcomponents/chat消费同一数据流协议渲染推理过程、工具调用与最终消息。小结Chatbot 模板的价值在于它把从零搭建一个可上线的 AI 聊天应用所需的大部分工程问题都预先解决了Next.js App Router 的应用骨架、AI SDK AI Gateway 的多模型统一接入与故障转移、Auth.js 的认证体系、Postgres Blob 的持久化方案以及一键部署与清晰的本地运行链路。以 README.md 为起点再对照lib/ai、lib/db、app/(chat)等目录下的源码逐层深入你就能在最短时间内拥有一个可定制、可扩展、可直接部署的聊天机器人基座。赞分享AI 应用前端后端交互助手【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址https://gitcode.com/GitHub_Trending/ai/chatbot点击查看免费下载相关推荐推荐项目Next.js AI Chatbot —— 基于Vercel的智能聊天机器人模板推荐项目Next.js AI Chatbot —— 基于Vercel的智能聊天机器人模板 项目介绍 Next.js AI Chatbot 是一个开放源代码的聊AI 应用前端后端交互助手基于 Next.js、AI SDK 与 Kasada 构建 AI 聊天应用的机器人防护方案基于 Next.js、AI SDK 与 Kasada 构建 AI 聊天应用的机器人防护方案 本指南以仓库中的 examples/next openai kasa人工智能AI 应用AI Agent工具调用MCP ClientsVoltAgent Next.js 聊天机器人 Starter 模板快速搭建 AI Chatbot 的完整实战指南VoltAgent Next.js 聊天机器人 Starter 模板快速搭建 AI Chatbot 的完整实战指南 导读 本文基于 VoltAgent 官方示人工智能AI AgentAgent 框架后端多智能体RAG工具调用Agent 记忆Agent 工作流AI 评测MCP 服务MCP Clients语音上一篇3步打造智能灯光控制系统从零开始掌握WLED核心功能下一篇群晖硬盘兼容性终极解锁指南让第三方硬盘完美运行创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
基于 Next.js 与 AI SDK 构建可自部署的 AI 聊天机器人：Chatbot 开源模板全解析
AI 应用前端后端交互助手【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址https://gitcode.com/GitHub_Trending/ai/chatbot点击查看免费下载本指南以开源项目 ChatbotVercel 出品的 AI Chatbot 模板的 README.md 为核心骨架完整讲解该模板的功能特性、AI 模型接入方式、AI Gateway 认证方案、环境变量配置、数据持久化设计以及从本地运行到 Vercel 一键部署的完整链路。读完本文你将掌握如何基于 Next.js App Router AI SDK 快速搭建一个可自部署、支持多模型路由、具备聊天历史与文档生成能力的生产级聊天机器人并理解其底层源码实现。项目概览一个功能完备且可高度定制的 AI 聊天机器人模板Chatbot前身名为 AI Chatbot是一个免费、开源的聊天机器人模板基于 Next.js 与 AI SDKVercel AI SDK构建旨在帮助开发者快速搭建功能强大的聊天机器人应用。它并非一个只具备最小能力的演示项目而是涵盖了从认证、对话、文件上传、文档Artifact生成、评分投票到数据持久化的完整产品能力可作为独立上线的起点也可作为深度定制的基础。从仓库结构可以看到项目的完整布局app/(chat)主聊天界面与应用路由包括api/chat、api/history、api/messages、api/vote、api/models、api/suggestions、api/document、api/files/upload等一组完整的 REST 端点app/(auth)基于 Auth.jsNextAuth的登录、注册与认证逻辑components/chat聊天界面组件消息列表、侧边栏、Artifact 编辑器、多模态输入等lib/aiAI 模型配置、Prompt、Provider 与工具Tool定义lib/db基于 Drizzle ORM 的数据库 Schema、迁移脚本与查询层。技术栈全景五大核心组件README 明确指出模板依赖以下五类核心技术构成了整个应用的基石。Next.js App Router路由与渲染范式模板使用 Next.js 的 App Router带来两层核心收益高级路由能力文件系统路由天然支持嵌套布局、加载态与错误边界聊天会话按chat/[id]组织页面见 app/(chat)/chat/[id]/page.tsx实现无缝导航与性能优化RSC 与 Server ActionsReact Server ComponentsRSCs负责服务端渲染以提升性能Server Actions 用于服务端数据变更。典型应用是 app/(chat)/actions.ts/actions.ts) 中的generateTitleFromUserMessage——模型只负责为会话生成标题再通过updateChatTitleById写回数据库避免了额外的前端请求往返。从 package.json 可见当前模板基于next16.2.10 与react19.2.7 构建开发命令使用next dev --turbo启用 Turbopack。AI SDK统一的 LLM 编程接口AI SDKai7.0.15为整个应用提供了与 LLM 交互的统一 API覆盖三类核心能力统一 API 生成文本、结构化对象与工具调用借助streamText、tool等函数模板在 app/(chat)/api/chat/route.ts/api/chat/route.ts) 中通过streamText完成流式对话并结合convertToModelMessages、createUIMessageStreamResponse将流式结果转换为前端可消费的 UI 消息流构建动态聊天与生成式 UI 的 Hooks如useChat、useArtifact等支撑多模态输入、文档生成等交互多 Provider 支持通过 AI Gateway 统一接入 OpenAI、Anthropic、Google、xAI 等模型提供商。shadcn/ui组件体系与视觉样式UI 层基于 shadcn/ui 构建底层依赖 Tailwind CSS 完成样式设计并采用 Radix UI 提供的组件原语primitive保证可访问性与灵活性。仓库中components/ui目录收录了 sidebar、dialog、select、tooltip、dropdown-menu 等数十个由 shadcn/ui 风格管理的组件。数据持久化Postgres Blob 双存储Neon Serverless Postgres用于保存聊天历史与用户数据。从 lib/db/schema.ts 可以看到完整的表结构设计User、Chat、Message_v2、Vote_v2、Document、Suggestion、StreamVercel Blob用于高效的文件存储对应BLOB_READ_WRITE_TOKEN环境变量与 app/(chat)/api/files/upload/route.ts/api/files/upload/route.ts) 上传端点。Auth.js安全且简单的认证模板使用 Auth.jsnext-auth5.0.0-beta.25实现认证。核心配置位于 app/(auth)/auth.config.ts/auth.config.ts)包含basePath: /api/auth认证 API 挂载路径pages.signIn指向/login、pages.newUser指向首页trustHost: true适配多环境部署。此外 app/(auth)/api/guest/route.ts/api/guest/route.ts) 还提供了访客游客模式配合 lib/ai/entitlements.ts 中按用户类型定义的maxMessagesPerHour限额实现对匿名用户的消息频率控制。模型接入基于 Vercel AI Gateway 的统一模型路由README 的 Model Providers 一节指出模板通过 Vercel AI Gateway以统一接口访问多个 AI 模型所有模型都在lib/ai/models.ts中配置并为每个模型指定了 provider 路由。模型注册表chatModels查看 lib/ai/models.ts 的chatModels数组可以完整看到模板内置的五个模型以当前仓库源码为准模型 ID名称Provider特点与 gatewayOrderdeepseek/deepseek-v3.2DeepSeek V3.2deepseek快速且支持工具调用路由顺序bedrock→deepinframoonshotai/kimi-k2.5Kimi K2.5moonshotaiMoonshot AI 旗舰模型路由顺序fireworks→bedrockopenai/gpt-oss-20bGPT OSS 20Bopenai紧凑型推理模型reasoningEffort: low路由顺序groq→bedrockopenai/gpt-oss-120bGPT OSS 120Bopenai开源 120B 参数模型reasoningEffort: low路由顺序fireworks→bedrockxai/grok-4.1-fast-non-reasoningGrok 4.1 Fastxai快速非推理模型支持工具调用路由仅xai其中默认对话模型为DEFAULT_CHAT_MODEL moonshotai/kimi-k2.5标题生成模型titleModel同样使用 Kimi K2.5但其gatewayOrder为fireworks→bedrock说明同一个模型在不同用途下可以走不同的提供商路由。ChatModel类型定义了每个模型的公共结构id、name、provider、description以及两个可选字段——gatewayOrderGateway 故障转移的提供商顺序和reasoningEffort推理强度取值none | minimal | low | medium | high。modelsByProvider进一步按 provider 对模型做了分组索引便于按厂商筛选。能力探测getCapabilities 与 getModelAvailability模板并不仅仅静态声明模型还会在运行时向 AI Gateway 探测每个模型的实际能力对应getCapabilities函数它并发请求https://ai-gateway.vercel.sh/v1/models/{modelId}/endpoints从响应中提取reasoningsupported_parameters中是否包含reasoningtoolssupported_parameters中是否包含toolsvision架构声明的input_modalities中是否包含image。该探测结果缓存在lib/ai/models.mock.ts/models.test.ts对应的测试环境中驱动前端模型选择器components/ai-elements/model-selector.tsx动态展示每个模型是否支持工具、视觉与推理。getModelAvailability则通过端点健康度status、最近 15 分钟/1 小时 uptime、p50/p95 延迟将模型可用性归为healthy/impacted/unknown三档判定阈值定义在PROVIDER_IMPACTED_UPTIME_THRESHOLD 99、PROVIDER_IMPACTED_P50_MS 10_000、PROVIDER_IMPACTED_P95_MS 30_000中。Provider 注入gateway.languageModel在 lib/ai/providers.ts 中getLanguageModel(modelId)直接调用gateway.languageModel(modelId)创建语言模型实例——这正是 AI SDK 的 Gateway 能力把不同厂商的模型通过一个统一接口暴露调用时只需传入模型 ID。测试环境下则会切换到models.mock中的模拟模型myProvider使 tests/e2e 的端到端测试不依赖真实付费 API。在 app/(chat)/api/chat/route.ts/api/chat/route.ts) 中服务端会校验请求体中的modelId是否属于allowedModelIdschatModels中所有 ID 的集合非法的模型 ID 会直接返回bad_request错误防止任意指定模型。AI Gateway 认证两种部署环境的差异README 明确区分了两种 AI Gateway 认证方式Vercel 部署认证由平台自动处理通过 OIDCOpenID Connect令牌完成无需任何手工配置——这也是 .env.example 注释中 vercel uses OIDC automatically 的含义非 Vercel 部署必须在.env.local中手动设置AI_GATEWAY_API_KEY环境变量Gateway 请求将使用该 API Key 完成身份认证。因此如果你打算把模板部署到自有服务器、Docker 或本地环境AI_GATEWAY_API_KEY是必须配置的关键密钥。环境变量清单按 .env.example 逐项解读README 要求使用 .env.example 中定义的环境变量来运行 Chatbot并推荐优先通过 Vercel Environment Variables 管理本地使用.env文件即可。以下按仓库.env.example逐项说明环境变量作用生成/获取方式AUTH_SECRETAuth.js 会话签名密钥openssl rand -base64 32或在线随机密钥生成器AI_GATEWAY_API_KEY非 Vercel 部署时访问 AI Gateway 所需Vercel AI Gateway 控制台创建BLOB_READ_WRITE_TOKENVercel Blob 文件存储的读写令牌Vercel Blob 存储项目创建POSTGRES_URLNeon Serverless Postgres 连接串用于聊天历史与用户数据Neon 或 Vercel Postgres 项目创建REDIS_URLRedis 连接串Vercel Redis 项目创建两点重要提醒来自 README 原文.env文件本身足以运行整个应用不需要额外的配置中心切勿把.env文件提交进 Git——一旦泄露攻击者可借此控制你的 AI 提供商与认证账户。数据持久化设计Postgres 表结构与迁移README 提到用 Neon Serverless Postgres 保存聊天历史与用户数据其实际表结构定义在 lib/db/schema.ts通过 Drizzle ORM 描述User用户账号含email、passwordbcrypt 哈希、isAnonymous访客标记、emailVerified等字段Chat会话记录含title、visibilitypublic/private通过userId外键关联用户Message_v2消息记录role标记角色parts与attachments以 JSON 存储多模态消息内容Vote_v2消息点赞/点踩isUpvoted主键为(chatId, messageId)复合键Document文档Artifact记录kind区分text/code/image/sheetSuggestion文档编辑建议通过(documentId, documentCreatedAt)外键关联文档Stream可恢复的流式响应记录。迁移逻辑在 lib/db/migrate.ts若未设置POSTGRES_URL则跳过迁移并退出否则连接数据库并执行lib/db/migrations目录下的 SQL 迁移文件。pnpm db:migrate对应脚本npx tsx lib/db/migrate.ts而pnpm build也会先执行tsx lib/db/migrate再构建应用确保生产构建前数据库已就绪。文件上传侧则走 Vercel Blobapp/(chat)/api/files/upload/route.ts/api/files/upload/route.ts) 接收前端多模态输入上传的文件返回 Blob 存储地址供消息引用。一键部署到 VercelREADME 提供了一键部署能力点击 README 中的 Deploy with Vercel 按钮即可将 Chatbot 部署到自己的 Vercel 账号。仓库中 vercel.json 与 vercel-template.json 定义了 Vercel 平台相关的构建与路由配置。由于 AI Gateway 在 Vercel 环境通过 OIDC 自动认证这种部署方式下你无需手动配置AI_GATEWAY_API_KEY只需在 Vercel 控制台补齐AUTH_SECRET、BLOB_READ_WRITE_TOKEN、POSTGRES_URL、REDIS_URL等环境变量即可。本地运行指南完整命令行流程README 给出了标准的本地运行流程共三步准备 三条命令。以下结合 package.json 中的脚本逐一展开。第一步准备 Vercel CLI 并关联项目npm i -g vercel全局安装 Vercel CLI。然后执行vercel link将本地实例与你的 Vercel 项目及 GitHub 账号关联该命令会创建.vercel目录保存链接信息。第二步拉取环境变量vercel env pull从 Vercel 项目下载已配置的环境变量到本地.env.local随后被 lib/db/migrate.ts 中的dotenv读取。如果你的.env.local缺失db:migrate会因POSTGRES_URL未定义而跳过迁移。第三步安装依赖、迁移数据库并启动pnpm install pnpm db:migrate # 初始化数据库或应用最新的数据库变更 pnpm devpnpm install安装依赖。当前仓库使用pnpm10.32.1作为包管理器见package.json的packageManager字段pnpm db:migrate执行lib/db/migrate.ts把lib/db/migrations中的迁移应用到POSTGRES_URL指向的数据库pnpm dev以 Turbopack 启动开发服务器next dev --turbo。完成后应用模板即可在 localhost:3000 访问。常用补充脚本除 README 提及的命令外package.json还提供了一批开发辅助脚本值得说明pnpm build先迁移数据库再执行生产构建pnpm start生产模式启动pnpm test运行 Playwright 端到端测试tests/e2e下覆盖了 API、认证、聊天与模型选择器场景pnpm db:generate/db:push/db:studio基于 Drizzle Kit 的 Schema 生成、推送与数据库可视化操作。核心链路一次对话请求如何被处理将 README 的各模块串起来一次完整的对话请求在 app/(chat)/api/chat/route.ts/api/chat/route.ts) 中大致经历以下阶段从源码结构看鉴权与会话通过auth()获取会话区分注册用户与访客使用checkBotId拦截机器人流量checkIpRateLimit做 IP 级限流并结合entitlementsByUserType检查每用户小时消息上限请求校验用postRequestBodySchema见 app/(chat)/api/chat/schema.ts/api/chat/schema.ts)解析请求体校验modelId是否在allowedModelIds内模型装载与流式生成getLanguageModel(modelId)从 AI Gateway 取得语言模型streamText结合systemPromptlib/ai/prompts.ts开始流式生成并通过convertToModelMessages转换历史消息工具调用对话过程中模型可按需调用createDocument、editDocument、updateDocument、getWeather、requestSuggestions等工具。以 lib/ai/tools/create-document.ts 为例它通过dataStream向前端推送data-kind、data-id、data-title等事件实时驱动文档Artifact界面的创建kind参数由 zod 枚举校验code/text/sheet并分发到对应的文档处理器持久化流式完成后saveChat、saveMessages将会话与消息写入 PostgresgenerateTitleFromUserMessage异步生成标题并updateChatTitleById回写。前端侧data-stream-provider.tsx与data-stream-handler.tsxcomponents/chat消费同一数据流协议渲染推理过程、工具调用与最终消息。小结Chatbot 模板的价值在于它把从零搭建一个可上线的 AI 聊天应用所需的大部分工程问题都预先解决了Next.js App Router 的应用骨架、AI SDK AI Gateway 的多模型统一接入与故障转移、Auth.js 的认证体系、Postgres Blob 的持久化方案以及一键部署与清晰的本地运行链路。以 README.md 为起点再对照lib/ai、lib/db、app/(chat)等目录下的源码逐层深入你就能在最短时间内拥有一个可定制、可扩展、可直接部署的聊天机器人基座。赞分享AI 应用前端后端交互助手【免费下载链接】chatbotA full-featured, hackable Next.js AI chatbot built by Vercel项目地址https://gitcode.com/GitHub_Trending/ai/chatbot点击查看免费下载相关推荐推荐项目Next.js AI Chatbot —— 基于Vercel的智能聊天机器人模板推荐项目Next.js AI Chatbot —— 基于Vercel的智能聊天机器人模板 项目介绍 Next.js AI Chatbot 是一个开放源代码的聊AI 应用前端后端交互助手基于 Next.js、AI SDK 与 Kasada 构建 AI 聊天应用的机器人防护方案基于 Next.js、AI SDK 与 Kasada 构建 AI 聊天应用的机器人防护方案 本指南以仓库中的 examples/next openai kasa人工智能AI 应用AI Agent工具调用MCP ClientsVoltAgent Next.js 聊天机器人 Starter 模板快速搭建 AI Chatbot 的完整实战指南VoltAgent Next.js 聊天机器人 Starter 模板快速搭建 AI Chatbot 的完整实战指南 导读 本文基于 VoltAgent 官方示人工智能AI AgentAgent 框架后端多智能体RAG工具调用Agent 记忆Agent 工作流AI 评测MCP 服务MCP Clients语音上一篇3步打造智能灯光控制系统从零开始掌握WLED核心功能下一篇群晖硬盘兼容性终极解锁指南让第三方硬盘完美运行创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
