构建能够实时可视化深度代理工作流的前端界面。这些模式展示了如何渲染由 createDeepAgent 创建的代理的子代理进度、任务规划、流式内容以及类似 IDE 的沙盒体验。 当用户界面能够清晰地展示任务委派过程时,深度代理才能发挥最大作用。与其显示一个单一、不透明的助手气泡,LangChain SDK 会暴露协调器、子代理发现机制、自定义状态以及基于沙盒的工件,使用户能够深入了解一个长时间运行的任务是如何被分解和完成的。
这些模式使用 v1 版本的前端 SDK 软件包。如果您使用的是更早的版本,请参考 React、Vue、Svelte 和 Angular 的迁移指南。

架构

深度代理采用协调器-工作者架构。主代理负责规划任务并委派给专业的子代理,每个子代理都在隔离环境中运行。在前端,v1 版本的流处理器会在根流上显示协调器消息,并暴露子代理发现快照,以支持针对特定子代理的视图。
在前端,您可以像使用 createAgent 一样使用 useStream 进行连接。通过传递一个类型参数来实现类型安全的流状态。深度代理模式使用 stream.subagents、选择器辅助函数(如 useMessages(stream, subagent))以及自定义状态值(如 stream.values.todos)来渲染特定于子代理的用户界面。

SDK 暴露的内容

深度代理的用户界面通常需要的不仅仅是最终答案。前端 SDK 为您提供了用户关心的运行过程各部分的结构化投影: 这使您能够构建感觉更接近 IDE、任务板或工作流监视器,而非普通聊天记录的界面。

模式

子代理流式传输

通过流式内容、进度跟踪和可折叠卡片展示专业子代理。

待办事项列表

当代理启用任务规划时,使用实时待办事项列表跟踪进度。

沙盒

使用由沙盒支持的文件浏览器、代码查看器和差异对比面板,构建一个类似 IDE 的界面。

相关模式

LangChain 前端模式(包括 Markdown 消息、工具调用和人机协同)也适用于深度代理。深度代理基于相同的 LangGraph 运行时构建,因此 useStream 提供了相同的核心 API。 有关更底层的图可视化,请参阅 LangGraph 前端模式。它们展示了如何将图节点和状态键直接映射到用户界面组件。