外观
useStream 与界面(UI)无关。它返回包含消息、工具调用、加载标志、值以及线程元数据的纯响应式状态,你可以将其连接到所选定的任意可视化层。这些页面展示不同库如何与 LangChain 前端集成,每个库在构建 AI 聊天和生成式 UI 时都采用不同的理念。
集成
- CopilotKit — 支持结构化生成式 UI 的完整 AI 聊天运行时。将自定义 CopilotKit 端点添加到你的 LangGraph 部署中,然后在 React 中渲染动态组件树。
- AI Elements — 用于 AI 聊天的、可组合的基于 shadcn/ui 的组件。直接放入
Conversation、Message、Tool和Reasoning,并将它们直接连接到stream.messages。 - assistant-ui — 带有完整运行时层的无头(Headless)React 框架。通过
useExternalStoreRuntime适配器将useStream桥接到AssistantRuntimeProvider。 - OpenUI — 生成式 UI 库,让智能体能够以声明式组件 DSL 生成完整、可交互的仪表盘。专为数据密集型、报告风格的 UI 而设计。
选择库
每个库都适配略有不同的集成模型。选择取决于你正在构建的 UI 类型:
| CopilotKit | AI Elements | assistant-ui | OpenUI | |
|---|---|---|---|---|
| 最适合 | 完整聊天运行时加结构化生成式 UI | 带丰富消息类型的聊天 | 以最少配置实现功能完备的聊天 | 生成的仪表盘和报告 |
| UI 风格 | CopilotKit 聊天外壳加自定义消息渲染器 | 可组合的 shadcn/ui 组件 | 无头插槽加默认主题 | 带声明式 DSL 的预构建组件库 |
| 自定义 | 自定义后端端点、智能体上下文和渲染器 | 直接编辑源文件 | 覆盖组件插槽 | 通过 CSS 自定义属性设置主题 |
| 流式输出体验 | 运行时管理的聊天流,带结构化助手负载 | 组件级渐进式渲染 | 内置线程管理 | 提升式(hoisting)——外壳立即出现,数据随后填充 |
| 工具调用 | 通过 CopilotKit 运行时和自定义渲染器 | Tool / ToolHeader / ToolOutput | 通过消息插槽自定义 | 内联在生成的 UI 中 |
| 智能体格式 | 结构化助手响应加可选 Markdown | 任意 stream.messages | 任意 stream.messages | 智能体输出 openui-lang 文本 |
这四个库都能与 LangChain 智能体很好地配合,其中后三个还可以直接连接到 useStream。当你需要更丰富的运行时层以及一个可以与 LangGraph 部署并存的专用端点时,CopilotKit 尤其有用。