以下是 LangChain 官方文档 Deep Agents Frontend Overview（深度智能体前端概览） 章节的逐段通俗讲解。内容严格遵循原文结构，将技术概念转化为易于理解的前端开发知识点。
Overview（概览）
💡 通俗理解
普通的 AI 聊天界面就像一个"黑盒气泡"，用户只能看到最终的回复。但 Deep Agents（深度智能体） 在执行复杂任务时，背后有多个子智能体在并行工作、拆解任务、读写文件。这个文档教你如何通过前端 SDK，把这些幕后的"分工协作过程"实时可视化，让用户能像看项目管理看板或 IDE 一样，清晰地看到任务是如何被拆解和完成的。
- 核心价值：让"委派（Delegation）"变得可见。不再展示单一的助手回复，而是暴露协调者（Coordinator）、子智能体发现、自定义状态和沙箱产物。
- 适用对象 ：使用
createDeepAgent创建的长耗时、多步骤复杂任务智能体。 - ⚠️ 版本注意 ：这些模式基于 v1 前端 SDK。如果你使用的是旧版本，请务必查阅对应框架（React/Vue/Svelte/Angular）的 v1 迁移指南。
Architecture（架构）
💡 通俗理解
Deep Agents 采用的是 "包工头（协调者）+ 专业工人（子智能体）" 的架构。包工头负责规划和派活，工人们各自在隔离的环境里干活。在前端，你不需要自己去解析复杂的底层消息流，SDK 已经帮你把"包工头的指令"和"各个工人的进度"分门别类地整理好了，你只需要按需取用即可。
- 后端架构：主智能体（Coordinator）规划任务并委派给专门的子智能体（Subagents），每个子智能体独立隔离运行。
- 前端数据流 ：
useStream()接收来自后端的统一数据流。- Selector helpers（选择器辅助函数） 充当"过滤器"，将根数据流按子智能体进行作用域划分。
- 前端既能看到全局的协调消息，也能单独订阅某个子智能体的专属视图。
- 前端接入方式 ：与普通的
createAgent完全相同，使用useStream钩子连接。 - 类型安全 ：传入泛型参数
<typeof agent>，即可获得完整的 TypeScript 类型提示。 - 核心 API ：
stream.subagents：获取所有子智能体的实时状态。useMessages(stream, subagent)：获取特定子智能体的消息流。stream.values.todos：读取智能体写入的自定义共享状态（如待办事项）。
What the SDK exposes（SDK 暴露的数据投影）
💡 通俗理解
做 Deep Agent 的前端，光有"聊天记录"是远远不够的。SDK 把底层杂乱的运行数据，翻译成了前端最需要的 "结构化视图（Projections）"。你可以把它们理解为不同维度的"仪表盘数据源"，直接拿来渲染对应的 UI 组件。
| 数据投影 (Projection) | 通俗解释与用途 |
|---|---|
stream.messages |
主聊天区：协调者的对话记录和最终汇总结果。 |
stream.subagents |
工人监控面板：实时发现正在工作的子智能体，包含它们的当前状态和任务元数据。 |
stream.values |
共享状态板：智能体写入的全局数据，如 Todo 列表、执行计划、报告章节、沙箱元数据等。 |
| Tool-call state | 工具执行卡片：将文件系统、搜索、浏览器等工具的调用过程，渲染为带进度条和结果展示的卡片。 |
| Interrupts | 人工审批弹窗：当任务暂停等待用户确认或补充信息时触发，且不会丢失当前的运行状态。 |
- UI 体验升级 ：利用这些数据，你可以构建出接近 IDE、任务看板或工作流监控器 的高级界面，而不仅仅是一个简陋的聊天窗口。
Patterns（常用 UI 模式）
💡 通俗理解
官方为你准备了三种最典型的 Deep Agent 前端"样板间"。你可以直接参考这些模式，快速搭建出专业的复杂智能体交互界面。
- Subagent streaming（子智能体流式渲染）：以可折叠卡片的形式，实时展示各个专家子智能体的流式输出内容和执行进度。
- Todo list（待办事项列表）：当智能体启用任务规划时，用一个实时更新的 Todo 列表来追踪整体任务的完成进度。
- Sandbox（沙箱环境）：构建类似 IDE 的界面，包含文件浏览器、代码查看器和 Diff 对比面板，所有数据均由后端沙箱实时驱动。
Related patterns（相关模式与生态兼容）
💡 通俗理解
Deep Agents 并不是一个孤立的新体系，它完美兼容 LangChain 现有的所有前端生态。你之前学会的基础组件可以直接复用；如果需要更底层的定制，也有相应的进阶方案。
- 无缝兼容基础模式 ：LangChain 前端基础模式（如 Markdown 消息渲染、工具调用展示、人类介入审批等）在 Deep Agents 中全部可用 。因为它们底层都基于相同的 LangGraph 运行时，
useStream的核心 API 保持一致。 - 底层图可视化 ：如果你需要比预设投影更细粒度的控制，可以查阅 LangGraph 前端模式。它教你如何直接将底层的 Graph 节点（Nodes）和状态键（State Keys）映射到自定义 UI 组件上。