Skip to main content
为使用 createAgent 创建的代理构建丰富的交互式前端。这些模式涵盖了从基本消息渲染到高级工作流的所有内容，例如人机回圈审批和时间旅行调试。

​
架构

每个模式都遵循相同的架构：一个 createAgent 后端通过 useStream 钩子将状态流式传输到前端。 在后端，createAgent 生成一个编译后的 LangGraph 图，该图暴露了一个流式 API。在前端，useStream 钩子连接到该 API 并提供反应式状态——消息、工具调用、中断、历史记录等——您可以使用任何框架进行渲染。 
import { createAgent } from "langchain";
import { MemorySaver } from "@langchain/langgraph";

const agent = createAgent({
  model: "openai:gpt-5.4",
  tools: [getWeather, searchWeb],
  checkpointer: new MemorySaver(),
});
useStream 可用于 React、Vue、Svelte 和 Angular： 
import { useStream } from "@langchain/react";   // React
import { useStream } from "@langchain/vue";      // Vue
import { useStream } from "@langchain/svelte";   // Svelte
import { useStream } from "@langchain/angular";  // Angular

​
模式

​
渲染消息和输出

Markdown 消息

解析并渲染流式传输的 Markdown，包含适当的格式和代码高亮。

结构化输出

将类型化代理响应渲染为自定义 UI 组件，而不是纯文本。

推理令牌

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

生成式 UI

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

​
显示代理操作

工具调用

以丰富的、类型安全的 UI 卡片显示工具调用，包含加载和错误状态。

人机回圈

暂停代理以进行人工审查，包含批准、拒绝和编辑工作流。

​
管理对话

分支聊天

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

消息队列

在代理顺序处理它们时对多个消息进行排队。

​
高级流式传输

连接和重新连接流

断开并重新连接到正在运行的代理流，而不会丢失进度。

时间旅行

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

​
集成

useStream 与 UI 无关。可将其用于任何组件库或生成式 UI 框架。

AI Elements

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

assistant-ui

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

OpenUI

用于数据丰富报告和仪表板的生成式 UI 库，使用 openui-lang 组件 DSL。
在 GitHub 上编辑此页面 或 提交问题。
通过 MCP 将这些文档连接到 Claude、VSCode 等 以获取实时答案。