手把手做一个AI聊天机器人，你的专属智能助手
你有没有想过拥有一个自己的AI助手？不是ChatGPT那种通用的，而是专门为你定制的——比如一个懂你公司产品的客服机器人，一个能回答你专业领域问题的知识助手，或者一个有独特性格的聊天伙伴。
今天我们从零做一个AI聊天机器人网页。完成之后你会有一个可以部署上线的、能真正对话的AI助手。
最终效果
做完之后你会得到：
原理很简单
别被"AI聊天机器人"这个名字吓到。原理其实就是：
就这么回事。我们要做的就是搭一个好看的网页，再连上AI的接口。
准备工作
1. 拿一个AI的API Key
你需要一个API Key才能调用AI的能力。推荐用阿里云的DashScope，注册就送免费额度：
记下这个Key，后面要用。
2. 装好Claude Code
确保你的电脑装好了Claude Code和Node.js。
验证一下：
node --version # 应该显示v18或更高
claude # 应该进入Claude Code
开始做！
第一步：创建项目
mkdir my-ai-chatbot
cd my-ai-chatbot
claude
第二步：告诉AI你要什么
跟Claude Code说：
帮我做一个AI聊天机器人网页项目，技术栈用Node.js + Express后端 + 原生HTML/CSS/JS前端。要求：
后端（server.js）：
Express服务器，端口3000
一个POST /api/chat接口，接收messages数组，调用DashScope的qwen-plus模型
DashScope API地址：https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions
API Key从环境变量DASHSCOPE_API_KEY读取
支持流式输出（SSE）
系统提示词可以通过POST /api/system-prompt接口修改 前端（public/index.html）：
聊天界面，左边是AI消息气泡，右边是用户消息气泡
底部是输入框和发送按钮
支持Enter键发送，Shift+Enter换行
AI回复时显示打字效果（流式渲染）
顶部有个设置按钮，点击弹出侧边栏，可以修改AI的系统提示词
界面风格：现代简洁，类似ChatGPT，深色/浅色主题切换 项目结构：
my-ai-chatbot/
├── server.js
├── package.json
├── .env.example
└── public/
└── index.html
请生成完整代码。
Claude Code会帮你生成所有文件。
第三步：安装依赖并运行
# 安装依赖
npm install设置API Key（把xxx换成你的真实Key）
export DASHSCOPE_API_KEY=sk-xxxxxxxxxxxxx启动服务
node server.js
然后打开浏览器访问 http://localhost:3000，你的AI聊天机器人就跑起来了！
试试发一句"你好"，看看AI是不是回复你了。
第四步：自定义AI人设
这是最好玩的部分。点右上角的设置按钮，在"系统提示词"里写上你想要的AI人设。
例1：温柔学姐
你是一个温柔的学姐，叫小雨。你说话温柔体贴，喜欢用"嗯嗯"、"呢"、"呀"等语气词。你知识渊博但不卖弄，总是耐心解答问题。当对方情绪低落时，你会温柔地安慰和鼓励。
例2：毒舌程序员
你是一个有10年经验的程序员，说话直接，有点毒舌但心地善良。会用程序员的梗和比喻来解释问题。看到烂代码会吐槽，但会给出更好的方案。偶尔冒出一句英文。
例3：公司客服
你是"花间集"花店的AI客服。你了解以下信息：
我们是一家杭州的鲜花店，主营鲜花零售和订阅服务
每周送花上门服务：99元/月（每周一束）
单次购买：玫瑰99元/束，百合79元/束，混搭花束129元起
营业时间：每天9:00-21:00
地址：杭州市西湖区xx路88号
客服电话：138xxxx8888 请礼貌、热情地回答客户的问题。如果遇到不确定的问题，引导客户拨打客服电话。
第五步：美化界面
基本功能跑通了，来让它更好看：
加头像和昵称：
给AI的消息气泡左边加一个AI头像（用一个机器人emoji），用户消息气泡右边加一个用户头像。每条消息显示发送时间。
加历史记录：
把聊天记录存到浏览器的localStorage里，刷新页面不丢失。加一个"新对话"按钮，点击清空当前对话开始新的。侧边栏显示历史对话列表，可以点击切换。
加Markdown渲染：
AI的回复支持Markdown渲染，代码块要有语法高亮。引入marked和highlight.js库。
第六步：加点高级功能
预设角色切换：
在侧边栏加一个"角色预设"区域，提供4-5个预设角色（学习助手、代码导师、心理咨询师、创意写手、翻译官），点击直接切换系统提示词
消息操作：
每条消息hover时显示操作按钮：复制内容、重新生成、删除这条消息
快捷指令：
输入框支持/开头的快捷指令：
/clear 清空对话
/export 导出聊天记录为txt文件
/role 角色名 快速切换角色
部署上线
做好了想让别人也能用？
方案1：Vercel部署（推荐）
因为我们有后端（Express），需要用Vercel的Serverless Functions：
跟Claude Code说：
帮我把这个项目改造成可以部署到Vercel的结构，后端API改成Vercel的serverless function
然后按之前的Vercel部署教程操作就行。
注意：在Vercel的环境变量里设置 DASHSCOPE_API_KEY，不要把Key写在代码里！
方案2：自己的服务器
如果你有云服务器（几十块一个月就行）：
# 在服务器上
git clone 你的仓库地址
cd my-ai-chatbot
npm install
export DASHSCOPE_API_KEY=sk-xxx
用pm2保持后台运行
npm install -g pm2
pm2 start server.js --name chatbot
安全注意事项
1. API Key不要暴露
绝对不要把API Key写在前端代码里。一定要放在后端，通过后端转发请求。我们的架构已经是这样做的了。
2. 加个速率限制
防止有人恶意刷你的API额度：
帮我在server.js里加一个速率限制中间件，每个IP每分钟最多30次请求
3. 内容过滤
如果你要对外提供服务：
在调用AI之前加一个简单的内容过滤，如果用户输入包含敏感词就返回"请文明交流"
更多玩法
做完基础版之后，你可以继续扩展：
这些功能都可以继续用Claude Code来做，方法一样：描述你要什么，让AI帮你写。
总结
今天你从零做了一个AI聊天机器人，回顾一下：
整个过程你写的代码量：零行。
但你确实拥有了一个自己的AI助手，而且你完全理解它是怎么工作的。想改哪里改哪里，想加功能加功能。
这就是AI时代做开发的方式——你想，AI做。