尚拙
Search K

Appearance

前端集成总览 (Overview) ​

构建展示实时子智能体事件流、任务进度看板与沙箱文件编辑器的现代化 UI

构建能够实时可视化展示 deep agent 复杂工作流的现代 Web 前端。本系列模式演示如何基于由 createDeepAgent 创建的智能体，渲染子智能体执行进度、任务规划待办看板、流式生成内容以及类似 IDE 的沙箱文件交互体验。

Deep Agents 在前端界面清晰展示任务委派时最具生产力价值。传统的单一助手聊天气泡对于复杂的长周期任务往往过于黑盒，而 LangChain 官方前端 SDK 暴露了主协调器状态、子智能体动态发现快照、自定义图状态以及沙箱文件生成产物，使用户能够一目了然地观察一个复杂任务是如何被拆解并逐步攻克完成的。

NOTE

这些模式采用 v1 前端 SDK 软件包。如果你使用的是早期版本，请参阅针对 React、Vue、Svelte 和 Angular 的官方迁移指南。

协同架构设计 (Architecture) ​

Deep Agents 采用协调器-工人（Coordinator-Worker）架构体系。主智能体负责任务规划并委派给相互隔离的专业子智能体。在前端层面上，v1 流式句柄在根流上暴露协调器消息，并暴露子智能体发现快照，用于渲染局部限定的子任务卡片视图。

mermaid
%%{
  init: {
    "fontFamily": "monospace",
    "flowchart": {
      "curve": "curve"
    }
  }
}%%
graph LR
  FRONTEND["useStream() 前端流"]
  SELECTORS["选择器辅助函数"]
  BACKEND["createDeepAgent() 后端"]
  SUB1["子智能体 A"]
  SUB2["子智能体 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;
ts
import { createDeepAgent } from "deepagents";

const agent = createDeepAgent({
  tools: [getWeather],
  systemPrompt: "You are a helpful assistant",
  subagents: [
    {
      name: "researcher",
      description: "研究专家子智能体",
      systemPrompt: "你是一个专业的研究助理。",
    },
  ],
});

在前端，使用与 createAgent 相同的 useStream 进行连接。传入类型参数以获得类型安全的流状态。Deep agent 模式利用 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",
  });

  // 消息之外的 Deep agent 状态
  const todos = stream.values?.todos;
  const subagents = [...stream.subagents.values()];
}

前端 SDK 暴露的核心投影 ​

构建 Deep Agent 前端通常需要展示比最终答复更多的中间过程。前端 SDK 为用户关心的各个运行部分提供了结构化投影对象：

投影对象 (Projection)核心适用场景
stream.messages主协调器的顶层对话流与最终综合总结答复。
stream.subagents实时动态发现专业工作子智能体，包括其执行状态与任务元数据。
stream.values共享状态，例如 Todo 待办列表、执行计划、报告分段或沙箱文件元数据。
工具调用状态 (Tool calls)将文件系统操作、网络搜索、浏览器操作或业务工具渲染为带进度条和结果卡片的 UI。
中断事件 (Interrupts)在需要人工审批或补充输入时优雅暂停委派任务，且完全不会丢失当前的运行状态。

这使你能够构建出更接近 IDE、任务看板或工作流监控大盘的现代交互界面，远胜于呆板的传统纯文本对话框。

核心前端模式指南 ​

子智能体流式渲染 (Subagent streaming)

展示带有打字机流式内容、实时进度跟踪和可折叠展开卡片的专业子智能体界面。

Todo 待办列表模式 (Todo list)

当智能体启用任务规划时，使用实时待办事项列表展示结构化步骤进度。

沙箱文件工作区模式 (Sandbox)

构建带有文件资源管理器、代码编辑器和 Diff 差异对比面板的类 IDE 沉浸式界面。

相关参考 ​

LangChain 前端模式（包括 Markdown 消息渲染、工具调用卡片以及人在回路流程）均可与 deep agents 无缝复用。 若需底层图拓扑的可视化展示，请参阅 LangGraph 前端模式。