概述

构建能够展示 Deep Agents 实时子智能体流、任务进度和沙箱的 UI

构建可实时可视化深度智能体工作流的前端。这些模式 展示了如何渲染由 createDeepAgent 创建的子智能体进度、任务规划、流式内容， 以及类 IDE 的沙箱体验。

当 UI 让委派过程可见时，深度智能体才最有用。LangChain SDK 并不只 展示一个不透明的助手气泡，而是暴露协调器、子智能体发现、自定义状态 以及由沙箱支撑的制品，让用户能够审视一个长时间运行的任务是如何被 分解和完成的。

NOTE

这些模式使用 v1 前端 SDK 包。如果你使用的是更早的版本，请参阅 React、Vue、Svelte 和 Angular 的迁移指南。

架构

Deep Agents 采用协调器-工作器架构。主智能体规划任务并将其委派给专门的子智能体，每个子智能体都在隔离环境中运行。在前端，v1 流句柄会在根流上呈现协调器消息，并暴露子智能体发现快照，以供限定范围的子智能体视图使用。

%%{
  init: {
    "fontFamily": "monospace",
    "flowchart": {
      "curve": "curve"
    }
  }
}%%
graph LR
  FRONTEND["useStream()"]
  SELECTORS["selector helpers"]
  BACKEND["createDeepAgent()"]
  SUB1["Subagent A"]
  SUB2["Subagent B"]

  BACKEND --"stream"--> FRONTEND
  FRONTEND --"scope by subagent"--> SELECTORS
  SELECTORS --> SUB1
  SELECTORS --> SUB2
  FRONTEND --"submit"--> BACKEND
  BACKEND --"delegate"--> SUB1
  BACKEND --"delegate"--> SUB2
  SUB1 --"result"--> BACKEND
  SUB2 --"result"--> BACKEND

  classDef blueHighlight fill:#E5F4FF,stroke:#006DDD,color:#030710;
  classDef greenHighlight fill:#F6FFDB,stroke:#6E8900,color:#2E3900;
  classDef purpleHighlight fill:#EBD0F0,stroke:#885270,color:#441E33;
  class FRONTEND,SELECTORS blueHighlight;
  class BACKEND greenHighlight;
  class SUB1,SUB2 purpleHighlight;

from deepagents import create_deep_agent

agent = create_deep_agent(
    model="google_genai:gemini-3.6-flash",
    tools=[get_weather],
    system_prompt="You are a helpful assistant",
    subagents=[
        {
            "name": "researcher",
            "description": "Research assistant",
            "system_prompt": "You are a research assistant.",
        }
    ],
)

在前端，用与 createAgent 相同的方式通过 useStream 进行连接。传入一个类型参数以获得类型安全的流状态。深度智能体模式使用 stream.subagents、诸如 useMessages(stream, subagent) 的选择器辅助函数，以及像 stream.values.todos 这样的自定义状态值，来渲染特定于子智能体的 UI。

import { useStream } from "@langchain/react";

function App() {
  const stream = useStream<typeof agent>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
  });

  // Deep agent state beyond messages
  const todos = stream.values?.todos;
  const subagents = [...stream.subagents.values()];
}

SDK 暴露的内容

深度智能体 UI 通常需要的不只是最终答案。前端 SDK 为你提供 了面向用户所关心运行部分的结构化投影：

投影	用于
stream.messages	协调器对话和最终综合。
stream.subagents	实时发现专门的工作器，包括状态和任务元数据。
stream.values	共享状态，例如待办事项、计划、报告章节、沙箱元数据，或你的智能体写入的任何自定义键。
工具调用状态	将文件系统、搜索、浏览器或领域工具渲染为带进度和结果的卡片。
中断	为等待用户审批或缺失输入而暂停被委派的工作，同时不丢失运行状态。

这让你能够构建出比纯聊天记录更接近 IDE、任务看板或 工作流监控器的界面。

模式

•Subagent streaming

以流式内容、进度跟踪和可折叠卡片来展示专门的子智能体。

•Todo list

当智能体选择启用任务规划时，用实时待办列表跟踪进度。

{ }Sandbox

构建一个由沙箱支撑、带有文件浏览器、代码查看器和差异面板的类 IDE UI。

相关模式

LangChain 前端模式，包括 markdown 消息、工具调用和人在回路，也都适用于深度 智能体。Deep Agents 构建在相同的 LangGraph 运行时之上，因此 useStream 提供相同的核心 API。

有关更底层的图可视化，请参阅 LangGraph 前端模式。它们展示了如何 将图节点和状态键直接映射到 UI 组件。

---