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。
连接这些文档到Claude、VSCode等，通过MCP获取实时答案。
在GitHub上编辑此页面或提交问题。