> ## Documentation Index
> Fetch the complete documentation index at: https://nvd-54.mintlify.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/javascript/langchain/frontend/integrations/copilotkit">
    完整的 AI 聊天运行时，支持结构化生成式 UI。将自定义 CopilotKit 端点添加到您的 LangGraph 部署中，然后在 React 中渲染动态组件树。
  </Card>

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

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

  <Card title="OpenUI" icon="package" href="/oss/javascript/langchain/frontend/integrations/openui">
    生成式 UI 库，让智能体能够以声明式组件 DSL 生成完整的交互式仪表板。专为数据丰富的报告式 UI 构建。
  </Card>
</CardGroup>

## 选择库

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

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

这四个库都与 LangChain 智能体配合良好，后三个还可以直接连接到 [`useStream`](https://reference.langchain.com/javascript/langchain-react/index/useStream)。CopilotKit 在您想要更丰富的运行时层和可以与 [LangGraph](/oss/javascript/langgraph/overview) 部署并置的专用端点时特别有用。

***

<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>