> ## 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) is UI-agnostic. It returns plain reactive state with messages, tool calls, loading flags, and thread history that you wire to any visual layer you choose. These pages show how different libraries integrate with LangChain frontends, each with a different philosophy for building AI chat and generative UI.

## 集成

<CardGroup cols={2}>
  <Card title="CopilotKit" icon="package" href="/oss/python/langchain/frontend/integrations/copilotkit">
    Full AI chat runtime with structured generative UI support. Add a custom CopilotKit endpoint to your LangGraph deployment, then render dynamic component trees in React.
  </Card>

  <Card title="AI Elements" icon="package" href="/oss/python/langchain/frontend/integrations/ai-elements">
    Composable shadcn/ui-based components for AI chat. Drop in `Conversation`, `Message`, `Tool`, and `Reasoning` and wire them directly to `stream.messages`.
  </Card>

  <Card title="assistant-ui" icon="package" href="/oss/python/langchain/frontend/integrations/assistant-ui">
    Headless React framework with a full runtime layer. Bridge `useStream` to `AssistantRuntimeProvider` via the `useExternalStoreRuntime` adapter.
  </Card>

  <Card title="OpenUI" icon="package" href="/oss/python/langchain/frontend/integrations/openui">
    Generative UI library that lets the agent produce complete, interactive dashboards in a declarative component DSL. Purpose-built for data-rich, report-style UIs.
  </Card>
</CardGroup>

## 选择库

Each library fits a slightly different integration model. The choice depends on what kind of UI you're building:

|                   | CopilotKit                                                     | AI Elements                          | assistant-ui                          | OpenUI                                              |
| ----------------- | -------------------------------------------------------------- | ------------------------------------ | ------------------------------------- | --------------------------------------------------- |
| **Best for**      | Full chat runtime plus structured generative UI                | Chat with rich message types         | Full-featured chat with minimal setup | Generated dashboards and reports                    |
| **UI style**      | CopilotKit chat shell + custom message renderers               | Composable shadcn/ui components      | Headless slots + default theme        | Prebuilt component library with declarative DSL     |
| **Customisation** | Custom backend endpoint, agent context, and renderers          | Edit source files directly           | Override component slots              | Theme via CSS custom properties                     |
| **Streaming UX**  | Runtime-managed chat stream with structured assistant payloads | Component-level progressive render   | Built-in thread management            | Hoisting — shell appears immediately, data fills in |
| **Tool calls**    | Via CopilotKit runtime and custom renderers                    | `Tool` / `ToolHeader` / `ToolOutput` | Custom via message slots              | Inline in the generated UI                          |
| **Agent format**  | Structured assistant responses plus optional Markdown          | Any `stream.messages`                | Any `stream.messages`                 | Agent outputs openui-lang text                      |

All four work well with LangChain agents, and the latter three also connect directly to [`useStream`](https://reference.langchain.com/javascript/langchain-react/index/useStream). CopilotKit is especially useful when you want a richer runtime layer and a dedicated endpoint that can sit alongside a [LangGraph](/oss/python/langgraph/overview) deployment.

***

<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) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose).
  </Callout>
</div>