assistant-ui--assistant-ui/packages/react

Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

产品 · 文档 · 示例 · Discord · 联系销售

在 React 应用中实现 ChatGPT 级用户体验 💬🚀

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 (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

useChatRuntime 开箱即用即可连接 Vercel AI SDK。可将其替换为 useLangGraphRuntime、useDataStreamRuntime，或任意自定义 runtime，以接入你自己的后端。

你将获得

• 可组合原语（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 风格界面：

生产环境用户

, , , , , , , , , ，以及更多。

演示

社区与支持

• 示例
• 文档
• Discord
• 预约销售通话

其他平台

• React Native：@assistant-ui/react-native
• Terminal (Ink)：@assistant-ui/react-ink

许可证

MIT，可选使用 Assistant Cloud 以获取托管的线程持久化（thread persistence）与数据分析能力。

由 Y Combinator 孵化支持。