菜单
Guide for assistant-ui library - AI chat UI components. Use when asking about architecture, debugging, or understanding the codebase.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use for VBI monorepo development: apps, packages, practices, website documentation, repository-level workflows, generated artifacts, validation commands, source-of-truth decisions, software entropy control, maintainability, refactoring, dead-code deletion, and constraining messy LLM-generated code.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.
| name | assistant-ui |
| description | Guide for assistant-ui library - AI chat UI components. Use when asking about architecture, debugging, or understanding the codebase. |
| version | 0.0.1 |
| license | MIT |
Always consult assistant-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 | Cloud persistence |
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 migrations