让网站变聪明：接入 AI 对话能力
你的作品集网站已经很完整了。现在加上最有意思的一块——让访客可以直接问 AI 关于你的问题。
比如："你做过哪些设计项目？"、"你擅长什么技术？"——AI 会根据你的作品和简介来回答。
这个功能的价值
普通的作品集网站，访客只能被动浏览。加上 AI 助手之后：
- 访客可以用自然语言提问，不需要翻遍整个网站
- AI 能根据你的背景给出个性化的回答
- 24小时在线，你不在的时候也能"接待"访客
- 相比其他作品集，这个细节会让你显得更懂技术
这是一个低成本、高差异化的功能。
理解系统提示词（System Prompt）
AI 对话的核心是系统提示词——你告诉 AI 它是谁、它的任务是什么、它应该怎么回答。
一个好的系统提示词包含：
你是[你的名字]的个人 AI 助手。 你的任务是帮助访客了解[你的名字]的技能、经历和作品。 关于[你的名字]： - 职业：[你的职业] - 技能：[你的技能列表] - 作品：[你的作品列表] 回答规则： - 只回答关于[你的名字]的问题 - 不知道的问题就说"这个我不太清楚，你可以直接联系[你的名字]" - 回答简洁友好，不超过 200 字 - 不要编造信息
系统提示词的质量直接决定 AI 助手的质量。写得越详细，AI 回答越准确。
理解 Vercel AI SDK
这一关会用到 Vercel AI SDK（ai 包）。它是专门为 Next.js 设计的 AI 工具库，主要解决两个问题：
流式响应：普通 API 调用要等 AI 生成完才返回，用户体验差。AI SDK 封装了流式响应的复杂逻辑，让你用几行代码就能实现打字机效果。
状态管理：对话有历史记录，需要管理消息列表、加载状态、错误状态。AI SDK 的 useChat hook 帮你处理了这些。
// 没有 AI SDK，你需要自己处理： // - ReadableStream 读取 // - 逐块解析 SSE 格式 // - 更新 UI 状态 // - 错误处理 // - 重试逻辑 // 有了 AI SDK： const { messages, input, handleSubmit } = useChat() // 就这一行，搞定所有状态管理
第一步：配置 AI API
这里用 OpenAI 的 API，也可以换成其他兼容的服务（比如 DeepSeek，价格更便宜）。
对 AI 说：
帮我给网站接入 AI 对话能力： 1. 安装 ai 和 @ai-sdk/openai：npm install ai @ai-sdk/openai 2. 在 .env.local 里添加 OPENAI_API_KEY=（你的 API Key） 3. 创建 app/api/chat/route.ts，实现流式对话接口： - 接收用户消息 - 加上系统提示词（介绍你是谁、你的技能、你的作品） - 调用 OpenAI API，流式返回回复 - 使用 Vercel AI SDK 的 streamText 函数
获取 API Key：访问 platform.openai.com，注册账号，在 API Keys 页面创建新的 Key。如果想用 DeepSeek，访问 platform.deepseek.com，价格约为 OpenAI 的 1/10，且 API 格式兼容。
✅ 马上验证： 用 curl 或 Postman 测试
/api/chat接口，发送一条消息，确认能收到流式响应。
第二步：做 AI 对话组件
对 AI 说：
在网站右下角加一个 AI 对话悬浮按钮： 1. 右下角有一个圆形按钮，图标是对话气泡，有轻微的脉冲动画吸引注意 2. 点击后弹出对话窗口（宽 360px，高 480px） 3. 对话窗口有： - 顶部标题"问问 AI 助手"和关闭按钮 - 中间的消息列表（用户消息靠右蓝色气泡，AI 消息靠左灰色气泡） - 底部输入框和发送按钮 - 初始状态显示欢迎语和 3 个快捷问题按钮 4. AI 回复时有打字机效果（流式显示） 5. 使用 Vercel AI SDK 的 useChat hook 来管理对话状态 6. 支持按 Enter 发送，Shift+Enter 换行
✅ 马上验证： 打开网站，点击右下角按钮，发送一条消息，确认能看到 AI 的流式回复。
第三步：优化系统提示词
这是让 AI 助手真正有用的关键步骤。
对 AI 说：
帮我优化 AI 助手的系统提示词，让它能更好地介绍我： 系统提示词应该包含： 1. 你的角色定位（比如：你是[你的名字]的 AI 助手，负责回答访客关于[你的名字]的问题） 2. 你的基本信息（技能、经历、擅长领域） 3. 你的作品列表（从数据库获取，动态插入提示词） 4. 回答风格（简洁、友好、专业，不超过 150 字） 5. 边界（不知道的问题就说不知道，不要编造） 把作品数据动态插入提示词：在 /api/chat 接口里先查询数据库获取作品列表，然后拼接到系统提示词里。 示例提示词结构： 你是[名字]的个人 AI 助手。 [名字]的背景： - 职业：[职业] - 技能：[技能] - 联系方式：[邮箱] [名字]的作品： [从数据库动态获取的作品列表] 回答规则： - 只回答关于[名字]的问题 - 不知道就说不知道，不要编造 - 回答简洁，不超过 150 字
第四步：添加快捷问题
让访客知道可以问什么，降低使用门槛：
在 AI 对话窗口的初始状态（没有消息时）显示 3-4 个快捷问题按钮： - "你做过哪些项目？" - "你擅长什么技术？" - "怎么联系你？" - "你有哪些工作经历？" 点击快捷问题按钮，自动填入输入框并发送。
让 AI 助手更聪明的技巧
提供具体信息：系统提示词里的信息越具体，AI 回答越准确。不要只写"我是一个前端开发者"，要写"我有 3 年 React 开发经验，做过电商、SaaS、内容平台等类型的项目"。
设置回答边界：明确告诉 AI 什么问题不回答，避免 AI 乱说。比如"不要回答关于薪资期望的问题"。
动态注入数据：把数据库里的作品数据动态插入提示词，这样你在后台更新作品，AI 的回答也会自动更新。
测试边界情况：试着问一些奇怪的问题，看 AI 怎么处理。如果回答不对，调整提示词。
通关条件
完成以下三步即可通关：
- 右下角有 AI 对话按钮，点击可以打开对话窗口
- 输入问题后，AI 有流式回复（打字机效果）
- AI 能正确介绍你的作品（回答"你做过哪些项目？"）
卡住了？
API Key 不对？ 确认 Key 没有过期，账号有余额。OpenAI 新账号有 $5 免费额度，DeepSeek 新账号有 10 元免费额度。
流式回复不工作？ 让 AI 检查 route.ts 里是否正确使用了 streamText 和 toDataStreamResponse()。
AI 回答不准确？ 优化系统提示词，提供更详细的背景信息。可以把你的简历内容直接粘贴进去。
对话窗口样式不好看？ 告诉 AI 你想要的风格，比如"更现代"、"更简洁"、"和网站整体风格一致"。
通关条件
完成以下三步即可通关：
- 右下角有 AI 对话按钮，点击可以打开对话窗口
- 输入问题后，AI 有流式回复（打字机效果）
- AI 能正确介绍你的作品（回答"你做过哪些项目？"）
卡住了？
API Key 不对？ 确认 Key 没有过期，账号有余额。OpenAI 新账号有 $5 免费额度，DeepSeek 新账号有 10 元免费额度。
流式回复不工作？ 让 AI 检查 route.ts 里是否正确使用了 streamText 和 toDataStreamResponse()。
AI 回答不准确？ 优化系统提示词，提供更详细的背景信息。可以把你的简历内容直接粘贴进去。
对话窗口样式不好看？ 告诉 AI 你想要的风格，比如"更现代"、"更简洁"、"和网站整体风格一致"。