Documentation
Build agent interfaces with 56 documented pieces.
15 primitives, 4 tool and reasoning surfaces, 6 navigation controls, 3 blocks, 12 compose primitives, and 15 copy-paste provider blocks. Component pages include a live preview, a copyable example, and a complete API table; block pages include the full source and a shadcn install command.
Quick start
1 · Install
pnpm add @agent-ui/react2 · Register Tailwind
@import "tailwindcss";@source "../node_modules/@agent-ui/react/src";3 · Render
import { ChatShell, useChat } from "@agent-ui/react"; export function App() { const chat = useChat({ onSend: reply }); return <ChatShell {...chat} onSend={chat.send} />;}Reference
Browse by category. Every entry has a live preview; component pages add an API table, and block pages include the full source.
Primitives
15The building blocks: chat, streaming, markdown, code, and loading states.
- ButtonPolymorphic button with six visual variants, four sizes, and asChild composition.
- CardA bordered surface with header, title, description, content, and footer slots.
- CodeInline code with a muted background that matches prose and tables.
- MessageBubbleRole-aware chat bubble with avatar, display name, timestamp, and delivery status.
- ComposerCompound chat input with slots for providers, models, skills, attachments, search, thinking, and mentions.
- SimpleComposerA ready-made Composer with an input and send button.
- MessageListScrollable transcript with an ARIA live region, empty state, loading state, and auto-scroll.
- ChatShellComplete chat surface: transcript, composer, typing indicator, stop button, and error banner.
- MarkdownContentXSS-safe GFM renderer for headings, lists, tables, blockquotes, links, and inline code.
- CodeBlockSyntax-aware code surface with language label, optional line numbers, and copy-to-clipboard.
- SkeletonPulsing placeholder lines for pending messages and loading panels.
- StreamingTextToken reveal with an optional blinking caret for in-progress assistant replies.
- TypingIndicatorThree bouncing dots with a screen-reader status label.
- StopButtonAbort control that appears while a response is streaming.
- CancelledBadgeInline notice that marks a response the user cancelled.
Tools & reasoning
4Render tool invocations, results, reasoning traces, and cited sources.
- ToolCallCardExpandable tool invocation card with status, arguments, result, error, and duration.
- ToolResultFormatted output block for a tool response, with monospace JSON handling.
- ThinkingBlockCollapsible reasoning trace for models that expose chain-of-thought summaries.
- SourceCardCitation card with title, hostname, snippet, and a safe external link.
Pickers & navigation
6Model menus, provider selectors, suggestions, feedback, history, and branches.
- ModelPickerSearchable model dropdown with keyboard navigation and provider hints.
- ProviderSelectorSegmented provider pills with logo, label, and pressed state.
- SuggestionChipsQuick-start prompt chips for empty chat states.
- FeedbackButtonsThumbs up/down controls for rating assistant responses.
- ConversationSidebarChat history rail with active state, timestamps, and a new-chat action.
- BranchPickerTab switcher for alternate response branches.
Hooks
1Headless state for sending, streaming, stopping, and clearing a conversation.
Blocks
3Pre-composed surfaces that combine primitives into complete UI regions.
Compose primitives
12The context, shell, and controls behind the 15 provider stage clones.
- ComposeProviderContext provider that owns text, model, toggles, send, and disabled state for a stage.
- ComposeShellFull-bleed stage frame with hero, footer, max-width, and stretch behaviour.
- ComposeCardAnimated prompt surface with border, shadow, entrance, and focus-within glow.
- ComposeTextareaAuto-resizing textarea wired to compose context; Enter sends, Shift+Enter breaks.
- ToolButtonIcon-only round button with active state and accessible label.
- ToolPillText pill for composer toggles such as web search, deep think, or tools.
- ComposeSendButtonSend control bound to compose state; disabled until text exists.
- ModelChipModel menu trigger with keyboard navigation, light tone, and top or bottom placement.
- SuggestionPillsPrompt suggestions as pills or as a two-column card grid.
- ComposeDisclaimerMuted provider disclaimer line for the bottom of a composer stage.
- useComposeRead and drive compose state from any child of ComposeProvider.
- createComposeFactories that pre-bind a provider's static config to a shell and context, plus an HOC variant.
Provider composes
15Copy-paste provider blocks, assembled from Agent UI compose primitives.
- openai-composeA faithful ChatGPT compose stage with the collapsible rail, rounded prompt bar, and public chrome.
- gemini-composeThe Gemini capsule composer with the greeting hero, gradient bloom, and pill-shaped prompt field.
- perplexity-composeAn answer-engine stage with a research rail, source cards, and the teal Sonar model menu.
- anthropic-composeClaude's warm parchment stage, serif greeting, and research/thinking composer controls.
- grok-composeGrok's stark monochrome stage with the Fast / Expert / Heavy model picker.
- mistral-composeLe Chat's orange-accented header, rounded prompt bar, and Mistral Large model menu.
- deepseek-composeDeepSeek's blue-tinted stage with DeepThink and Search toggles above the prompt.
- zai-composeZ.ai's framed canvas, template cards, and GLM model menu with a warm paper tint.
- kimi-composeMoonshot's KIMI stage with a project rail, skill tray, and K3 model picker.
- minimax-composeMiniMax Code's task rail, download pill, and rounded capsule prompt bar.
- mimo-composeMiMo's brutalist cream stage with oversized display type and a hard-shadow composer.
- cohere-composeCohere's enterprise research stage with pastel gradient blobs and the Command R model menu.
- meta-composeMeta AI's bloom mark, violet gradient headline, and soft rounded prompt card.
- microsoft-composeCopilot's parchment stage with the gradient ring composer and suggestion pills.
- qwen-composeQwen's gallery-white stage with a top-left model menu and search/thinking pills.
Frequently asked questions
How do I install Agent UI?
Install the workspace package with pnpm add @agent-ui/react, import the component you need, and make sure your Tailwind CSS v4 entry file includes @source for the library. Every docs page includes an exact import and a runnable example.
Does Agent UI work with Tailwind CSS v4?
Yes. All components ship as Tailwind utility classes with no runtime CSS-in-JS. Add @source "../node_modules/@agent-ui/react/src" (or the workspace path) to your global stylesheet so Tailwind emits the classes the library uses.
Does Agent UI support streaming AI responses?
Yes. useChat exposes isStreaming, stop, and error state; ChatShell renders a typing indicator and stop button; StreamingText reveals tokens with a reduced-motion-safe caret; and ToolCallCard tracks tool status from pending to success or error.
Can I use a single component without adopting the whole library?
Every export is tree-shakeable and available through a direct path such as @agent-ui/react/message-bubble. Named imports from the root work too, and unused components are removed by modern bundlers.
Which AI providers have compose blocks?
Agent UI ships 15 copy-paste provider compose blocks: OpenAI ChatGPT, Google Gemini, Perplexity, Anthropic Claude, xAI Grok, Mistral Le Chat, DeepSeek, Z.ai GLM, Kimi, MiniMax, Xiaomi MiMo, Cohere Coral, Meta AI, Microsoft Copilot, and Alibaba Qwen.
Machine-readable index: /llms.txt · sitemap.xml