概览

使用来自 LangChain 智能体的实时流式输出构建生成式 UI

为使用 createAgent 创建的智能体构建丰富的交互式前端。这些模式涵盖了从基本消息渲染到高级工作流（如人机协作审批和时间旅行调试）的所有内容。

架构

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

在后端，createAgent 生成一个编译的 LangGraph 图，暴露流式 API。在前端，useStream hook 连接到该 API，提供响应式状态——消息、工具调用、中断、历史等——您可以使用任何框架进行渲染。

agent.ts

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 组件，而非纯文本。

推理 Token

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

生成式 UI

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

显示智能体操作

工具调用

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

人机协作

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

管理对话

分支对话

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

消息队列

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

高级流式输出

加入和重新加入流

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

时间旅行

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

集成

useStream 与 UI 无关。可以将其连接到任何组件库或生成式 UI 框架。

AI Elements

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

assistant-ui

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

OpenUI

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

---

将这些文档连接到 Claude、VSCode 等工具，通过 MCP 获取实时答案。

在 GitHub 上编辑此页面 或 提交问题。