Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From assistant-ui
Guides on assistant-ui React library for AI chat UI components, covering architecture, runtime adapters like AI SDK and LangGraph, packages, and debugging.
npx claudepluginhub assistant-ui/skills --plugin assistant-uiHow this skill is triggered — by the user, by Claude, or both
Slash command
/assistant-ui:assistant-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Always consult [assistant-ui.com/llms.txt](https://assistant-ui.com/llms.txt) for latest API.**
Guides use of assistant-ui React primitives (ThreadPrimitive, ComposerPrimitive, MessagePrimitive) for customizing chat UI components.
React component library for AI-powered UI: chat interfaces, tool execution visualization, reasoning displays, and workflow management. 30+ components installed via shadcn registry.
Provides Vercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for streaming AI chat UIs in Next.js apps. Fixes parse stream errors, no responses, and streaming issues.
Share bugs, ideas, or general feedback.
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