assistant-ui/assistant-ui
GitHub: assistant-ui/assistant-ui
一个用于在 React 应用中快速构建类似 ChatGPT 的生产级 AI 聊天体验的 TypeScript 组件库。
Stars: 10631 | Forks: 1065
产品 ·
文档 ·
示例 ·
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 的 UX 💬🚀
**assistant-ui** 是一个开源的 TypeScript/React 库，用于快速构建生产级的 AI 聊天体验。
## 安装
最快的方式是使用 CLI，它可以为 Next.js 应用搭建基础架构，或者将带有样式的组件添加到现有项目中：
```
npx assistant-ui@latest create # new project
npx assistant-ui@latest init # add to existing project
```
或者直接安装这些包：
```
npm install @assistant-ui/react @assistant-ui/react-ai-sdk
```
## 用法
```
"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)
## 你将获得什么
- **可组合的基础组件**：通过 `Thread`、`Message`、`Composer`、`ThreadList`、`ActionBar` 等组件构建任何聊天 UX。你可以为每个像素自定义样式，或者直接使用 CLI 复制到项目中的精美 shadcn/ui 主题。
- **开箱即用的生产级 UX**：支持流式传输、自动滚动、重试、附件、markdown、代码高亮、语音听写、键盘快捷键以及无障碍访问。
- **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 后端。
## 自定义
Radix 风格：你无需使用单一的整体聊天组件，而是组合基础组件并应用你自己的样式。CLI 提供了一个很棒的起步模板；其余的一切都由你掌控。
制作 Perplexity 外观克隆的示例自定义：
## 在生产环境中使用
,
,
,
,
,
,
,
,
,
, 以及更多。
## 演示
## 对于其他平台
- React Native：[`@assistant-ui/react-native`](https://www.npmjs.com/package/@assistant-ui/react-native)
- 终端 (Ink)：[`@assistant-ui/react-ink`](https://www.npmjs.com/package/@assistant-ui/react-ink)
## 许可证
MIT，可选使用 Assistant Cloud 来实现托管的线程持久化和分析。
由 Y Combinator 支持。
标签：AI聊天, React, Syscalls, TypeScript, UI组件库, 人工智能, 安全插件, 用户模式Hook绕过, 自动化攻击
