13 做一个 Mini ChatGPT 产品
- 理解聊天产品不是一个输入框加 API。
- 知道流式输出、取消、重试和错误状态怎么影响体验。
- 把 RAG、Agent 和前端 UI 串起来。
一个可用的 AI 产品通常包含：
- 消息状态管理。
- 流式输出。
- 请求取消和重试。
- 工具调用过程展示。
- 成本、延迟和错误提示。
- RAG/Agent 的可观测性。
User Message↓Retrieve optional context↓Agent decides tool calls↓LLM streams answer↓UI appends chunks↓persist trace and result参考项目里的对应实现思路
Section titled “参考项目里的对应实现思路”原始计划中的 nanoGPT + FastAPI + Gradio 是完整链路雏形：训练模型、推理服务、Web 界面、Agent、RAG。对前端研发来说，可以先用 JS 模拟服务和流式输出，等理解链路后再接真实模型。
最小代码实验
Section titled “最小代码实验”源码：labs/13-front-end-product/index.mjs
这个实验用 async generator 模拟模型流式输出。
运行命令与预期输出
Section titled “运行命令与预期输出”运行：
npm run lab:13预期你会看到内容分块输出，浏览器里可以映射到 ReadableStream、SSE 或 fetch streaming。
- 不显示中间状态，用户会以为系统卡住。
- 不能取消长请求，会浪费成本并造成状态错乱。
- 只看最终答案，不记录检索和工具 trace，很难调试。