Skip to content
签到签到

前端 AI Agent 面试电子书

这是一份面向前端开发者的 AI Agent 学习路线。它使用 DeepSeek Harness 作为真实案例,但每章都先讲概念,再讲实现,不需要先读懂仓库源码。

学习目标

读完这份电子书后,你应该能:

  • 解释 LLM、Agent、Harness、Function Calling、RAG、MCP 这些词分别是什么。
  • 描述一个 Agent 的最小组成:模型、循环、工具、记忆、权限和界面。
  • 用 TypeScript 或 React 写出简化版的流式对话、工具调用和 Agent Loop。
  • 在面试中讲清前端为什么难处理流式输出、工具中间状态和权限交互。
  • 把 DeepSeek Harness 的真实设计翻译成自己的项目叙事。

章节

章节标题核心主题面试重点
01什么是 AgentAgent 概念与组成Agent 和普通 API 调用的区别
02LLM 调用与流式输出token、SSE、chunk流式输出如何做
03ReAct Agent Loop模型、思考、工具、观察为什么 Agent 会循环
04Function Calling 与工具tool schema、执行管线工具调用如何回传
05DeepSeek Harness 架构插件、profile、服务平台为什么需要插件化
06Session Log 与派生上下文事件日志、deriveMessages会话如何恢复和回放
07插件组合与 CordisContext、effect、事件插件系统怎么设计
08前端流式 UI增量渲染、断线重连高频 token 如何不卡
09React-free 对象层与快照useSyncExternalStore业务状态如何与 React 解耦
10RAG 与知识检索embedding、向量检索RAG 和工具调用怎么选
11MCP 与工具互操作MCP、工具注册MCP 和 Function Calling 的区别
12安全、权限与沙箱prompt injection、sandbox危险工具如何防护
13持久化、回放与可观测性JSONL/SQLite、projection日志、审计、回放
14最小 Agent 与面试叙事自建 Harness项目怎么讲

Archify 交互图解

先从 Archify 图解导读 选择合适图型和阅读路径。8 张图均为独立页面,同一知识点在不同章节复用同一张主图:

建议学习路线

第一阶段:建立直觉

按顺序读第 1 到 4 章,重点理解 Agent 不是简单模型调用,而是一个带工具和记忆的循环系统。

第二阶段:用项目理解架构

读第 5 到 7 章,对照 DeepSeek Harness 的插件化设计理解 ContextSession LogAgent LoopTool Registry

第三阶段:突破前端流式 UI

读第 8 到 9 章,练习用 React 和 useSyncExternalStore 处理流式状态、工具状态和取消恢复。

第四阶段:扩展到面试常见方向

读第 10 到 13 章,把 RAG、MCP、安全和可观测性补进自己的技术地图。

第五阶段:形成项目叙事

读第 14 章,完成一个最小 Agent Harness,并准备 3 到 5 个月后的面试表达。

阅读建议

每一章先看“大白话理解”和“代码示例”,再看“DeepSeek Harness 对应实现”。源码引用不是必读,而是用来验证概念是否有真实实现。

每章末尾的自测题可以当作面试题。回答时尽量按“是什么、为什么需要、怎么实现、前端承担什么、有哪些风险”的结构展开。

项目案例

本电子书使用仓库中的真实案例:

这些是进一步阅读入口,不是学习前提。