vibe-coding-cn/i18n/zh/documents/实战案例/03-chatbot.md

🤖 实战案例：1 小时做一个 AI 聊天机器人

难度：⭐⭐ 初级 | 技术栈：Python/FastAPI | 耗时：1 小时

---

最终效果

一个简单的 AI 聊天机器人，支持：

• ✅ Web 界面对话
• ✅ 接入 OpenAI/Claude API
• ✅ 流式输出（打字机效果）
• ✅ 对话历史记录

---

前置条件

• Python 3.8+
• OpenAI API Key（或其他 LLM API）

---

第 1 步：启动对话

复制以下提示词：

你是一个 Python 后端开发助手。我想用 Vibe Coding 的方式做一个 AI 聊天机器人。

项目要求：
- 后端：FastAPI
- 前端：简单 HTML 页面（内嵌在 FastAPI 中）
- 功能：用户输入问题，调用 OpenAI API 返回回答
- 支持流式输出（SSE）
- 界面简洁，类似 ChatGPT

请给我：
1. 项目结构
2. requirements.txt
3. 完整代码
4. 运行命令

我的 OpenAI API Key 会通过环境变量 OPENAI_API_KEY 传入。

---

第 2 步：创建项目

AI 会给你类似这样的结构：

chatbot/
├── main.py          # FastAPI 主程序
├── requirements.txt # 依赖
└── .env            # API Key（自己创建）

requirements.txt：

fastapi
uvicorn
openai
python-dotenv
sse-starlette

---

第 3 步：运行

# 安装依赖
pip install -r requirements.txt

# 设置 API Key
export OPENAI_API_KEY="sk-xxx"

# 启动服务
uvicorn main:app --reload

打开 http://localhost:8000 即可使用。

---

第 4 步：迭代优化

请帮我添加：
1. 对话历史保存到文件
2. 支持切换不同模型（GPT-4/GPT-3.5）
3. 添加系统提示词设置
4. 支持 Markdown 渲染

---

踩坑记录

问题	解决方案
API Key 无效	检查环境变量是否正确设置
跨域错误	FastAPI 添加 CORS 中间件
流式输出不工作	检查 SSE 配置，前端用 EventSource
中文乱码	确保 response 设置 charset=utf-8

---

进阶挑战

1. 添加 RAG - 让机器人能读取本地文档
2. 多轮对话 - 保持上下文记忆
3. 部署上线 - 部署到 Vercel/Railway
4. 接入微信 - 做成微信机器人

---

学到了什么

• ✅ FastAPI 基础用法
• ✅ OpenAI API 调用
• ✅ SSE 流式输出
• ✅ 前后端一体化开发

---

← Todo App | 下一个案例：全栈 SaaS →