为使用 createAgent 创建的代理构建丰富的交互式前端。这些模式涵盖从基础消息渲染到高级工作流的一切，包括人在环路审批、队列提交、持久流重连和时间旅行调试。 LangChain 前端 SDK 面向代理应用构建，而不仅是 token 流式聊天机器人。用于渲染消息的同一个 hook 也会暴露代理的持久线程状态、工具调用生命周期、中断、checkpoint 历史和自定义状态值，因此你的 UI 可以成为长时间运行代理工作的控制平面。
这些模式使用 v1 前端 SDK 包。如果你使用的是早期版本，请参阅 React、Vue、Svelte 和 Angular 的迁移指南。

​
架构

每种模式都遵循相同架构：createAgent 后端通过 SDK stream API 将状态流式传输到前端。 在后端，createAgent 会生成一个已编译的 LangGraph 图，并暴露流式 API。在前端，stream handle 连接到该 API，并提供响应式状态，包括消息、工具调用、中断、值和线程元数据，你可以用任何框架渲染这些状态。

​
为什么使用 LangChain 前端 SDK？

多数 AI UI 库会帮助你把流式文本追加到聊天记录中。LangChain 的 SDK 暴露了生产代理所需的更丰富运行时语义：
能力它在 UI 中支持什么
持久线程重新加载页面、切换设备或重新加入运行时，不丢失对话状态。
类型化代理状态渲染任何状态键，而不仅是消息：待办事项、管道输出、引用、沙箱文件、指标或自定义业务对象。
工具调用生命周期将待处理、已完成和失败的工具调用显示为专门 UI 卡片，而不是原始 JSON。
中断暂停执行以进行人工审批、编辑或补充缺失信息，然后从代理停止的确切位置恢复。
Checkpoints基于持久化状态快照构建编辑、重试、分支、审计和时间旅行流程。
嵌套执行可视化 deep agents、子代理和图节点，而不必把所有内容压平成一个不可读的流。
框架原生响应式在 React、Vue、Svelte 或 Angular 中使用相同协议，同时保留惯用 hooks、composables、stores 或 signals。
这些基础能力让你可以设计这样的 UI：用户能在代理工作进行中检查、引导、暂停、恢复和 fork 代理工作。 
from langchain import create_agent
from langgraph.checkpoint.memory import MemorySaver

agent = create_agent(
    model="openai:gpt-5.4",
    tools=[get_weather, search_web],
    checkpointer=MemorySaver(),
)
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 和其他响应式状态。 定义一个与代理状态 schema 匹配的 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 组件，而不是纯文本。

推理 token

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

生成式 UI

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

​
显示代理动作

工具调用

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

人在环路

通过批准、拒绝和编辑工作流暂停代理以供人工审查。

​
管理对话

分支聊天

编辑消息、重新生成响应并浏览对话分支。

消息队列

在代理顺序处理消息时，将多条消息放入队列。

​
高级流式传输

加入和重新加入流

与正在运行的代理流断开并重新连接，同时不丢失进度。

时间旅行

检查、浏览对话历史中的任何 checkpoint，并从中恢复。

​
选择前端模式

从应用需要回答的 UX 问题开始：
如果用户需要…从这里开始
理解代理正在做什么工具调用和推理 token
安全审批敏感动作人在环路
在运行活动时发送工作消息队列
离开并返回长时间运行的工作加入和重新加入流
从更早轮次编辑或重试分支聊天和时间旅行
将状态渲染为应用，而不是聊天结构化输出、生成式 UI和 Deep Agents 前端模式

​
集成

stream API 与 UI 无关。你可以将它与任何组件库或生成式 UI 框架搭配使用。组件库可以负责展示层，而 LangChain SDK 负责底层代理运行时状态、可恢复性、中断和 checkpoint 语义。

AI Elements

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

assistant-ui

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

OpenUI

使用 openui-lang 组件 DSL 的生成式 UI 库，用于数据丰富的报告和仪表板。
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.
Edit this page on GitHub or file an issue.