当模型负责思考，Agent 负责把思考变成行动。
2025 年被称为"Agent 元年"。模型的能力还在涨，但大家真正关心的，已经变成了：怎么让模型动起来，替人把事办完。2026 年则是 Agentic AI 规模化落地的关键年份：Gartner 预测 79% 的组织已启动相关部署，行业焦点从"模型能力"转向 Harness 工程（Agent 运行时 / 工具 / 记忆 / 编排）与协议生态（MCP / A2A 收敛，MCP Server 数量爆发）。
对前端开发者来说，这件事不是"别人家的技术"------流式输出、多智能体协作、工具调用可视化、低代码工作流画布，每一个都是前端的新战场。
这篇文章用五个开源项目，串起一条"前端速通 Agent"的学习路径。不背概念，看架构，能跑起来就动手。
01 先搞懂：Agent 不是 ChatBot
普通对话模型只会"回答"你；Agent 能查资料、写代码、操作文件、调用 API、拆解任务，直到把事办完。
Agent = LLM + 规划 + 记忆 + 工具 + 行动
LLM 是大脑，Agent 是"大脑 + 手脚 + 记忆 + 工具"的完整系统，外面套一个循环：观察 → 思考 → 行动 → 再观察，直到任务完成。
几乎所有 Agent 系统都是同一个骨架，只是工程化程度不同：
LLM 在中间做决策，四周挂着规划、记忆、工具与行动。
02 看懂它的"心脏"：ReAct 与工具调用
ReAct（Reason + Act）是最核心的范式：模型每步先"思考"再"行动"，拿到工具结果后继续推理。DeerFlow 的 Lead Agent、Claude Code，本质都是这个循环。
这里有一个关键认知：模型并不真正执行函数。它只输出"调哪个函数、参数是什么"，真正的执行发生在你的程序里：
json
// 模型回的结构化调用（assistant 带 tool_calls）
{
"role": "assistant",
"tool_calls": [{
"id": "call_abc",
"function": {
"name": "get_weather",
"arguments": "{\"city\":\"北京\"}"
}
}]
}
// 你的程序真正执行后，以 tool 角色回填
{"role": "tool", "tool_call_id": "call_abc", "content": "晴，26°C"}所以参数校验、权限确认、错误兜底，都得由你的程序负责------这也是后面几个项目里"安全机制"的由来。
03 五个项目，一条学习路径
这五个项目恰好排成一条梯度：原理 → 产品 → 全栈 → 架构 → 平台。逐个看。
① hello-agents原理教材
github.com/datawhalechina/hello-agents
Datawhale 出品的《从零开始构建智能体》，16 章，7w+ Star。它不教你用框架，而是带你从 0 手写 ReAct、理解记忆与 RAG、自己造一个 Agent 框架。是 Agent 学习的第一本"字典"。
② Claude Code产品标杆
github.com/anthropics/claude-code
Anthropic 的"Coding Agent"定义者：读写文件、执行命令、多步迭代、请求权限确认。它闭源，但交互模型是所有 Agent 产品的参考系------尤其是上下文压缩和权限分级这两个工程权衡。
Agent 主循环 + 工具层 + 上下文/权限/安全机制，是产品的核心竞争力。
③ DeerFlow全栈精读
github.com/bytedance/deer-flow
字节开源的 Super Agent Harness，2026 年登顶 GitHub Trending。它是五个项目里架构最完整的：Next.js 前端 + Python 后端 + LangGraph 运行时 + 沙箱 + 记忆 + 技能系统。
一次请求的旅程：前端/IM → Gateway（11 层中间件链）→ Lead Agent（ReAct）→ 动态子代理（独立上下文/工具/沙箱，可并行）→ 中间事件经 SSE 流式回推前端。
DeerFlow：前端/IM → Nginx → Gateway（中间件 + Lead Agent）→ 子代理 → 沙箱/记忆/技能/工具。
前端开发者读它，重点是 SSE 流式渲染和工具调用事件的可视化------这正是 Agent 应用和普通 Chat 界面的分水岭。
④ DeepSeek Harness插件架构
github.com/deepseek-ai/deepseek-harness
DeepSeek 开源的 Agent 运行时（dsh），口号"一切皆插件"：模型、工具、技能、会话、沙箱、存储、UI，每个能力都可替换、可组合，由 Cordis 驱动。纯 TS + pnpm，前端开发者零门槛------npx @deepseek-ai/dsh web 就能跑起来。
它的设计思想和 VS Code 插件、微前端是一套逻辑：宿主只做"组合"，能力全部外挂。
⑤ Coze（扣子）低代码平台
github.com/coze-dev/coze-studio
字节的低代码 Agent 开发平台，开源三件套：Coze Studio（可视化开发，React + TS 前端 + Go 后端）、Coze Loop（调试评测）、Eino（Go 编排底座）。
灵魂是工作流：用户拖拽节点、连线成一张有向图，前端编辑图、后端按拓扑序执行图，两边共用同一份 JSON schema。
一张有向图 = 节点（大模型/工具/知识库/逻辑/变量）+ 边，前后端共用 schema。
04 前端在 Agent 里的位置
Agent 不是后端专属。前端至少有四个主战场：
① 流式输出（SSE）
用 fetch + ReadableStream 逐 token 渲染，把"思考中 / 调工具 / 子代理进度"渲染成步骤卡片。注意：Nginx 别对 SSE 开 gzip 缓冲，否则收不到实时流。
② 对话状态
Agent 应用比普通 Chat 多一类消息------工具调用事件，需要结构化渲染、错误重试、长对话折叠。
③ 工作流 Canvas
节点/边数据结构、拖拽连线、缩放对齐、执行状态回显------这是 Coze 这类平台的前端硬核。
④ 插件架构
宿主定义接口契约，第三方按契约注册扩展。和 VS Code 插件、微前端同一套思维。
05 一周速通路线
Day 1-2：核心概念 + 手写最小 ReAct 循环（先能跑通再谈架构）
Day 3：记忆 / RAG / 上下文工程 / 多智能体拓扑
Day 4：精读 DeerFlow------跑起来，看工具调用怎么渲染
Day 5：dsh 插件架构 + Coze 工作流画布
Day 6：写一个最小 SSE 聊天页
Day 7：给 DeerFlow 或 dsh 加一个小功能，完成第一个自己的 Agent 项目
**记住一点：**不用等完全看懂再动手。五个项目按上面顺序跑起来，一边看架构图一边改代码，一周就能建立完整的 Agent 知识体系。
如果这篇文章对你有帮助，欢迎点赞、收藏，转发给也在学 Agent 的朋友。想看哪部分的深入拆解，评论区告诉我。