前端 AI Agent 进阶电子书
这是基础版 14 章之后的进阶内容。它不再停留在“Agent 是什么”,而是围绕一个可落地的 AI 编码助手 / 客服 Agent,讲清生产系统需要面对的状态、失败、工具、会话、安全和可观测性。
学习目标
完成本阶段后,你应该能:
- 描述一个 AI Agent 产品从 demo 到生产需要补上哪些能力。
- 沿着真实请求链讲清模型、工具、会话日志和前端如何协作。
- 设计流式 UI 的状态机,处理取消、重试、断线重连和工具中间状态。
- 解释 RAG、MCP、权限、沙箱、回放和监控分别落在什么位置。
- 用一个完整项目把核心模块串起来,形成有说服力的面试叙事。
项目主线
本阶段统一围绕一个项目展开:
一个 AI 编码助手 / 客服 Agent。
它需要:
- 接收用户任务。
- 调用模型生成回答。
- 调用文件、命令、搜索或知识库工具。
- 展示流式文本和工具状态。
- 处理用户批准、拒绝和取消。
- 保存、恢复、审计和监控会话。
章节
| 章节 | 标题 | 核心主题 |
|---|---|---|
| 01 | 生产级心智模型 | run、消息、工具、turn、session 的状态机 |
| 02 | 请求管线 | agent 事件、LLM 流、工具管线 |
| 03 | 会话日志与压缩 | surface、deriveMessages、长上下文 |
| 04 | 工具系统 | schema、执行策略、结果回传 |
| 05 | LLM Provider Seam | adapter、prepared call、结构化输出 |
| 06 | 前端流式运行时 | React-free 对象层、快照、重连 |
| 07 | 工具 UI 与批准 | tool view、allow/deny/ask |
| 08 | 生产级 RAG | 知识摄取、来源展示、检索状态 |
| 09 | MCP 与工具互操作 | MCP、插件工具、统一 UI |
| 10 | 可观测性与遥测 | 持久化、投影、trace、审计 |
| 11 | 安全与沙箱 | prompt injection、SSRF、human-in-the-loop |
| 12 | 结项 Agent 项目 | 完整项目与面试叙事 |
Archify 交互图解
进阶篇优先配合 Archify 图解导读 阅读。请求管线、工具审批、日志投影、流式运行时、RAG 与 MCP 均链接到跨章节复用的独立交互图,不重复维护多份拓扑。
建议学习顺序
- 先读第 1 章,把项目状态模型建立起来。
- 再读第 2 到 5 章,理解 Agent 核心运行时。
- 接着读第 6 到 7 章,重点突破前端流式 UI 和工具展示。
- 然后读第 8 到 11 章,补 RAG、MCP、可观测性和安全。
- 最后读第 12 章,完成结项项目并准备面试表达。
每章都有实践任务。不要只读,至少完成每章的核心代码练习。
如何阅读源码
本阶段仍以概念和业务映射为主。源码引用用于验证设计真实存在,不是必须逐行阅读。
常用真实入口:
docs/architecture.mdpackages/core/agent-loop/src/agent.tspackages/core/tools/src/index.tspackages/core/session/src/index.tspackages/client/runtime/src/client/sessions/
最终验收
完成第 12 章后,你应该能回答:
- 这个 Agent 项目为什么要分层?
- 一次用户输入如何变成模型请求、工具执行和最终回答?
- 流式 UI 如何处理高频 token、取消和重连?
- 为什么模型可见内容必须可重建?
- 如何证明这个系统安全、可观测、可恢复?