assistant-ui/assistant-ui

assistant‑ui

它是什么 – 一个开源的 TypeScript/React 组件库，让你能在 Web 应用中添加功能完整、生产就绪的 AI 助手聊天 UI（ChatGPT 风格）。

核心概念 – 提供可组合的 UI 原语（Thread、Message、Composer、ActionBar 等），以及一个连接到任何 LLM 后端（Vercel AI SDK、LangChain/LangGraph、自定义数据流等）的运行时提供者。该库处理流式传输、Markdown、代码高亮、语音听写、重试、无障碍性，以及一个可以将工具调用、JSON 和内联批准渲染为 React 组件的“生成式 UI”层。

主要功能

• 可组合原语 – 从低层部分构建聊天 UI，或使用 CLI 附带的预样式 shadcn/ui 主题。
• 后端无关的运行时 – 内置 Vercel AI SDK、LangChain、LangGraph、AG‑UI/A2A、Google ADK、OpenCode 的适配器，以及通用数据流接口。使用单个 hook（useChatRuntime、useLangGraphRuntime 等）即可切换运行时。
• 生产级 UX – 流式响应、自动滚动、重试处理、文件附件、Markdown 渲染、语法高亮的代码块、语音听写、键盘快捷键，以及 WCAG 兼容的无障碍性。
• 生成式 UI – 将工具调用（例如 get_weather）或 JSON 负载转换为自定义 React 组件，收集用户批准，并向模型公开安全的前端操作。
• 强类型 TypeScript – 为运行时、工具架构和消息部分提供端到端类型化 API。
• CLI 脚手架 – npx assistant-ui@latest create 创建 Next.js 入门项目；init 将样式化组件注入现有项目。
• 托管云选项 – 可选的 assistant‑cloud 服务，用于线程持久化、遥测和文件存储。

典型使用案例

• 在 SaaS 仪表板中构建客户支持聊天机器人。
• 为调用外部工具（搜索、预订、数据查询）的产品添加对话式界面。
• 为需要工具结果自定义 UI（例如天气卡片、表格、批准对话框）的 AI 驱动助手进行原型设计。
• 将 LLM 后端（OpenAI、Anthropic、Gemini、Mistral、Bedrock、Ollama 等）集成到 React 前端，而无需编写 UI 管道。

安装

# 快速开始 – 创建新的 Next.js 应用
npx assistant-ui@latest create
# 或添加到现有项目
npx assistant-ui@latest init

# 或手动安装包
npm install @assistant-ui/react @assistant-ui/ai-sdk ai

基本用法

"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(); // 默认连接到 Vercel AI SDK
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

将 useChatRuntime 替换为任何其他运行时 hook，即可将 UI 指向不同的后端。

许可证 – MIT。提供商业化的“Assistant Cloud”服务，用于托管线程存储和分析，但核心库保持免费和开源。

支持者 – Y Combinator；被 Mastra、LangChain、Athena Intelligence、Browser‑Use、Stack、Inconvo、Iterable、Helicone、Gram、Coreviz 等公司使用。