可定制的AI聊天机器人模板 AI Chatbot Template

AI Chatbot Template 是一个高度可定制的AI聊天机器人，通过Next.js、Vercel AI SDK和Google Gemini提供实时流式AI响应，利用Arcjet实现强大的速率限制和机器人防护，支持灵活配置聊天机器人基本信息、AI模型与系统提示词（支持交互式选择和链接按钮语法）、UI样式，提供移动响应式设计、TypeScript支持、错误处理能力，为大家提供一个安全和易于部署的AI聊天机器人解决方案。

AI Chatbot Template 安装和使用

1、克隆代码并安装依赖

打开终端，执行以下命令：

# 克隆仓库到本地
git clone https://github.com/rryyqn/ai-chatbot.git
# 进入项目文件夹（注意：原文档中文件夹名为ai-chatbot-template，需与克隆命令对应）
cd ai-chatbot
# 用pnpm安装依赖（确保已安装pnpm，若未安装可先执行npm install -g pnpm）
pnpm install

2、配置环境变量

在项目根目录创建.env.local文件，填入以下3个关键变量：

# 从Arcjet控制台获取（用于限流和反机器人）
ARCJET_KEY=
# 从Google AI Studio获取（用于调用Google Gemini模型）
GOOGLE_GENERATIVE_AI_API_KEY=
# 本地开发用localhost，线上部署时填实际域名（如https://ai-chatbot.vercel.app）
NEXT_PUBLIC_APP_URL=localhost

3、启动开发服务器

执行命令启动本地服务：

pnpm dev

服务启动后，打开浏览器访问http://localhost:3000，就能看到聊天机器人界面了。

自定义配置

模板支持灵活调整，核心配置在lib/config.ts文件中，主要分为4类可修改项：

1、基础信息配置

• name：聊天机器人名称（如示例中的“Gizmo AI Assistant”）

• welcomeMessage：初始欢迎语（支持“选择按钮”和“链接按钮”语法，可引导用户交互）

• ui.windowTitle：聊天窗口标题文字

• ui.inputPlaceholder：消息输入框的提示文字（如“Message Gizmo AI Assistant..”）

• ui.avatarImage：AI的头像图片（需放在public文件夹中）

• ui.avatarFallback：头像加载失败时的备用占位符

2、限流配置

控制用户请求频率，避免接口被过度调用：

• rateLimit.capacity：单次突发请求的最大允许次数

• rateLimit.refillRate：每个时间间隔内恢复的请求次数（“令牌”数量）

• rateLimit.interval：请求次数恢复的时间间隔（单位：秒）

3、AI模型与提示词配置

• api.model：指定使用的Google Gemini模型（可根据需求切换不同版本）

• api.systemPrompt：AI的系统提示词（定义AI的角色和回复规则，同样支持“选择/链接”语法）

4、安全配置

• enableBotDetection：是否开启反机器人检测（阻挡自动化工具调用）

• enableShield：是否开启安全防护（抵御常见网络攻击）

• allowedBots：指定允许的机器人类别（如搜索引擎爬虫）

“选择/链接”语法

模板支持一种特殊语法，能在AI回复底部生成交互式按钮，提升用户体验。只需在welcomeMessage或systemPrompt中加入以下格式：

• 选择按钮：{{choice:按钮名称}}（如{{choice:查看派对预订}}，用户点击后会将“查看派对预订”作为消息发送）

• 链接按钮：{{link:链接地址|按钮文字}}（如{{link:https://area51word.com|访问官网}}，用户点击后跳转至指定链接）

示例效果可参考模板中的“Area 51 Gizmo AI Assistant”——它会生成“选择场馆”“查看餐饮信息”等按钮，引导用户快速操作。

自定义UI样式

模板使用Tailwind CSS进行样式管理，修改外观可关注以下文件：

• app/globals.css：全局样式和主题配置（如颜色、字体、间距）

• components/ui/：可复用UI组件（如输入框、按钮、头像）的样式

• components/Chatbot.tsx：聊天机器人核心界面（如对话气泡、消息列表）的样式

AI Chatbot Template 部署

推荐平台：Vercel（与Next.js兼容性最佳）

1、将代码推送到GitHub仓库（确保仓库已公开或设置为私有但授权Vercel访问）

2、登录Vercel，点击“New Project”，选择关联刚才的GitHub仓库

3、在Vercel项目设置中，添加.env.local中的3个环境变量（注意线上环境的NEXT_PUBLIC_APP_URL要填Vercel分配的域名）

4、点击“Deploy”，等待部署完成即可访问

其他支持平台

除了Vercel，项目还能部署到以下支持Next.js的平台： • Netlify • Railway • Render • DigitalOcean App Platform

AI Chatbot Template 使用常见问题

1、谷歌AI/Arcjet认证错误

• 检查ARCJET_KEY和GOOGLE_GENERATIVE_AI_API_KEY是否正确，是否过期

• 确认环境变量在部署平台（如Vercel）中已正确设置，无拼写错误

2、403禁止访问错误

• 将.env文件中的NEXT_PUBLIC_APP_URL修改为线上部署的实际域名（如ai-chatbot.vercel.app），不要带http://或https://