AI Chat 数字分身
个人主页内嵌的 AI 聊天组件。通过精心设计的 System Prompt 构建石头的人设，支持 SSE 流式输出、对话上下文记忆，让访客体验到和「真人」聊天而非机器人问答的感觉。
为什么做这个项目
主页如果只是展示作品和技能，太像一个静态名片了。想加一个互动入口让访客能真正「对话」。不是冷冰冰的「我是 AI 助手」，而是模拟石头本人的说话风格、知识背景、甚至语气习惯。Prompt Engineering 能力直接决定了聊天体验，想深入实践一下。
技术实现
核心是 Next.js 的 API Route（/api/chat）+ 前端 SSE 处理。用户发消息 → POST 到 /api/chat → 拼接 System Prompt + 历史消息 → 转发 DeepSeek API（stream=true）→ 后端把 SSE 流原样透传给前端 → 前端逐字渲染打字机效果。消息状态用 React useState 管理，自动滚动到底部。交互细节花了功夫：loading 状态的渐变动画引用了外部 loader 设计（Uiverse.io），发送按钮在输入为空时灰色不可点。
核心功能
- ●SSE 流式输出 + 打字机逐字渲染
- ●精心调教的 System Prompt（22岁 AI Agent 工程师人设）
- ●对话上下文记忆（全历史跟随）
- ●浮动球形态：右下角悬浮球，点击展开面板
- ●优雅的三种状态：欢迎语 / 加载中动画 / 对话中
- ●移动端适配：底部全屏弹窗式
踩过的坑 & 收获
流式输出的边界 case 比想象的多。网络中断时要清掉半截消息、DeepSeek API 偶尔返回非 JSON 格式要容错、用户连发多条消息要正确处理并发。另外人设 prompt 调了很多版——太正式像客服、太随意像话痨、英文太多不像中文母语者。最后定下来的是「话少、有观点、偶尔开小差」的松弛风格。
技术栈
Next.js API Route + DeepSeek API（deepseek-chat）+ SSE（Server-Sent Events）+ React useState + Framer Motion + Tailwind CSS + Prompt Engineering