概述

将 LangGraph 智能体渲染到前端

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

架构

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

import { StateGraph, StateSchema, MessagesValue, START, END } from "@langchain/langgraph";
import * as z from "zod";

const State = new StateSchema({
  messages: MessagesValue,
  classification: z.string(),
  research: z.string(),
  analysis: z.string(),
});

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

在前端，useStream 通过 stream.values 暴露已完成的节点输出，通过 getMessagesMetadata 识别哪个节点产生了每个流式 Token。

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 图。useStream hook 无论你使用 createAgent、createDeepAgent 还是自定义 StateGraph，都提供相同的核心 API。

---

将这些文档连接到 Claude、VSCode 等工具，通过 MCP 获取实时答案。

在 GitHub 上编辑此页面 或 提交问题。