概述 - 以编程方式使用文档

构建实时可视化 LangGraph 流程图的前端。这些模式展示了如何渲染多步骤图执行，包括每个节点的状态和来自自定义的流式内容 StateGraph workflows.

LangGraph 前端的优势在于 UI 可以遵循与图相同的结构。节点、状态键、检查点、中断、子图和流式消息都是可见的运行时概念，因此您可以构建能够解释系统正在做什么的界面，而不是将执行隐藏在一个助手消息后面。

架构

LangGraph 图由通过边连接的有名节点组成。每个节点执行一个步骤（分类、研究、分析、综合）并将输出写入特定的状态键。在前端，SDK 流处理程序提供对节点输出、流式令牌和发现的子图的响应式访问，这样您可以将每个节点映射到一张 UI 卡片。

%%{
  init: {
    "fontFamily": "monospace",
    "flowchart": {
      "curve": "curve"
    }
  }
}%%
graph LR
  FRONTEND["useStream()"]
  GRAPH["StateGraph"]
  N1["Node A"]
  N2["Node B"]
  N3["Node C"]

  GRAPH --"stream"--> FRONTEND
  FRONTEND --"submit"--> GRAPH
  GRAPH --> N1
  N1 --> N2
  N2 --> N3

  classDef blueHighlight fill:#DBEAFE,stroke:#2563EB,color:#1E3A8A;
  classDef greenHighlight fill:#DCFCE7,stroke:#16A34A,color:#14532D;
  classDef orangeHighlight fill:#FEF3C7,stroke:#D97706,color:#92400E;
  class FRONTEND blueHighlight;
  class GRAPH greenHighlight;
  class N1,N2,N3 orangeHighlight;

const State = Annotation.Root({
  ...MessagesAnnotation.spec,
  classification: Annotation<string>(),
  research: Annotation<string>(),
  analysis: Annotation<string>(),
  synthesis: Annotation<string>(),
});

const graph = new StateGraph(State)
  .addNode("classify", classifyNode)
  .addNode("do_research", researchNode)
  .addNode("analyze", analyzeNode)
  .addNode("synthesize", synthesizeNode)
  .addEdge(START, "classify")
  .addEdge("classify", "do_research")
  .addEdge("do_research", "analyze")
  .addEdge("analyze", "synthesize")
  .addEdge("synthesize", END)
  .compile();

在前端，@[useStream暴露了 stream.subgraphs 用于图节点发现以及选择器辅助函数，如 useMessages(stream, node) 用于节点作用域的流式内容。 stream.values 在您需要字段（如最终 synthesis）时仍保留完整图状态。Angular 通过 @[ 使用相同的流式 APIinjectStream].

function Pipeline() {
  const stream = useStream<typeof graph>({
    apiUrl: "http://localhost:2024",
    assistantId: "pipeline",
  });

  const classification = stream.values?.classification;
  const research = stream.values?.research;
  const analysis = stream.values?.analysis;
  const graphNodes = [...stream.subgraphs.values()];
}

这与聊天流有什么不同

自定义图通常为产品工作流提供支持：研究流程、审批流程、数据管道、数据丰富、代码审查、规划和多步骤分析。前端 SDK 让您可以使用图原生信号渲染这些工作流：这些模式使用 v1 前端 SDK 包。如果您使用的是早期版本，请参阅 React、Vue、Svelte 和 Angular 的迁移指南。

运行时概念	前端用户体验
有名节点	每个图节点对应一张卡片、时间线步骤或状态徽章。
状态键	用于分类、来源、分析和最终综合等类型化输出的专用 UI 区域。
流式元数据	将部分消息路由到生成它们的节点。
检查点	检查或从先前的图状态恢复，用于调试和可审计性。
中断	暂停节点以等待人工输入、审批或修正，然后继续。
子图	仅在用户需要更多细节时才显示嵌套执行。

由于 SDK 直接暴露了这些概念，您可以从简单的将聊天面板转换为完整的工作流调试器，而无需更改后端协议。

模式

Graph execution

可视化多步骤图管道，实时显示每个节点的状态和流式内容。

Custom stream channels

将自定义服务端数据流式传输到前端并使用 useExtension 和 useChannel.

架构

这与聊天流有什么不同

模式

Graph execution

Custom stream channels

相关模式