Next.js AI 聊天机器人
一个用 Next.js、Vercel AI SDK、OpenAI 和 Vercel KV 构建的开源 AI 聊天机器人应用模板。
功能特点 · 模型提供者 · 部署你自己的 · 本地运行 · 作者
功能特点
- Next.js 应用路由
- React 服务器组件(RSC)、Suspense 和服务器操作
- 用于流式聊天 UI 的 Vercel AI SDK
- 支持默认的 OpenAI、Anthropic、Cohere、Hugging Face 或自定义 AI 聊天模型和/或 LangChain
- shadcn/ui
- 使用 Tailwind CSS 进行样式设计
- 使用 Radix UI 的无头组件原语
- 来自 Phosphor Icons 的图标
- 使用 Vercel KV 进行聊天历史记录、速率限制和会话存储
- 用于身份验证的 NextAuth.js
模型提供者
此模板默认附带 OpenAI 的 gpt-3.5-turbo
。然而,感谢 Vercel AI SDK,你可以只需几行代码就能切换到 Anthropic、 Cohere、Hugging Face 或使用 LangChain。
部署你自己的
你可以点击一下将自己的 Next.js AI 聊天机器人版本部署到 Vercel:
创建一个 KV 数据库实例
按照 Vercel 提供的快速入门指南中所述的步骤操作。该指南将帮助你在 Vercel 上创建和配置你的 KV 数据库实例,从而使你的应用能够与其互动。
记得在 .env
文件中更新 KV 数据库设置期间提供的适当凭证,包括 KV_URL
、KV_REST_API_URL
、KV_REST_API_TOKEN
以及 KV_REST_API_READ_ONLY_TOKEN
。
本地运行
你需要使用 .env.example 中定义的环境变量来运行 Next.js AI 聊天机器人。建议你使用 Vercel 环境变量 来进行此操作,但 .env
文件也是必需的。
注意:你不应该提交你的
.env
文件,否则会泄露秘密,使他人能够控制你各种 OpenAI 和身份验证提供者帐户的访问。
- 安装 Vercel CLI:
npm i -g vercel
- 将本地实例与 Vercel 和 GitHub 账户关联(创建
.vercel
目录):vercel link
- 下载你的环境变量:
vercel env pull
pnpm install
pnpm dev
你的应用模板现在应该在 localhost:3000 上运行。