> ## Documentation Index
> Fetch the complete documentation index at: https://cndoc-langchain.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 概述

> 将 useStream 连接到任何 React UI 组件库或生成式 UI 框架

[`useStream`](https://reference.langchain.com/javascript/langchain-react/index/useStream) 与 UI 无关。它返回包含消息、工具调用、加载标志和线程历史的纯响应式状态，您可以将其连接到您选择的任何视觉层。这些页面展示了不同的库如何与 LangChain 前端集成，每个库在构建 AI 聊天和生成式 UI 方面都有不同的理念。

## 集成

<CardGroup cols={2}>
  <Card title="CopilotKit" icon="package" href="/oss/python/langchain/frontend/integrations/copilotkit">
    具有结构化生成式 UI 支持的完整 AI 聊天运行时。将自定义的 CopilotKit 端点添加到您的 LangGraph 部署中，然后在 React 中渲染动态组件树。
  </Card>

  <Card title="AI Elements" icon="package" href="/oss/python/langchain/frontend/integrations/ai-elements">
    基于 shadcn/ui 的可组合 AI 聊天组件。直接使用 `Conversation`、`Message`、`Tool` 和 `Reasoning`，并将它们直接连接到 `stream.messages`。
  </Card>

  <Card title="assistant-ui" icon="package" href="/oss/python/langchain/frontend/integrations/assistant-ui">
    带有完整运行时层的无头 React 框架。通过 `useExternalStoreRuntime` 适配器将 `useStream` 桥接到 `AssistantRuntimeProvider`。
  </Card>

  <Card title="OpenUI" icon="package" href="/oss/python/langchain/frontend/integrations/openui">
    生成式 UI 库，允许代理在声明式组件 DSL 中生成完整的交互式仪表板。专为数据丰富、报告风格的 UI 而构建。
  </Card>
</CardGroup>

## 选择库

每个库都适用于略有不同的集成模型。选择取决于您正在构建的 UI 类型：

|            | CopilotKit                 | AI Elements                          | assistant-ui         | OpenUI              |
| ---------- | -------------------------- | ------------------------------------ | -------------------- | ------------------- |
| **最适合**    | 完整的聊天运行时加上结构化生成式 UI        | 具有丰富消息类型的聊天                          | 功能齐全且设置最少的聊天         | 生成的仪表板和报告           |
| **UI 风格**  | CopilotKit 聊天外壳 + 自定义消息渲染器 | 可组合的 shadcn/ui 组件                    | 无头插槽 + 默认主题          | 带有声明式 DSL 的预构建组件库   |
| **自定义**    | 自定义后端端点、代理上下文和渲染器          | 直接编辑源文件                              | 覆盖组件插槽               | 通过 CSS 自定义属性设置主题    |
| **流式用户体验** | 运行时管理的聊天流，带有结构化助手负载        | 组件级渐进式渲染                             | 内置线程管理               | 提升——外壳立即出现，数据随后填充   |
| **工具调用**   | 通过 CopilotKit 运行时和自定义渲染器   | `Tool` / `ToolHeader` / `ToolOutput` | 通过消息插槽自定义            | 内联在生成的 UI 中         |
| **代理格式**   | 结构化助手响应加上可选的 Markdown      | 任何 `stream.messages`                 | 任何 `stream.messages` | 代理输出 openui-lang 文本 |

所有四种方式都能很好地与 LangChain 代理配合使用，后三种还可以直接连接到 [`useStream`](https://reference.langchain.com/javascript/langchain-react/index/useStream)。当您需要更丰富的运行时层和可以与 [LangGraph](/oss/python/langgraph/overview) 部署并行的专用端点时，CopilotKit 特别有用。

***

<div className="source-links">
  <Callout icon="terminal-2">
    [连接这些文档](/use-these-docs) 到 Claude、VSCode 等，通过 MCP 获取实时答案。
  </Callout>

  <Callout icon="edit">
    [在 GitHub 上编辑此页面](https://github.com/langchain-ai/docs/edit/main/src/oss/langchain/frontend/integrations/overview.mdx) 或 [提交问题](https://github.com/langchain-ai/docs/issues/new/choose)。
  </Callout>
</div>