前端总览（Overview）

将 LangGraph 智能体渲染到前端

构建实时可视化 LangGraph 流水线的前端。这些模式展示了如何从自定义 StateGraph 工作流中渲染具有单节点状态和流式内容的多步图执行。

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

INFO

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

架构

LangGraph 图由通过边连接的命名节点组成。每个节点执行一个步骤（分类、调研、分析、综合）并将输出写入特定的状态键。在前端，SDK 流句柄提供对节点输出、流式 Token 和已发现子图的响应式访问，以便你可以将每个节点映射到 UI 卡片。

typescript

import { Annotation, MessagesAnnotation, StateGraph, START, END } from "@langchain/langgraph";

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)。当你需要最终 synthesis 等字段时，stream.values 仍保留完整的图状态。Angular 通过 injectStream 使用相同的流 API 形式。

typescript

import { useStream } from "@langchain/react";

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 允许你使用图原生信号来呈现这些工作流：

运行时概念	前端 UX 呈现
命名节点（Named nodes）	每个图节点一张卡片、时间线步骤或状态徽章。
状态键（State keys）	针对类型化输出（例如分类、来源、分析和最终综合）的专用 UI 区域。
流式元数据（Streaming metadata）	将部分消息路由到生成它们的节点。
检查点（Checkpoints）	检查或从先前的图状态恢复以进行调试和可审计性。
中断（Interrupts）	暂停节点以获取人类输入、审批或更正，然后继续。
子图（Subgraphs）	仅在用户需要更多详细信息时才揭示嵌套执行。

因为 SDK 直接公开了这些概念，所以你可以在不更改后端协议的情况下，从简单的聊天面板扩展到完整的工作流调试器。

核心模式

图执行（Graph execution）
可视化具有单节点状态和流式内容的多步图流水线。

自定义流通道（Custom stream channels）
将自定义服务端数据流式传输到前端，并使用 useExtension 和 useChannel 进行读取。

前端总览（Overview） ​

架构 ​

与普通聊天流的区别 ​

核心模式 ​

相关模式 ​

前端总览（Overview）

架构

与普通聊天流的区别

核心模式

相关模式