> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
> [English](./README.en.md) · [原始项目](https://github.com/assistant-ui/assistant-ui) · [上游 README](https://github.com/assistant-ui/assistant-ui/blob/HEAD/README.md)
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
产品 ·
文档 ·
示例 ·
Discord ·
联系销售
[](https://www.npmjs.com/package/@assistant-ui/react)
[](https://www.npmjs.com/package/@assistant-ui/react)
[](https://deepwiki.com/assistant-ui/assistant-ui)
[](https://app.workweave.ai/reports/repository/org_GhSIrtWo37b5B3Mv0At3wQ1Q/722184017)
[](https://github.com/assistant-ui/assistant-ui)
## 在 React 应用中实现 ChatGPT 级用户体验 💬🚀
**assistant-ui** 是一款开源 TypeScript/React 库，可快速构建生产级 AI 聊天体验。
## 安装
最快的方式是使用 CLI，它可以脚手架生成 Next.js 应用，或将带样式的组件添加到现有项目中：
```bash
npx assistant-ui@latest create # new project
npx assistant-ui@latest init # add to existing project
```
或直接安装相关包：
```bash
npm install @assistant-ui/react @assistant-ui/react-ai-sdk
```
## 使用
```tsx
"use client";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { Thread } from "@/components/assistant-ui/thread";
export function Chat() {
const runtime = useChatRuntime();
return (
);
}
```
`useChatRuntime` 开箱即用即可连接 Vercel AI SDK。可将其替换为 `useLangGraphRuntime`、`useDataStreamRuntime`，或任意自定义 runtime，以接入你自己的后端。
[](https://youtu.be/k6Dc8URmLjk)
## 你将获得
- **可组合原语（Composable primitives）**：从 `Thread`、`Message`、`Composer`、`ThreadList`、`ActionBar` 等组件出发，构建任意聊天 UX。可自行定制每一处像素，或从 CLI 复制到项目中的精美 shadcn/ui 主题起步。
- **开箱即用的生产级 UX**：流式输出、自动滚动、重试、附件、Markdown、代码高亮、语音听写、键盘快捷键和可访问性（accessibility）。
- **生成式 UI（Generative UI）**：将 tool calls 和 JSON 渲染为 React 组件，收集行内人工审批，并向模型暴露安全的前端操作。
- **完善的 TypeScript 支持**：端到端类型化的 runtime API、tool schema、消息片段（message parts）和适配器。
## 后端
| 集成 | 包 |
| -------------------------------------- | ---------------------------------------------------------------- |
| Vercel AI SDK | `@assistant-ui/react-ai-sdk` |
| LangGraph / LangChain | `@assistant-ui/react-langgraph`, `@assistant-ui/react-langchain` |
| AG-UI / A2A 协议 | `@assistant-ui/react-ag-ui`, `@assistant-ui/react-a2a` |
| Google ADK / OpenCode | `@assistant-ui/react-google-adk`, `@assistant-ui/react-opencode` |
| 自定义数据流后端 | `@assistant-ui/react-data-stream` |
| 托管的线程历史、遥测和文件存储 | `assistant-cloud` |
开箱即用广泛支持多种模型（OpenAI、Anthropic、Google Gemini、Mistral、Perplexity、AWS Bedrock、Azure、Fireworks、Ollama），还可通过 AI SDK 使用社区提供商，并易于扩展至任意自定义 HTTP 后端。
## 自定义
与其使用单一的整体聊天组件，不如组合原语并自带样式。CLI 提供出色的入门模板，可选 Base UI（默认）或 Radix UI 风格；其余一切由你掌控。
示例自定义：打造 Perplexity 风格界面：
## 生产环境用户
, 
, 
, 
, 
, 
, 
, 
, 
, 
，以及更多。
## 演示
## 社区与支持
- [示例](https://www.assistant-ui.com/examples)
- [文档](https://www.assistant-ui.com/docs/)
- [Discord](https://discord.com/invite/S9dwgCNEFs)
- [预约销售通话](https://cal.com/simon-farshid/assistant-ui)
## 其他平台
- React Native：[`@assistant-ui/react-native`](https://www.npmjs.com/package/@assistant-ui/react-native)
- Terminal (Ink)：[`@assistant-ui/react-ink`](https://www.npmjs.com/package/@assistant-ui/react-ink)
## 许可证
MIT，可选使用 Assistant Cloud 以获取托管的线程持久化（thread persistence）与数据分析能力。
由 Y Combinator 孵化支持。
