LangChain 中文文档

外观

为使用 createAgent 创建的智能体构建丰富、可交互的前端。这些模式涵盖了从基本消息渲染到高级工作流的一切内容，例如人工介入（human-in-the-loop）审批、排队提交、持久化流式重新接入（durable stream rejoin）以及时间旅行调试。

LangChain 前端 SDK 专为智能体应用而构建，而不仅仅是流式输出 token 的聊天机器人。用于渲染消息的同一个 hook 还会暴露智能体的持久化线程状态、工具调用生命周期、中断、检查点历史以及自定义状态值，因此你的界面可以成为长时间运行的智能体工作的控制平面。

INFO

这些模式使用 v1 前端 SDK 软件包。如果你使用的是更早的版本，请参阅 React、Vue、Svelte 和 Angular 的迁移指南。

架构 ​

每个模式都遵循相同的架构：一个 createAgent 后端通过 SDK 的流式 API 将状态流式传输到前端。

在后端，createAgent 生成一个编译后的 LangGraph 图，该图暴露流式 API。在前端，流式句柄连接到该 API 并提供响应式状态——消息、工具调用、中断、值以及线程元数据——你可以用任何框架进行渲染。

为什么使用 LangChain 前端 SDK？ ​

大多数 AI 界面库只能帮助你向聊天记录追加流式文本。LangChain 的 SDK 会暴露生产级智能体所需的更丰富的运行时语义：

能力它能在你的界面中实现什么
持久化线程重新加载页面、切换设备或重新接入一次运行，而不会丢失对话状态。
类型化的智能体状态渲染任意状态键，而不仅仅是消息：待办事项、流水线输出、引用、沙箱文件、指标或自定义业务对象。
工具调用生命周期将待处理、已完成和失败的工具调用显示为专用构建的界面卡片，而不是原始 JSON。
中断为人工审批、编辑或缺失信息暂停执行，然后从智能体停止的确切位置恢复。
检查点基于持久化的状态快照构建编辑、重试、分支、审计和时间旅行流程。
嵌套执行可视化深度智能体、子智能体和图节点，而不会把所有内容扁平化为一条难以阅读的流。
框架原生的响应式从 React、Vue、Svelte 或 Angular 使用相同的协议，同时保持惯用的 hooks、组合式函数、store 或 signals。

这些原语让你能够设计这样的界面：用户可以检查、引导、暂停、恢复和分叉正在进行的智能体工作。

python
from langchain import create_agent
from langgraph.checkpoint.memory import MemorySaver

agent = create_agent(
    model="openai:gpt-5.5",
    tools=[get_weather, search_web],
    checkpointer=MemorySaver(),
)
ts
export interface GraphState {
  messages: BaseMessage[];
}
tsx
import { useStream } from "@langchain/react";
import type { GraphState } from "./types";

function Chat() {
  const stream = useStream<GraphState>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
  });

  return (
      {stream.messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
  );
}
ts
import { createAgent } from "langchain";
import { MemorySaver } from "@langchain/langgraph";

const agent = createAgent({
  model: "openai:gpt-5.5",
  tools: [getWeather, searchWeb],
  checkpointer: new MemorySaver(),
});
tsx
import { useStream } from "@langchain/react";
import type { agent } from "./agent";

function Chat() {
  const stream = useStream<typeof agent>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
  });

  return (
      {stream.messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
  );
}

React、Vue 和 Svelte 使用 useStream。Angular 使用 injectStream：

ts
import { useStream } from "@langchain/react";      // React
import { useStream } from "@langchain/vue";        // Vue
import { useStream } from "@langchain/svelte";     // Svelte
import { injectStream } from "@langchain/angular"; // Angular

类型推断 ​

向 useStream（或在 Angular 中向 injectStream）传递一个类型参数，即可对 stream.messages、stream.toolCalls、stream.interrupt、stream.values 以及其他响应式状态进行类型安全的访问。

定义一个与你的智能体状态 schema 匹配的 TypeScript 接口，并将其作为类型参数传入：

ts
import type { BaseMessage } from "langchain";

interface AgentState {
  messages: BaseMessage[];
}

const stream = useStream<AgentState>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
});

使用 langgraph.json 中的图名称作为 assistantId。在本指南中的模式示例里，将 typeof myAgent 替换为你的接口名称（例如 AgentState）。

如果你的智能体暴露了自定义状态键，请扩展接口：

ts
import type { BaseMessage, Todo } from "langchain";

interface AgentState {
  messages: BaseMessage[];
  todos: Todo[];
}

导入你的智能体并将 typeof myAgent 作为类型参数传入。TypeScript 会从编译后的图中推断出状态 schema：

ts
import type { myAgent } from "./agent";

const stream = useStream<typeof myAgent>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
});

自定义状态键会自动推断，无需手动编写接口。

模式 ​

渲染消息与输出 ​

  • Markdown 消息 — 解析并渲染流式 Markdown，并带有正确的格式和代码高亮。
  • 结构化输出 — 将类型化的智能体响应渲染为自定义界面组件，而不是纯文本。
  • 推理 token — 在可折叠区块中显示模型的思考过程。
  • 生成式界面 — 使用 json-render 从自然语言提示词渲染 AI 生成的用户界面。

显示智能体动作 ​

  • 工具调用 — 将工具调用显示为丰富、类型安全的界面卡片，并带有加载和错误状态。
  • 无头工具 — 在客户端运行浏览器和设备 API，同时在智能体上保留类型化的工具 schema。
  • 人在回路 — 暂停智能体以进行人工审查，支持审批、拒绝和编辑工作流。

管理对话 ​

  • 分支对话 — 编辑消息、重新生成回复并浏览对话分支。
  • 消息队列 — 在智能体顺序处理消息时对多条消息排队。

高级流式输出 ​

  • 接入与重新接入流 — 断开并重新连接到正在运行的智能体流，而不丢失进度。
  • 时间旅行 — 检查、浏览并从对话历史中的任意检查点恢复。

选择前端模式 ​

从你的应用需要回答的界面问题入手：

如果用户需要……从何处开始
了解智能体正在做什么工具调用 和 推理 token
安全地审批敏感操作人在回路
在一次运行处于活动状态时提交工作消息队列
离开并返回长时间运行的工作接入与重新接入流
从更早的一轮编辑或重试分支对话 和 时间旅行
将状态渲染为应用，而不是聊天结构化输出、生成式界面 和 Deep Agents 前端模式

集成 ​

流式 API 与界面无关。你可以将其与任何组件库或生成式界面框架一起使用。组件库可以负责展示层，而 LangChain 的 SDK 负责底层智能体运行时状态、可恢复性、中断和检查点语义。

  • AI Elements — 用于 AI 聊天的可组合 shadcn/ui 组件：Conversation、Message、Tool、Reasoning。
  • assistant-ui — 无头 React 框架，内置线程管理、分支和附件支持。
  • OpenUI — 面向数据密集型报告和仪表盘的生成式界面库，使用 openui-lang 组件 DSL。