概览 - 以编程方式使用文档

构建可实时可视化深度代理工作流的界面。这些模式展示了如何渲染子代理进度、任务规划、流式内容以及基于使用创建的代理的类 IDE 沙箱体验 createDeepAgent.

当 UI 使委托可见时，深度代理最有用。与其显示单个不透明的助手气泡，LangChain SDK 会公开协调器、子代理发现、自定义状态和基于沙箱的产物，以便用户可以检查长任务是如何被分解和完成的。

架构

深度代理采用协调器-工作器架构。主代理规划任务并委托给专门的子代理，每个子代理独立运行。在前端，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;

const agent = createDeepAgent({
  tools: [getWeather],
  systemPrompt: "You are a helpful assistant",
  subagents: [
    {
      name: "researcher",
      description: "Research assistant",
    },
  ],
});

在前端，通过 @useStream以与 createAgent相同的方式连接。传递一个 [类型参数可获得类型安全的流状态。深度代理模式使用 stream.subagents、选择器辅助函数（如 useMessages(stream, subagent)）和自定义状态值（如 stream.values.todos ）来渲染子代理特定的 UI。

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`	共享状态，如待办事项、计划、报告部分、沙箱元数据或代理写入的任何自定义键。
工具调用状态	将文件系统、搜索、浏览器或领域工具渲染为带进度和结果的卡片。
中断	暂停委托的工作以等待用户批准或缺失输入，同时不丢失运行状态。