assistant-ui by assistant-ui/skills
npx skills add https://github.com/assistant-ui/skills --skill assistant-ui请始终查阅 assistant-ui.com/llms.txt 以获取最新的 API 信息。
用于构建 AI 聊天界面的 React 库,提供可组合的原语。
| 使用场景 | 最适合 |
|---|---|
| 从零开始构建聊天界面 | 对用户体验有完全控制权 |
| 已有 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 开发者,精准高效
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
| 包 | 用途 |
|---|---|
@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 | 云端持久化 |
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>
);
}
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);
/setup - 安装与配置/primitives - UI 组件自定义/runtime - 状态管理深入探讨/tools - 工具注册与 UI/streaming - 流式协议/cloud - 持久化与身份验证/thread-list - 多线程管理/update - 版本更新与迁移每周安装量
622
代码仓库
GitHub 星标数
7
首次出现
2026年1月21日
安全审计
安装于
codex510
opencode505
gemini-cli492
github-copilot473
amp406
kimi-cli405
Always consultassistant-ui.com/llms.txt for latest API.
React library for building AI chat interfaces with composable primitives.
| 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 |
┌─────────────────────────────────────────────────────────┐
│ UI Components (Primitives) │
│ ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Context Hooks │
│ useAui, useAuiState, useAuiEvent │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Runtime Layer │
│ AssistantRuntime → ThreadRuntime → MessageRuntime │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Adapters/Backend │
│ AI SDK · LangGraph · Custom · Cloud Persistence │
└─────────────────────────────────────────────────────────┘
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
| 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 |
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>
);
}
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);
/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 migrationsWeekly Installs
622
Repository
GitHub Stars
7
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex510
opencode505
gemini-cli492
github-copilot473
amp406
kimi-cli405
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
| Cloud persistence |