Skip to content
Agent UI

Compose gallery

Fifteen providers. Fifteen copy-paste blocks.

Pixel-faithful composer blocks for every major AI product, built from the composable primitives in @agent-ui/react. Every block is a file you own: copy it or install it with the shadcn CLI. The previews are live — type, toggle tools, pick a model, and send.

11 live-verifiedLive previewsCopy-paste blocksBrowse provider pages
  • chatgpt.com

    ChatGPT

    OpenAI · openai-compose

    Live-verified

    Where 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.

    ProviderDocs
  • gemini.google.com

    Gemini

    Google · gemini-compose

    Live-verified
    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.

    ProviderDocs
  • perplexity.ai

    Perplexity

    Perplexity · perplexity-compose

    Live-verified

    What do you want to know?

    Terms of Service · Privacy Notice

    An answer-engine stage with a research rail, source cards, and the teal Sonar model menu.

    ProviderDocs
  • claude.ai

    Claude

    Anthropic · anthropic-compose

    Public UI
    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.

    ProviderDocs
  • grok.com

    Grok

    xAI · grok-compose

    Live-verified

    What should we explore?

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

    Grok's stark monochrome stage with the Fast / Expert / Heavy model picker.

    ProviderDocs
  • chat.mistral.ai

    Le Chat

    Mistral · mistral-compose

    Public UI
    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.

    ProviderDocs
  • chat.deepseek.com

    DeepSeek Chat

    DeepSeek · deepseek-compose

    Public UI
    deepseek

    Hi, I'm DeepSeek.

    How can I help you today?

    DeepSeek can make mistakes. Check important info.

    Terms of Use · Privacy Policy

    DeepSeek's blue-tinted stage with DeepThink and Search toggles above the prompt.

    ProviderDocs
  • chat.z.ai

    GLM Chat

    Z.ai · zai-compose

    Live-verified
    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.

    ProviderDocs
  • kimi.com

    Kimi

    Kimi · kimi-compose

    Live-verified

    KIMI

    Choose project Plugins

    Explore inspiration · AI-generated, for reference only

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

    ProviderDocs
  • chat.minimax.io

    MiniMax Code

    MiniMax · minimax-compose

    Live-verified

    What 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.

    ProviderDocs
  • mimo.xiaomi.com

    MiMo

    Xiaomi · mimo-compose

    Live-verified
    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's brutalist cream stage with oversized display type and a hard-shadow composer.

    ProviderDocs
  • coral.cohere.com

    Coral

    Cohere · cohere-compose

    Public UI
    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.

    ProviderDocs
  • meta.ai

    Meta AI

    Meta · meta-compose

    Live-verified
    ∞ Meta

    Meta AI, the personal assistant that helps you create

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

    ProviderDocs
  • copilot.microsoft.com

    Copilot

    Microsoft · microsoft-compose

    Live-verified
    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.

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

    ProviderDocs
  • chat.qwen.ai

    Qwen

    Alibaba · qwen-compose

    Live-verified

    How can I help you?

    Auto

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

    Qwen's gallery-white stage with a top-left model menu and search/thinking pills.

    ProviderDocs

Own the code

Add any block with the shadcn CLI, or copy its file from the docs. Blocks are assembled from the shared compose primitives, so you can edit the layout without breaking send, model selection, or toggle state. All 15 blocks in this gallery follow the same pattern.

View block sourceCompose primitivesRegistry JSON

# copy a provider block

npx shadcn@latest add

https://agent-ui-27t.pages.dev/r/openai-compose.json

Frequently asked questions

What is the difference between /composes and /providers?

The compose gallery shows every provider block in one comparison grid. Each provider page adds product metadata, the model list, the shadcn install command, and a link to the full block source.

Do the composes require an AI backend?

No. Each stage owns its draft text, model selection, and toggle state locally and calls onSend with the trimmed prompt. Connect that callback to your API to make it functional; the previews work without any network access.

Are the composes responsive?

Yes. Stages use CSS container queries rather than viewport breakpoints, so rails, labels, and secondary controls collapse based on the width of the stage itself — not the browser window. They work in sidebars, modals, and full-page layouts.

Can I restyle a compose to match my own brand?

Yes. Every block is assembled from ComposeProvider, ComposeShell, ComposeCard, and shared controls. Copy the file and replace its brand layer, or use createCompose to start from scratch — the accessible behaviour stays the same.

15 compose blocks · sitemap.xml · llms.txt