Skip to content
Agent UI

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.

40 components15 compose blocksRead the docs

Showing 56 of 56

  • Button

    Primitives

    Polymorphic button with six visual variants, four sizes, and asChild composition.

    View docs5 props
  • Monthly usage

    Requests across all providers.

    12,480
    +18% from last month

    Card

    Primitives

    A bordered surface with header, title, description, content, and footer slots.

    View docs2 props
  • Run pnpm add @agent-ui/react to install the library.

    Code

    Primitives

    Inline code with a muted background that matches prose and tables.

    View docs2 props
  • You
    Hello!
    Assistant
    Hi there! How can I help today?
    Sent
    System notice

    MessageBubble

    Primitives

    Role-aware chat bubble with avatar, display name, timestamp, and delivery status.

    View docs7 props
  • Composer

    Primitives

    Compound chat input with slots for providers, models, skills, attachments, search, thinking, and mentions.

    View docs4 props
  • SimpleComposer

    Primitives

    A ready-made Composer with an input and send button.

    View docs4 props
  • What is Agent UI?
    A UI library for building AI agent interfaces with React.

    MessageList

    Primitives

    Scrollable transcript with an ARIA live region, empty state, loading state, and auto-scroll.

    View docs5 props
  • ChatShell

    Primitives

    Complete chat surface: transcript, composer, typing indicator, stop button, and error banner.

    View docs7 props
  • Result

    Bold and inline code.

    • one
    • two
    Quoted context

    MarkdownContent

    Primitives

    XSS-safe GFM renderer for headings, lists, tables, blockquotes, links, and inline code.

    View docs2 props
  • typescript
    function greet(name: string) {
    return `Hello, ${name}!`;
    }

    CodeBlock

    Primitives

    Syntax-aware code surface with language label, optional line numbers, and copy-to-clipboard.

    View docs4 props
  • Loading

    Skeleton

    Primitives

    Pulsing placeholder lines for pending messages and loading panels.

    View docs2 props
  • Streaming tokens as they arrive...

    StreamingText

    Primitives

    Token reveal with an optional blinking caret for in-progress assistant replies.

    View docs3 props
  • Assistant is typing

    TypingIndicator

    Primitives

    Three bouncing dots with a screen-reader status label.

    View docs1 props
  • StopButton

    Primitives

    Abort control that appears while a response is streaming.

    View docs2 props
  • CancelledBadge

    Primitives

    Inline notice that marks a response the user cancelled.

    View docs2 props
  • ToolCallCard

    Tools & reasoning

    Expandable tool invocation card with status, arguments, result, error, and duration.

    View docs8 props
  • Result
    {
      "ok": true,
      "results": 3
    }

    ToolResult

    Tools & reasoning

    Formatted output block for a tool response, with monospace JSON handling.

    View docs2 props
  • Thinking
    Checked the request, then drafted a grounded answer.

    ThinkingBlock

    Tools & reasoning

    Collapsible reasoning trace for models that expose chain-of-thought summaries.

    View docs3 props
  • SourceCard

    Tools & reasoning

    Citation card with title, hostname, snippet, and a safe external link.

    View docs4 props
  • ModelPicker

    Pickers & navigation

    Searchable model dropdown with keyboard navigation and provider hints.

    View docs6 props
  • ProviderSelector

    Pickers & navigation

    Segmented provider pills with logo, label, and pressed state.

    View docs4 props
  • SuggestionChips

    Pickers & navigation

    Quick-start prompt chips for empty chat states.

    View docs3 props
  • FeedbackButtons

    Pickers & navigation

    Thumbs up/down controls for rating assistant responses.

    View docs3 props
  • ConversationSidebar

    Pickers & navigation

    Chat history rail with active state, timestamps, and a new-chat action.

    View docs5 props
  • BranchPicker

    Pickers & navigation

    Tab switcher for alternate response branches.

    View docs4 props
  • Messages: 0

    useChat

    Hooks

    Headless chat state: send a message, await a reply, stream status, stop, and clear.

    View docs8 props
  • What is Agent UI?
    Sent
    A UI library for building AI agent interfaces with React.
    Sent

    ChatGPTShell

    Blocks

    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"
    }

    ToolApproval

    Blocks

    Human-in-the-loop prompt that asks the user to approve or reject a tool call.

    View docs5 props
  • CitationsPanel

    Blocks

    Stacked source cards for grounded answers and research results.

    View docs2 props
  • ComposeProvider

    Compose primitives

    Context provider that owns text, model, toggles, send, and disabled state for a stage.

    View docs6 props
  • Stage content

    Stage footer

    ComposeShell

    Compose primitives

    Full-bleed stage frame with hero, footer, max-width, and stretch behaviour.

    View docs7 props
  • AI can make mistakes.

    ComposeCard

    Compose primitives

    Animated prompt surface with border, shadow, entrance, and focus-within glow.

    View docs1 props
  • ComposeTextarea

    Compose primitives

    Auto-resizing textarea wired to compose context; Enter sends, Shift+Enter breaks.

    View docs3 props
  • ToolButton

    Compose primitives

    Icon-only round button with active state and accessible label.

    View docs3 props
  • ToolPill

    Compose primitives

    Text pill for composer toggles such as web search, deep think, or tools.

    View docs4 props
  • ComposeSendButton

    Compose primitives

    Send control bound to compose state; disabled until text exists.

    View docs2 props
  • ModelChip

    Compose primitives

    Model menu trigger with keyboard navigation, light tone, and top or bottom placement.

    View docs5 props
  • SuggestionPills

    Compose primitives

    Prompt suggestions as pills or as a two-column card grid.

    View docs4 props
  • AI can make mistakes. Check important info.

    ComposeDisclaimer

    Compose primitives

    Muted provider disclaimer line for the bottom of a composer stage.

    View docs2 props
  • Draft: 0 characters · empty

    useCompose

    Compose primitives

    Read and drive compose state from any child of ComposeProvider.

    View docs10 props
  • createCompose

    Compose primitives

    Factories that pre-bind a provider's static config to a shell and context, plus an HOC variant.

    View docs8 props
  • Where should we begin?

    ChatGPT is AI. By using it, you agree to our Terms & Privacy Policy.

    openai-compose

    Provider composes

    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.

    gemini-compose

    Provider composes

    The Gemini capsule composer with the greeting hero, gradient bloom, and pill-shaped prompt field.

    View docs1 file · block
  • What do you want to know?

    Terms of Service · Privacy Notice

    perplexity-compose

    Provider composes

    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.

    anthropic-compose

    Provider composes

    Claude's warm parchment stage, serif greeting, and research/thinking composer controls.

    View docs1 file · block
  • What should we explore?

    By messaging Grok, you agree to our Terms and Privacy Policy.

    grok-compose

    Provider composes

    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.

    mistral-compose

    Provider composes

    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.

    Terms of Use · Privacy Policy

    deepseek-compose

    Provider composes

    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

    zai-compose

    Provider composes

    Z.ai's framed canvas, template cards, and GLM model menu with a warm paper tint.

    View docs1 file · block
  • KIMI

    Choose project Plugins

    Explore inspiration · AI-generated, for reference only

    kimi-compose

    Provider composes

    Moonshot's KIMI stage with a project rail, skill tray, and K3 model picker.

    View docs1 file · block
  • What can I build for you?

    MiniMax H3 Image

    One prompt to a finished visual.

    MiniMax can make mistakes. Check important info.

    minimax-compose

    Provider composes

    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 public

    Xiaomi 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-compose

    Provider composes

    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-compose

    Provider composes

    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-compose

    Provider composes

    Meta AI's bloom mark, violet gradient headline, and soft rounded prompt card.

    View docs1 file · block
  • MicrosoftCopilot
    Sign 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.

    microsoft-compose

    Provider composes

    Copilot's parchment stage with the gradient ring composer and suggestion pills.

    View docs1 file · block
  • How can I help you?

    Auto

    By using Qwen, you agree to our Terms of Service and Privacy Policy.

    qwen-compose

    Provider composes

    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