构建可实时可视化深度代理工作流的界面。这些模式 展示了如何渲染子代理进度、任务规划、流式内容以及 基于使用创建的代理的类 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;
from deepagents import create_deep_agent
agent = create_deep_agent(
model="google_genai:gemini-3.5-flash",
tools=[get_weather],
system_prompt="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 | 共享状态,如待办事项、计划、报告部分、沙箱元数据或代理写入的任何自定义键。 |
| 工具调用状态 | 将文件系统、搜索、浏览器或领域工具渲染为带进度和结果的卡片。 |
| 中断 | 暂停委托的工作以等待用户批准或缺失输入,同时不丢失运行状态。 |
这让您可以构建比普通聊天记录更接近 IDE、任务板或 工作流监控器的界面。
模式
Subagent streaming
使用流式内容、进度跟踪和可折叠卡片显示专业子代理。
Todo list
使用从代理状态同步的实时待办列表跟踪代理进度。
Sandbox
构建基于沙箱的类 IDE UI,包含文件浏览器、代码查看器和差异面板。
相关模式
LangChain 前端模式包括 markdown 消息、工具调用和人机交互,都与深度配合使用 代理。Deep Agents 基于相同的 LangGraph 运行时构建,因此 useStream 提供相同的核心 API。
如需更低级别的图形可视化,请参阅 LangGraph 前端模式。它们展示了如何 将图形节点和状态键直接映射到 UI 组件。