Skip to content
AI Primer

assistant-ui

assistant-uiby assistant-ui3 months ago20

Overview and router for assistant-ui, the React library for building AI chat interfaces from composable primitives. Use for high-level, cross-cutting, or architecture-overview questions: choosing packages, picking a runtime, or understanding the layered model (RuntimeCore, Runtime, the aui client, primitives) and message model. Covers the `@assistant-ui/react` core plus `@assistant-ui/react-ai-sdk`, `@assistant-ui/react-langchain`, `@assistant-ui/react-langgraph`, `assistant-stream`, and `assistant-cloud`, and the platform bindings `@assistant-ui/react-native` and `@assistant-ui/react-ink`; `AssistantRuntimeProvider`; the primitives `ThreadPrimitive`, `MessagePrimitive`, `ComposerPrimitive`; the hooks `useAui`, `useAuiState`, `useAuiEvent`; and runtime selection across `useChatRuntime`, `useExternalStoreRuntime`, `useLangGraphRuntime`, `useLocalRuntime`. Current line is `@assistant-ui/react` 0.15.x on AI SDK v7. For a specific area route to a focused sibling instead: setup, runtime, primitives, tools, streaming, cloud, thread-list, copilots, markdown, react-mcp, observability, or update. Not for hands-on tasks already owned by those siblings.

Install

npx skills add https://github.com/assistant-ui/skills --skill assistant-ui
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/assistant-ui--skills--assistant-ui--skills--assistant-ui/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

Related skills

💻 Developer Tools

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

by obra · 27 days ago266.1k
💻 Developer Tools

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

by obra · 27 days ago266.1k
💻 Developer Tools

finishing-a-development-branch

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

by obra · 14 days ago266.1k
💻 Developer Tools

test-driven-development

Use when implementing any feature or bugfix, before writing implementation code

by obra · 14 days ago266.1k