LangChain 中文文档

外观

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

当界面让委派可见时，深度智能体最能发挥作用。与其 显示一个单一的、不透明的助手气泡，LangChain SDK 会暴露 协调器、子智能体发现、自定义状态和沙箱支持的产物，让 用户能够检查一个长时间运行的任务是如何被分解和完成的。

INFO

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

架构 ​

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

python
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.",
        }
    ],
)
ts
import { createDeepAgent } from "deepagents";

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

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

ts
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.values()];
}

SDK 暴露了什么 ​

深度智能体界面通常需要的不止是最终答案。前端 SDK 为您 提供运行过程中用户关心的各个部分的结构化投影：

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

这让您可以构建更接近 IDE、任务看板或 工作流监控器，而非普通聊天记录的界面。

模式 ​

  • 子智能体流式输出 — 使用流式内容、进度跟踪和可折叠卡片展示专家子智能体。
  • 待办列表 — 当智能体启用任务规划时，使用实时待办列表跟踪进度。
  • 沙箱 — 构建由沙箱支持的、带有文件浏览器、代码查看器和 diff 面板的类 IDE 界面。

相关模式 ​

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

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