assistant-ui
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chineseassistant-ui
assistant-ui
Always consult assistant-ui.com/llms.txt for latest API.
React library for building AI chat interfaces with composable primitives.
请始终查阅assistant-ui.com/llms.txt获取最新API。
用于构建AI聊天界面的React库，提供可组合的基础组件。
References
参考资料
- ./references/architecture.md -- Core architecture and layered system
- ./references/packages.md -- Package overview and selection guide
- ./references/architecture.md -- 核心架构与分层系统
- ./references/packages.md -- 包概览与选择指南
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 |
| 使用场景 | 适用场景 |
|---|---|
| 从零构建聊天UI | 完全控制用户体验 |
| 已有AI后端 | 可连接至任何流式后端 |
| 自定义消息类型 | 支持工具、图片、文件、自定义组件 |
| 多线程应用 | 内置线程列表管理 |
| 生产环境应用 | 支持云端持久化、认证、分析 |
Architecture
架构
┌─────────────────────────────────────────────────────────┐
│ UI Components (Primitives) │
│ ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Context Hooks │
│ useAssistantApi, useAssistantState, useAssistantEvent │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Runtime Layer │
│ AssistantRuntime → ThreadRuntime → MessageRuntime │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Adapters/Backend │
│ AI SDK · LangGraph · Custom · Cloud Persistence │
└─────────────────────────────────────────────────────────┘┌─────────────────────────────────────────────────────────┐
│ UI Components (Primitives) │
│ ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Context Hooks │
│ useAssistantApi, useAssistantState, useAssistantEvent │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Runtime Layer │
│ AssistantRuntime → ThreadRuntime → MessageRuntime │
└─────────────────────────┬───────────────────────────────┘
│
┌─────────────────────────▼───────────────────────────────┐
│ Adapters/Backend │
│ AI SDK · LangGraph · Custom · Cloud Persistence │
└─────────────────────────────────────────────────────────┘Pick a Runtime
选择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使用AI SDK？
├─ 是 → 使用useChatRuntime（推荐）
└─ 否
├─ 外部状态管理（Redux/Zustand）？ → 使用useExternalStoreRuntime
├─ LangGraph agent？ → 使用useLangGraphRuntime
├─ AG-UI协议？ → 使用useAgUiRuntime
├─ A2A协议？ → 使用useA2ARuntime
└─ 自定义API → 使用useLocalRuntimeCore Packages
核心包
| Package | Purpose |
|---|---|
| UI primitives & hooks |
| Vercel AI SDK v6 adapter |
| LangGraph adapter |
| Markdown rendering |
| Pre-built CSS |
| Streaming protocol |
| Cloud persistence |
| 包 | 用途 |
|---|---|
| UI基础组件与钩子 |
| Vercel AI SDK v6适配器 |
| LangGraph适配器 |
| Markdown渲染 |
| 预构建CSS |
| 流式协议 |
| 云端持久化 |
Quick Start
快速开始
tsx
import { AssistantRuntimeProvider, Thread } from "@assistant-ui/react";
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>
);
}tsx
import { AssistantRuntimeProvider, Thread } from "@assistant-ui/react";
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
状态访问
tsx
import { useAssistantApi, useAssistantState } from "@assistant-ui/react";
const api = useAssistantApi();
api.thread().append({ role: "user", content: [{ type: "text", text: "Hi" }] });
api.thread().cancelRun();
const messages = useAssistantState(s => s.thread.messages);
const isRunning = useAssistantState(s => s.thread.isRunning);tsx
import { useAssistantApi, useAssistantState } from "@assistant-ui/react";
const api = useAssistantApi();
api.thread().append({ role: "user", content: [{ type: "text", text: "Hi" }] });
api.thread().cancelRun();
const messages = useAssistantState(s => s.thread.messages);
const isRunning = useAssistantState(s => s.thread.isRunning);Related Skills
相关技能
- - Installation and configuration
/setup - - UI component customization
/primitives - - State management deep dive
/runtime - - Tool registration and UI
/tools - - Streaming protocols
/streaming - - Persistence and auth
/cloud - - Multi-thread management
/thread-list - - Version updates and migrations
/update
- - 安装与配置
/setup - - UI组件定制
/primitives - - 状态管理深入解析
/runtime - - 工具注册与UI
/tools - - 流式协议
/streaming - - 持久化与认证
/cloud - - 多线程管理
/thread-list - - 版本更新与迁移
/update