> ## Documentation Index
> Fetch the complete documentation index at: https://cndoc-langchain.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 概述

> 将LangGraph代理渲染到前端

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

## 架构

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

```mermaid theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
%%{
  init: {
    "fontFamily": "monospace",
    "flowchart": {
      "curve": "curve"
    }
  }
}%%
graph LR
  FRONTEND["useStream()"]
  GRAPH["StateGraph"]
  N1["节点 A"]
  N2["节点 B"]
  N3["节点 C"]

  GRAPH --"流"--> FRONTEND
  FRONTEND --"提交"--> 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;
```

```ts theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
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`用于识别哪个节点产生了每个流式令牌。

```ts theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
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;
}
```

## 模式

<CardGroup cols={2}>
  <Card title="图执行" icon="chart-dots" href="/oss/javascript/langgraph/frontend/graph-execution">
    可视化具有每个节点状态和流式内容的多步骤图管道。
  </Card>
</CardGroup>

## 相关模式

[LangChain前端模式](/oss/javascript/langchain/frontend/overview)——Markdown消息、工具调用、乐观更新等——适用于任何LangGraph图。无论您使用`createAgent`、`createDeepAgent`还是自定义`StateGraph`，`useStream`钩子都提供相同的核心API。

***

<div className="source-links">
  <Callout icon="terminal-2">
    [连接这些文档](/use-these-docs)到Claude、VSCode等，通过MCP获取实时答案。
  </Callout>

  <Callout icon="edit">
    [在GitHub上编辑此页面](https://github.com/langchain-ai/docs/edit/main/src/oss/langgraph/frontend/overview.md)或[提交问题](https://github.com/langchain-ai/docs/issues/new/choose)。
  </Callout>
</div>