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

​
架构

深度代理使用协调器-工作者架构。主代理规划任务并委托给专门的子代理，每个子代理独立运行。在前端，useStream 会同时显示协调器的消息和每个子代理的流式状态。 
import { createDeepAgent } from "deepagents";

const agent = createDeepAgent({
  tools: [getWeather],
  system: "You are a helpful assistant",
  subagents: [
    {
      name: "researcher",
      description: "Research assistant",
    },
  ],
});
在前端，使用 useStream 连接的方式与 createAgent 相同。深度代理模式使用 useStream 的附加功能，如 stream.subagents、stream.values.todos 和 filterSubagentMessages 来渲染特定于子代理的 UI。 
import { useStream } from "@langchain/react";

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

  // 深度代理状态，超出消息范围
  const todos = stream.values?.todos;
  const subagents = stream.subagents;
}

​
模式

子代理流式传输

显示专家子代理，包含流式内容、进度跟踪和可折叠卡片。

待办事项列表

使用从代理状态同步的实时待办事项列表跟踪代理进度。

沙箱

构建类 IDE 的 UI，包含文件浏览器、代码查看器和由沙箱支持的差异面板。

​
相关模式

LangChain 前端模式，包括 Markdown 消息、工具调用和人在环路，也都适用于深度 代理。深度代理构建在相同的 LangGraph 运行时之上，因此 useStream 提供相同的核心 API。
在 GitHub 上编辑此页面 或 提交问题。
通过 MCP 将这些文档连接到 Claude、VSCode 等 以获取实时答案。