Skip to main content
构建能够实时可视化 LangGraph 流水线的前端界面。这些模式展示了如何渲染多步骤图执行过程，包括每个节点的状态以及从自定义 StateGraph 工作流中流式传输内容。

​
架构

LangGraph 图由通过边连接的命名节点组成。每个节点执行一个步骤（分类、研究、分析、合成）并将输出写入特定的状态键。在前端，useStream 提供了对节点输出、流式令牌和图元数据的响应式访问，从而可以将每个节点映射到一个 UI 卡片。 
from langgraph.graph import StateGraph, MessagesState, START, END

class State(MessagesState):
    classification: str
    research: str
    analysis: str

graph = StateGraph(State)
graph.add_node("classify", classify_node)
graph.add_node("research", research_node)
graph.add_node("analyze", analyze_node)
graph.add_edge(START, "classify")
graph.add_edge("classify", "research")
graph.add_edge("research", "analyze")
graph.add_edge("analyze", END)

app = graph.compile()
在前端，useStream 暴露了 stream.values 用于获取已完成的节点输出，以及 getMessagesMetadata 用于识别每个流式令牌是由哪个节点产生的。 
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;
}

​
模式

图执行

可视化多步骤图流水线，包括每个节点的状态和流式内容。

​
相关模式

LangChain 前端模式——如 Markdown 消息、工具调用、乐观更新等——可与任何 LangGraph 图配合使用。无论您使用 createAgent、createDeepAgent 还是自定义的 StateGraph，useStream 钩子都提供相同的核心 API。
Edit this page on GitHub or file an issue.
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.