assistant-ui：React AI 聊天界面库，可组合原语，支持多运行时

assistant-ui by assistant-ui/skills

859 周安装量

11 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/assistant-ui/skills --skill assistant-ui

AI/机器学习开发 JavaScript 框架

🇨🇳中文介绍

assistant-ui

请始终查阅 assistant-ui.com/llms.txt 以获取最新的 API 信息。

用于构建 AI 聊天界面的 React 库，提供可组合的原语。

参考资料

./references/architecture.md -- 核心架构与分层系统
./references/packages.md -- 包概览与选择指南

使用场景

使用场景	最适合
从零开始构建聊天界面	对用户体验有完全控制权
已有 AI 后端	可连接到任何流式后端
自定义消息类型	工具、图像、文件、自定义部件
多线程应用	内置线程列表管理
生产环境应用	云端持久化、身份验证、分析

架构

    ┌─────────────────────────────────────────────────────────┐
    │                  UI Components (Primitives)             │
    │    ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
    └─────────────────────────┬───────────────────────────────┘
                              │
    ┌─────────────────────────▼───────────────────────────────┐
    │                   Context Hooks                         │
    │   useAui, useAuiState, useAuiEvent │
    └─────────────────────────┬───────────────────────────────┘
                              │
    ┌─────────────────────────▼───────────────────────────────┐
    │                    Runtime Layer                        │
    │  AssistantRuntime → ThreadRuntime → MessageRuntime      │
    └─────────────────────────┬───────────────────────────────┘
                              │
    ┌─────────────────────────▼───────────────────────────────┐
    │                   Adapters/Backend                      │
    │   AI SDK · LangGraph · Custom · Cloud Persistence       │
    └─────────────────────────────────────────────────────────┘

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

包	用途
`@assistant-ui/react`	UI 原语和钩子
`@assistant-ui/react-ai-sdk`	Vercel AI SDK v6 适配器
`@assistant-ui/react-langgraph`	LangGraph 适配器
`@assistant-ui/react-markdown`	Markdown 渲染
`assistant-stream`	流式协议
`assistant-cloud`	云端持久化

🇺🇸English

assistant-ui

Always consultassistant-ui.com/llms.txt for latest API.

React library for building AI chat interfaces with composable primitives.

References

./references/architecture.md -- Core architecture and layered system
./references/packages.md -- Package overview and selection guide

When to Use

Use Case	Best For
Chat UI from scratch	Full control over UX
Existing AI backend	Connects to any streaming backend
Custom message types	Tools, images, files, custom parts
Multi-thread apps	Built-in thread list management
Production apps	Cloud persistence, auth, analytics

Architecture

┌─────────────────────────────────────────────────────────┐
│                  UI Components (Primitives)             │
│    ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                   Context Hooks                         │
│   useAui, useAuiState, useAuiEvent │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                    Runtime Layer                        │
│  AssistantRuntime → ThreadRuntime → MessageRuntime      │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                   Adapters/Backend                      │
│   AI SDK · LangGraph · Custom · Cloud Persistence       │
└─────────────────────────────────────────────────────────┘

Pick a Runtime

Using AI SDK?
├─ Yes → useChatRuntime (recommended)
└─ No
   ├─ External state (Redux/Zustand)? → useExternalStoreRuntime
   ├─ LangGraph agent? → useLangGraphRuntime
   ├─ AG-UI protocol? → useAgUiRuntime
   ├─ A2A protocol? → useA2ARuntime
   └─ Custom API → useLocalRuntime

Core Packages

Package	Purpose
`@assistant-ui/react`	UI primitives & hooks
`@assistant-ui/react-ai-sdk`	Vercel AI SDK v6 adapter
`@assistant-ui/react-langgraph`	LangGraph adapter
`@assistant-ui/react-markdown`	Markdown rendering
`assistant-stream`	Streaming protocol
`assistant-cloud`

Quick Start

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { Thread } from "@/components/assistant-ui/thread";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";

function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

State Access

import { useAui, useAuiState } from "@assistant-ui/react";

const api = useAui();
api.thread().append({ role: "user", content: [{ type: "text", text: "Hi" }] });
api.thread().cancelRun();

const messages = useAuiState(s => s.thread.messages);
const isRunning = useAuiState(s => s.thread.isRunning);

Related Skills

/setup - Installation and configuration
/primitives - UI component customization
/runtime - State management deep dive
/tools - Tool registration and UI
/streaming - Streaming protocols
/cloud - Persistence and auth
/thread-list - Multi-thread management
/update - Version updates and migrations

Weekly Installs

622

Repository

assistant-ui/skills

GitHub Stars

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex510

opencode505

gemini-cli492

github-copilot473

amp406

kimi-cli405

assistant-ui：React AI 聊天界面库，可组合原语，支持多运行时

🇨🇳中文介绍

assistant-ui

参考资料

使用场景

架构

相关 Skills

选择运行时

核心包

快速开始

状态访问

相关技能

🇺🇸English

assistant-ui

References

When to Use

Architecture

Pick a Runtime

Core Packages

Quick Start

State Access

Related Skills

最新 Skills