Skip to content
Agent UI

Provider blocks

15 AI chat interfaces, rebuilt in React.

Working compose blocks of ChatGPT, Gemini, Claude, Perplexity, Grok, and ten more. Same primitives, same accessibility, different brand layer. Type into any stage — the previews are live.

11 live-verified15 documented blocksBrowse block docs

One architecture, 15 copy-paste blocks.

Every stage is a file you copy into your project, assembled from ComposeProvider, ComposeShell, ComposeCard, and the shared controls. Swap the brand layer without reimplementing send, model selection, or toggle state.

Compose primitivesCompare side by side

Build your own

# copy a block into your project
npx shadcn@latest add   https://agent-ui-27t.pages.dev/r/openai-compose.json

Frequently asked questions

What is a provider chat compose?

A compose is a copy-paste React block that recreates the prompt area of a real AI product: its rail, greeting, prompt surface, model menu, and tool toggles. Each one is a file you own, assembled from the same Agent UI compose primitives, so behaviour stays consistent while the visual design matches the provider.

Are these composes interactive?

Yes. Type a prompt, press Enter or the send button, open the model menu, and toggle tools. The stages ship with keyboard support, accessible labels, and responsive container queries rather than screenshots.

How faithful are the clones?

11 of the 15 stages were verified against the live product UI; the rest are built from publicly visible UI patterns. Each card is labeled so you know which basis it uses, and every provider page links to the source product.

Can I use a compose as the starting point for my own product?

Yes. Install a block with the shadcn CLI or copy its file, then swap the brand layer. You can also use createCompose with your own models and placeholder. Every block accepts onSend, disabled, and className, and exposes data-agent-id for testing.

Provider index · sitemap.xml · llms.txt