assistant-ui

用 React 组件快速搭建专业 AI 聊天界面，开箱即用。

开源 🏷️基础免费，高级付费 ✅ 目前可打开对话助手 🍴 复刻 1319 🐛 待处理 47 👀 关注 81

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 13025

维护状态活跃

是否开源开源

定价模式 🏷️基础免费，高级付费开源库免费，官网提供在线演示和文档，可能有付费托管或高级功能。

项目预览

项目数据

分类对话助手

开发团队assistant-ui

官网地址https://www.assistant-ui.com

GitHubhttps://github.com/assistant-ui/assistant-ui

定价模式🏷️基础免费，高级付费

价格说明开源库免费，官网提供在线演示和文档，可能有付费托管或高级功能。

访问状态✅ 目前可打开

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型ai-chatbot,base-ui,chatbot,conversational-ai,copilot,radix-ui,react-chatbot,shadcn,ui-components,vercel-ai-sdk

GitHub 星标★ 13025

上线时间2023-11-22 00:00:00

代码更新2026-11-09

仓库体积194.0 MB

本站数据更新2026-11-09

维护状态活跃

收录时间2026-08-09

浏览次数6

项目介绍

assistant-ui 是一个基于 TypeScript 和 React 的 AI 聊天界面组件库，专为快速构建对话式 AI 应用而设计。它解决了开发者从零搭建聊天 UI 的痛点，提供了高度可定制的聊天组件、流式消息渲染、工具调用展示等核心能力。基于 Radix UI 和 shadcn 的设计体系，组件风格现代且无障碍支持良好。与 Vercel AI SDK 深度集成，支持多种模型提供商，并内置了 Copilot 模式、对话管理、消息持久化等高级功能，帮助开发者将更多精力放在业务逻辑而非界面细节上。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 13025

技术标签

ai-chatbot chatbot conversational-ai copilot shadcn

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：入门约 10 分钟部署方式：库/依赖 5 步

环境要求

Node.js 环境（README 使用 npx/npm 命令）
使用 npm 作为包管理器
已有 React 项目，或通过 CLI 自动生成的 Next.js 项目
需要 Vercel AI SDK 配合 useChatRuntime 使用

安装与启动步骤

1创建新项目

在空目录执行 CLI，自动脚手架出一个带聊天界面的 Next.js 应用，这是官方推荐的最快路径。
```
npx assistant-ui@latest create
```
2接入已有项目

已有 Next.js 项目时改用 init，将带样式的聊天组件加入现有工程，而不是新建项目。
```
npx assistant-ui@latest init
```
3手动安装依赖

不想用 CLI 时，直接安装核心 React 包与 Vercel AI SDK 适配包，组件样式需自行接入。
```
npm install @assistant-ui/react @assistant-ui/ai-sdk
```

4编写聊天组件

在客户端组件中调用 useChatRuntime 创建 runtime，再用 Provider 包裹 Thread 组件渲染界面。

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export function Chat() {
  const runtime = useChatRuntime();
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

5更换运行时

useChatRuntime 默认对接 Vercel AI SDK；要接自建后端可换成其他 runtime 或自定义 runtime。

如何确认成功

组件渲染出 Thread 聊天界面且无报错，发送消息后能通过所选 runtime 返回流式回复。

常见问题

Q：create 和 init 有什么区别？

A：create 用于生成一个全新的 Next.js 项目；init 用于向已有的现有项目添加 assistant-ui 的带样式组件。

Q：可以不用 CLI 吗？

A：可以。README 提供了直接安装方式：npm install @assistant-ui/react @assistant-ui/ai-sdk，然后自行在代码中接入组件。

Q：怎么对接自己的后端模型服务？

A：把 useChatRuntime 换成 useLangGraphRuntime、useDataStreamRuntime，或按需求实现任意自定义 runtime。

Q：需要配置模型 API Key 吗？

A：README 未涉及密钥配置，模型接入由 Vercel AI SDK 一侧负责，请参考对应的 AI SDK 文档。

注意事项

README 未给出 Node.js 版本要求，建议使用较新的 LTS 版本。
示例中 Thread 的路径 @/components/assistant-ui/elements/thread.aui 由 CLI 生成，手动安装时需自行确认路径。
README 未提供端口、环境变量等启动参数说明，具体以脚手架生成的项目为准。