概述 - Docs by LangChain中文

为使用 createAgent 创建的智能体构建丰富、交互式的前端。这些模式涵盖了从基本消息渲染到高级工作流的所有内容，例如人类在环审批、队列提交、持久化流重连和时间旅行调试。 LangChain 前端 SDK 专为 智能体应用 而构建，而不仅仅是流式聊天机器人。渲染消息的同一个钩子也暴露了智能体的持久化线程状态、工具调用生命周期、中断、检查点历史和自定义状态值，因此您的用户界面可以成为长期运行的智能体工作的控制平面。

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

架构

每个模式都遵循相同的架构：一个 createAgent 后端通过 SDK 流 API 将状态流式传输到前端。在后端，createAgent 生成一个编译好的 LangGraph 图，该图暴露了一个流 API。在前端，流句柄连接到该 API 并提供响应式状态——消息、工具调用、中断、值和线程元数据——您可以使用任何框架进行渲染。

为什么使用 LangChain 前端 SDK？

大多数 AI UI 库帮助您将流式文本附加到聊天记录中。LangChain 的 SDK 暴露了生产级智能体所需的更丰富的运行时语义：

能力	它使您的 UI 能够做什么
持久化线程	重新加载页面、切换设备或重新加入运行而不丢失对话状态。
类型化的智能体状态	渲染任何状态键，而不仅仅是消息：待办事项、管道输出、引用、沙盒文件、指标或自定义业务对象。
工具调用生命周期	以专用 UI 卡片的形式显示待处理、已完成和失败的工具调用，而不是原始 JSON。
中断	暂停执行以进行人工审批、编辑或补充缺失信息，然后从智能体停止的确切点恢复。
检查点	从持久化的状态快照构建编辑、重试、分支、审计和时间旅行流程。
嵌套执行	可视化深层智能体、子智能体和图节点，而无需将所有内容扁平化为一个难以阅读的流。
框架原生响应性	在使用 React、Vue、Svelte 或 Angular 时使用相同的协议，同时保留惯用的钩子、组合式、存储或信号。

这些原语使您能够设计 UI，让用户在智能体工作进行中可以检查、引导、暂停、恢复和分叉该工作。

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(),
)

export interface GraphState {
  messages: BaseMessage[];
}

import { useStream } from "@langchain/react";
import type { GraphState } from "./types";

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

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

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

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 和其他响应式状态。定义一个与您的智能体状态模式匹配的 TypeScript 接口，并将其作为类型参数传递：

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）。如果您的智能体暴露了自定义状态键，请扩展该接口：

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

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

模式

渲染消息和输出

Markdown 消息

解析并渲染带有正确格式和代码高亮的流式 Markdown。

结构化输出

将类型化的智能体响应渲染为自定义 UI 组件，而不是纯文本。

推理令牌

在可折叠块中显示模型的思考过程。

生成式 UI

使用 json-render 从自然语言提示渲染 AI 生成的用户界面。

显示智能体动作

工具调用

将工具调用显示为丰富、类型安全的 UI 卡片，带有加载和错误状态。

无头工具

在客户端运行浏览器和设备 API，同时在智能体端保持类型化的工具模式。

人类在环

暂停智能体以进行人工审查，支持批准、拒绝和编辑工作流。

管理对话

分支聊天

编辑消息、重新生成响应，并导航对话分支。

消息队列

在智能体顺序处理消息时，将多条消息排队。

高级流式传输

加入和重连流

断开并重新连接到正在运行的智能体流，而不丢失进度。

时间旅行

检查、导航并从对话历史中的任何检查点恢复。

选择前端模式

从您的应用需要解决的用户体验问题出发：

如果用户需要…	从这里开始
理解智能体正在做什么	工具调用和推理令牌
安全地批准敏感操作	人类在环
在运行活跃时发送工作	消息队列
离开后重新加入长期运行的工作	加入和重连流
从较早的轮次进行编辑或重试	分支聊天和时间旅行
将状态渲染为应用程序，而不是聊天	结构化输出、生成式 UI 和深层智能体前端模式

集成

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

AI Elements

用于 AI 聊天的可组合 shadcn/ui 组件：Conversation、Message、Tool、Reasoning。

assistant-ui

无头 React 框架，内置线程管理、分支和附件支持。

OpenUI

用于数据丰富报告和仪表板的生成式 UI 库，使用 openui-lang 组件 DSL。

Connect these docs to Claude, VSCode, and more via MCP for real-time answers.

Edit this page on GitHub or file an issue.

Get started

Core components

Middleware

Frontend

Advanced usage

Agent development

Production

概述

架构

为什么使用 LangChain 前端 SDK？

类型推断

模式

渲染消息和输出

Markdown 消息

结构化输出

推理令牌

生成式 UI

显示智能体动作

工具调用

无头工具

人类在环

管理对话

分支聊天

消息队列

高级流式传输

加入和重连流

时间旅行

选择前端模式

集成

AI Elements

assistant-ui

OpenUI

​架构

​为什么使用 LangChain 前端 SDK？

​类型推断

​模式

​渲染消息和输出

Markdown 消息

结构化输出

推理令牌

生成式 UI

​显示智能体动作

工具调用

无头工具

人类在环

​管理对话

分支聊天

消息队列

​高级流式传输

加入和重连流

时间旅行

​选择前端模式

​集成

AI Elements

assistant-ui

OpenUI

架构

为什么使用 LangChain 前端 SDK？

类型推断

模式

渲染消息和输出

显示智能体动作

管理对话

高级流式传输

选择前端模式

集成