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

​
架构

Deep Agents 使用协调器-工作器架构。主 Agent 规划任务并委托给专门的子代理，每个子代理隔离运行。在前端，useStream 展示协调器的消息和每个子代理的流式传输状态。 
from deepagents import create_deep_agent

agent = create_deep_agent(
    tools=[get_weather],
    system_prompt="You are a helpful assistant",
    subagents=[
        {
            "name": "researcher",
            "description": "Research assistant",
        }
    ],
)
在前端，使用 useStream 以与 createAgent 相同的方式连接。深度 Agent 模式使用额外的 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",
  });

  // 消息之外深度 Agent 状态
  const todos = stream.values?.todos;
  const subagents = stream.subagents;
}

​
模式

子代理流式传输

使用流式传输内容、进度跟踪和可折叠卡片展示专业子代理。

待办事项列表

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

沙箱

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

​
相关模式

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