Gallery
Every component, live.
56 documented pieces rendered by the library itself. Filter by category, search by name, then open the docs for props and copy-ready examples — or full block source.
Showing 56 of 56
Polymorphic button with six visual variants, four sizes, and asChild composition.
View docs5 propsMonthly usage
Requests across all providers.
12,480+18% from last monthA bordered surface with header, title, description, content, and footer slots.
View docs2 propsRun
pnpm add @agent-ui/reactto install the library.- YouHello!AssistantHi there! How can I help today?SentSystem notice
Role-aware chat bubble with avatar, display name, timestamp, and delivery status.
View docs7 props Compound chat input with slots for providers, models, skills, attachments, search, thinking, and mentions.
View docs4 props- What is Agent UI?A UI library for building AI agent interfaces with React.
Scrollable transcript with an ARIA live region, empty state, loading state, and auto-scroll.
View docs5 props Complete chat surface: transcript, composer, typing indicator, stop button, and error banner.
View docs7 propsResult
Bold and
inline code.- one
- two
Quoted context
XSS-safe GFM renderer for headings, lists, tables, blockquotes, links, and inline code.
View docs2 props- typescriptfunction greet(name: string) {return `Hello, ${name}!`;}
Syntax-aware code surface with language label, optional line numbers, and copy-to-clipboard.
View docs4 props - Loading
Pulsing placeholder lines for pending messages and loading panels.
View docs2 props - Streaming tokens as they arrive...
Token reveal with an optional blinking caret for in-progress assistant replies.
View docs3 props - Assistant is typing
- Response cancelled
Expandable tool invocation card with status, arguments, result, error, and duration.
View docs8 props- Result
{ "ok": true, "results": 3 }Formatted output block for a tool response, with monospace JSON handling.
View docs2 props Thinking
Checked the request, then drafted a grounded answer.Collapsible reasoning trace for models that expose chain-of-thought summaries.
View docs3 propsCitation card with title, hostname, snippet, and a safe external link.
View docs4 propsSearchable model dropdown with keyboard navigation and provider hints.
View docs6 propsSegmented provider pills with logo, label, and pressed state.
View docs4 propsThumbs up/down controls for rating assistant responses.
View docs3 propsChat history rail with active state, timestamps, and a new-chat action.
View docs5 props- Messages: 0
Headless chat state: send a message, await a reply, stream status, stop, and clear.
View docs8 props - What is Agent UI?SentA UI library for building AI agent interfaces with React.Sent
Full ChatGPT-style layout with conversation rail, messages, streaming state, and composer.
View docs10 props - Approve tool call: send_email?
{ "to": "user@example.com", "subject": "Weekly summary" }Human-in-the-loop prompt that asks the user to approve or reject a tool call.
View docs5 props Context provider that owns text, model, toggles, send, and disabled state for a stage.
View docs6 props- Stage content
Stage footer
Full-bleed stage frame with hero, footer, max-width, and stretch behaviour.
View docs7 props AI can make mistakes.
Animated prompt surface with border, shadow, entrance, and focus-within glow.
View docs1 propsAuto-resizing textarea wired to compose context; Enter sends, Shift+Enter breaks.
View docs3 propsIcon-only round button with active state and accessible label.
View docs3 propsText pill for composer toggles such as web search, deep think, or tools.
View docs4 propsSend control bound to compose state; disabled until text exists.
View docs2 propsModel menu trigger with keyboard navigation, light tone, and top or bottom placement.
View docs5 propsPrompt suggestions as pills or as a two-column card grid.
View docs4 propsAI can make mistakes. Check important info.
Muted provider disclaimer line for the bottom of a composer stage.
View docs2 propsDraft: 0 characters · empty
Read and drive compose state from any child of ComposeProvider.
View docs10 propsFactories that pre-bind a provider's static config to a shell and context, plus an HOC variant.
View docs8 propsWhere should we begin?
ChatGPT is AI. By using it, you agree to our Terms & Privacy Policy.
A faithful ChatGPT compose stage with the collapsible rail, rounded prompt bar, and public chrome.
View docs1 file · block- About GeminiSubscriptionsFor BusinessGet AppSign in
Happy Diwali!
Google Terms and the Google Privacy Policy apply. Gemini is AI and can make mistakes.
The Gemini capsule composer with the greeting hero, gradient bloom, and pill-shaped prompt field.
View docs1 file · block An answer-engine stage with a research rail, source cards, and the teal Sonar model menu.
View docs1 file · block- ClaudeTry Claude free
What can I help with?
Your thinking partner for big ambitions
Claude can make mistakes. Check important info.
By chatting, you agree to Anthropic's Terms and Privacy Policy.
Claude's warm parchment stage, serif greeting, and research/thinking composer controls.
View docs1 file · block Grok's stark monochrome stage with the Fast / Expert / Heavy model picker.
View docs1 file · block- MistralLe Chat
What can I help you with?
Mistral AI can make mistakes. Check important info.
Le Chat's orange-accented header, rounded prompt bar, and Mistral Large model menu.
View docs1 file · block - deepseek
Hi, I'm DeepSeek.
How can I help you today?
DeepSeek can make mistakes. Check important info.
DeepSeek's blue-tinted stage with DeepThink and Search toggles above the prompt.
View docs1 file · block - ZCode ↗API ↗Sign in
Create anything you can imagine
Full-Stack
Writing
Data Insight
Generated by AI. For reference only. · Terms of Service · Privacy Policy
Z.ai's framed canvas, template cards, and GLM model menu with a warm paper tint.
View docs1 file · block KIMI
Choose project PluginsExplore inspiration · AI-generated, for reference only
Moonshot's KIMI stage with a project rail, skill tray, and K3 model picker.
View docs1 file · blockWhat can I build for you?
MiniMax H3 Image
One prompt to a finished visual.
MiniMax can make mistakes. Check important info.
MiniMax Code's task rail, download pill, and rounded capsule prompt bar.
View docs1 file · block- Xiaomi MiMo
HELLO, I'M MiMo
MiMo-V2.6 · built in publicXiaomi MiMo-V2.6-Series
Frontier intelligence, all the modalities, built in public.
Xiaomi MiMo-V2.5-TTS Series
Give your agent a voice. Give it a soul.
MiMo's brutalist cream stage with oversized display type and a hard-shadow composer.
View docs1 file · block - cohere
How can I help you today?
Chat with Command, grounded in your enterprise data.
By signing up, you agree to the Terms of Use and Privacy Policy.
Cohere can make mistakes. Check important info.
Cohere's enterprise research stage with pastel gradient blobs and the Command R model menu.
View docs1 file · block - ∞ Meta
Meta AI, the personal assistant that helps you create
Meta AI's bloom mark, violet gradient headline, and soft rounded prompt card.
View docs1 file · block - MicrosoftCopilotSign inME
What can I help with?
Chat to find answers, create content, and complete tasks with AI.
Copilot is AI. It can make mistakes. Check important info.
Copilot's parchment stage with the gradient ring composer and suggestion pills.
View docs1 file · block Qwen's gallery-white stage with a top-left model menu and search/thinking pills.
View docs1 file · block
Build a full agent surface
Combine the transcript, composer, tool cards, and provider stage into a production chat UI. The chat demo shows the composed result, and the compose gallery shows all 15 provider compose blocks side by side.
Frequently asked questions
How many components does Agent UI include?
Agent UI ships 56 documented pieces: 15 primitives, 4 tool and reasoning surfaces, 6 pickers and navigation controls, 1 hook, 3 blocks, 12 compose primitives, and 15 copy-paste provider compose blocks.
Are the previews on this page interactive?
Yes. The gallery renders the real components and blocks, not screenshots. Dropdowns, tabs, textareas, and chat stages respond to clicks and keyboard input. Component cards link to a full API table; provider compose cards link to the complete copy-paste source and a shadcn install command.
Do these components work with any React framework?
Agent UI is a React 19 component library, so it works with any React meta-framework: Next.js App Router, Vite, Remix, Astro islands, and any React 19 renderer. It is backend-agnostic — no AI client, API key, or vendor SDK is bundled. Styling is Tailwind CSS v4 utility classes with light and dark tokens.
Can I copy a component into my project instead of installing the package?
Yes. Every component is self-contained TypeScript source with no runtime CSS-in-JS. Install @agent-ui/react for the maintained version, copy a single file and its cn utility, or add a provider compose block with the shadcn CLI. The block source is shown in full on its docs page.
Canonical gallery for Agent UI · sitemap.xml