文档索引
在以下地址获取完整的文档索引：https://docs.langchain.org.cn/llms.txt
在进一步探索之前，请使用此文件发现所有可用页面。
构建能够实时可视化 LangGraph 流水线的前端。这些模式展示了如何渲染多步骤图执行过程，包含各节点的运行状态，并从自定义的 StateGraph 工作流中流式传输内容。
LangGraph 图由通过边连接的命名节点组成。每个节点执行一个步骤（分类、研究、分析、合成）并将输出写入特定的状态键（state key）。在前端，useStream 提供了对节点输出、流式令牌（tokens）和图元数据的响应式访问，以便您可以将每个节点映射到 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: "https://:2024",
assistantId: "pipeline",
});
const classification = stream.values?.classification;
const research = stream.values?.research;
const analysis = stream.values?.analysis;
}
图执行
通过节点状态和流式内容可视化多步骤图流水线。
createAgent、createDeepAgent 还是自定义的 StateGraph，useStream 钩子提供的核心 API 都是一致的。
将这些文档连接到 Claude、VSCode 等，以获得实时答案。 
