Skip to main content
构建能够实时可视化LangGraph管道的前端。这些模式展示了如何渲染具有每个节点状态和来自自定义StateGraph工作流的流式内容的多步骤图执行。

架构

LangGraph图由通过边连接的命名节点组成。每个节点执行一个步骤(分类、研究、分析、综合)并将输出写入特定的状态键。在前端,useStream提供对节点输出、流式令牌和图元数据的响应式访问,以便您可以将每个节点映射到一个UI卡片。
在前端,useStream暴露stream.values用于已完成的节点输出,以及getMessagesMetadata用于识别哪个节点产生了每个流式令牌。

模式

图执行

可视化具有每个节点状态和流式内容的多步骤图管道。

相关模式

LangChain前端模式——Markdown消息、工具调用、乐观更新等——适用于任何LangGraph图。无论您使用createAgentcreateDeepAgent还是自定义的StateGraphuseStream钩子都提供相同的核心API。