assistant-ui--assistant-ui
wehub-resource-sync
143 行
9.2 KiB
Markdown
143 行
9.2 KiB
Markdown
<!-- WEHUB_ZH_README -->
|
||
> [!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 文件为准。
|
||
|
||
<a href="https://www.assistant-ui.com">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/header-dark.svg" />
|
||
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/header.svg" />
|
||
<img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/header.svg" alt="assistant-ui Header" width="100%" />
|
||
</picture>
|
||
</a>
|
||
|
||
<p align="center">
|
||
<a href="https://www.assistant-ui.com">产品</a> ·
|
||
<a href="https://www.assistant-ui.com/docs">文档</a> ·
|
||
<a href="https://www.assistant-ui.com/examples">示例</a> ·
|
||
<a href="https://discord.gg/S9dwgCNEFs">Discord</a> ·
|
||
<a href="https://cal.com/simon-farshid/assistant-ui">联系销售</a>
|
||
</p>
|
||
|
||
[](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 (
|
||
<AssistantRuntimeProvider runtime={runtime}>
|
||
<Thread />
|
||
</AssistantRuntimeProvider>
|
||
);
|
||
}
|
||
```
|
||
|
||
`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 风格界面：
|
||
|
||
|
||
|
||
## 生产环境用户
|
||
|
||
<a href="https://mastra.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Mastra.svg" height="20" alt="Mastra"></a>, <a href="https://langchain.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/LangChain.svg" height="20" alt="LangChain"></a>, <a href="https://athenaintelligence.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Athena-Intelligence.svg" height="20" alt="Athena Intelligence"></a>, <a href="https://browser-use.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Browser-Use.svg" height="20" alt="Browser Use"></a>, <a href="https://stack-ai.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Stack.svg" height="20" alt="Stack"></a>, <a href="https://inconvo.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Inconvo.svg" height="20" alt="Inconvo"></a>, <a href="https://iterable.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Iterable.svg" height="20" alt="Iterable"></a>, <a href="https://helicone.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/helicone.svg" height="20" alt="Helicone"></a>, <a href="https://getgram.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/gram.svg" height="20" alt="Gram"></a>, <a href="https://coreviz.io/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Coreviz.svg" height="20" alt="Coreviz"></a>，以及更多。
|
||
|
||
|
||
|
||
## 演示
|
||
|
||
<table>
|
||
<tr>
|
||
<td align="center">
|
||
<a href="https://youtu.be/ZW56UHlqTCQ">
|
||
<img src="https://img.youtube.com/vi/ZW56UHlqTCQ/hqdefault.jpg" alt="短视频演示" />
|
||
</a>
|
||
</td>
|
||
<td align="center">
|
||
<a href="https://youtu.be/9eLKs9AM4tU">
|
||
<img src="https://img.youtube.com/vi/9eLKs9AM4tU/hqdefault.jpg" alt="长视频演示" />
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
## 社区与支持
|
||
|
||
- [示例](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 孵化支持。
|