前端 AI Agent 面试电子书
这是一份面向前端开发者的 AI Agent 学习路线。它使用 DeepSeek Harness 作为真实案例,但每章都先讲概念,再讲实现,不需要先读懂仓库源码。
学习目标
读完这份电子书后,你应该能:
- 解释 LLM、Agent、Harness、Function Calling、RAG、MCP 这些词分别是什么。
- 描述一个 Agent 的最小组成:模型、循环、工具、记忆、权限和界面。
- 用 TypeScript 或 React 写出简化版的流式对话、工具调用和 Agent Loop。
- 在面试中讲清前端为什么难处理流式输出、工具中间状态和权限交互。
- 把 DeepSeek Harness 的真实设计翻译成自己的项目叙事。
章节
| 章节 | 标题 | 核心主题 | 面试重点 |
|---|---|---|---|
| 01 | 什么是 Agent | Agent 概念与组成 | Agent 和普通 API 调用的区别 |
| 02 | LLM 调用与流式输出 | token、SSE、chunk | 流式输出如何做 |
| 03 | ReAct Agent Loop | 模型、思考、工具、观察 | 为什么 Agent 会循环 |
| 04 | Function Calling 与工具 | tool schema、执行管线 | 工具调用如何回传 |
| 05 | DeepSeek Harness 架构 | 插件、profile、服务 | 平台为什么需要插件化 |
| 06 | Session Log 与派生上下文 | 事件日志、deriveMessages | 会话如何恢复和回放 |
| 07 | 插件组合与 Cordis | Context、effect、事件 | 插件系统怎么设计 |
| 08 | 前端流式 UI | 增量渲染、断线重连 | 高频 token 如何不卡 |
| 09 | React-free 对象层与快照 | useSyncExternalStore | 业务状态如何与 React 解耦 |
| 10 | RAG 与知识检索 | embedding、向量检索 | RAG 和工具调用怎么选 |
| 11 | MCP 与工具互操作 | MCP、工具注册 | MCP 和 Function Calling 的区别 |
| 12 | 安全、权限与沙箱 | prompt injection、sandbox | 危险工具如何防护 |
| 13 | 持久化、回放与可观测性 | JSONL/SQLite、projection | 日志、审计、回放 |
| 14 | 最小 Agent 与面试叙事 | 自建 Harness | 项目怎么讲 |
Archify 交互图解
先从 Archify 图解导读 选择合适图型和阅读路径。8 张图均为独立页面,同一知识点在不同章节复用同一张主图:
- Agent、Harness 与插件服务全景
- 一次 Agent Turn 完整调用链
- 工具执行、权限与批准流程
- Session Log、Surface 与多种投影
- Agent 流式 UI 生命周期
- React-free 前端流式运行时
- 生产级 RAG 数据链路
- MCP 与内部工具归一化架构
建议学习路线
第一阶段:建立直觉
按顺序读第 1 到 4 章,重点理解 Agent 不是简单模型调用,而是一个带工具和记忆的循环系统。
第二阶段:用项目理解架构
读第 5 到 7 章,对照 DeepSeek Harness 的插件化设计理解 Context、Session Log、Agent Loop 和 Tool Registry。
第三阶段:突破前端流式 UI
读第 8 到 9 章,练习用 React 和 useSyncExternalStore 处理流式状态、工具状态和取消恢复。
第四阶段:扩展到面试常见方向
读第 10 到 13 章,把 RAG、MCP、安全和可观测性补进自己的技术地图。
第五阶段:形成项目叙事
读第 14 章,完成一个最小 Agent Harness,并准备 3 到 5 个月后的面试表达。
阅读建议
每一章先看“大白话理解”和“代码示例”,再看“DeepSeek Harness 对应实现”。源码引用不是必读,而是用来验证概念是否有真实实现。
每章末尾的自测题可以当作面试题。回答时尽量按“是什么、为什么需要、怎么实现、前端承担什么、有哪些风险”的结构展开。
项目案例
本电子书使用仓库中的真实案例:
- 架构说明:docs/architecture.md
- 插件框架:docs/cordis-primer.md
- 开发指南:docs/development.md
- 测试策略:docs/testing.md
- Web 客户端设计:
.agents/notes/implemented/architecture/2026-07-19-gui-web-client-architecture.md
这些是进一步阅读入口,不是学习前提。