Skip to content
Agent UI

40 components · 15 compose blocks

Agent UIReact components for AI agent interfaces.

Streaming transcripts, tool calls, reasoning blocks, citations, model pickers, and pixel-faithful blocks for ChatGPT, Gemini, Claude, and twelve more. Accessible, TypeScript-first, Tailwind v4 — MIT licensed.

Get startedBrowse componentsSee provider blocks →
React 19TypeScriptTailwind CSS v4WCAG 2.2 AAMIT
chatgpt.com

Where should we begin?

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

A real OpenAI compose stage — type into it, it works.

Documented pieces
56
Components
40
Provider blocks
15
API tables
56

Built for agent surfaces, not landing pages.

Everything an AI product needs, from the first token to the tool audit trail — with the accessibility and state handling already wired.

Streaming, stop, retry

StreamingText, TypingIndicator, StopButton, CancelledBadge, and useChat cover the full response lifecycle.

Learn more

Tool calls and reasoning

Inspect arguments, results, errors, and duration; collapse reasoning traces; approve high-risk tool calls.

Learn more

Accessible by default

Live regions, labelled controls, arrow-key menus, Escape handling, and reduced-motion-safe animation.

Learn more

Copy, paste, own it

Plain Tailwind utility classes and TypeScript source. No runtime CSS-in-JS, no provider wrapper required.

Learn more

15 provider blocks

Brand-accurate copy-paste blocks built on one shared architecture, responsive with container queries.

Learn more

Typed and tested

Strict TypeScript exports with a 100% coverage test suite across every primitive and hook.

Learn more

Provider composes

Recognizable on sight, built on one system.

Each block recreates the rail, greeting, prompt surface, model menu, and toggles of a real product — then hands you the file to own.

All 15 blocks
ChatGPTLiveOpenAI · 2 models · chatgpt.comGeminiLiveGoogle · 3 models · gemini.google.comClaudeAnthropic · 3 models · claude.aiPerplexityLivePerplexity · 3 models · perplexity.ai
GrokLe ChatDeepSeek ChatGLM ChatKimiMiniMax CodeMiMoCoralMeta AICopilotQwen

Quick start

Working chat in three steps.

Install the package, register the library source with Tailwind, and render ChatShell with useChat. Then replace the callback with your backend.

  1. 1Install @agent-ui/react with your package manager.
  2. 2Add @source for the package to your global stylesheet.
  3. 3Render ChatShell and pass the useChat state and handlers.
Read the docsSee it running
bash
pnpm add @agent-ui/react
tsx
import { ChatShell, useChat } from "@agent-ui/react";
 
export function App() {
  const chat = useChat({
    onSend: async (text) => {
      const res = await fetch("/api/chat", {
        method: "POST",
        body: JSON.stringify({ text }),
      });
      return res.text();
    },
  });
 
  return (
    <ChatShell
      messages={chat.messages}
      isStreaming={chat.isStreaming}
      error={chat.error}
      onSend={chat.send}
      onStop={chat.stop}
    />
  );
}

Find the piece you need.

56 documented entries, grouped the way agent UIs are actually built.

15

Primitives

The building blocks: chat, streaming, markdown, code, and loading states.

4

Tools & reasoning

Render tool invocations, results, reasoning traces, and cited sources.

6

Pickers & navigation

Model menus, provider selectors, suggestions, feedback, history, and branches.

1

Hooks

Headless state for sending, streaming, stopping, and clearing a conversation.

3

Blocks

Pre-composed surfaces that combine primitives into complete UI regions.

12

Compose primitives

The context, shell, and controls behind the 15 provider stage clones.

15

Provider composes

Copy-paste provider blocks, assembled from Agent UI compose primitives.

Frequently asked questions

What is Agent UI?

Agent UI is an open-source React UI library for AI agent interfaces. It ships primitives such as MessageBubble, Composer, and ToolCallCard; hooks such as useChat; complete blocks; and 15 copy-paste provider chat compose blocks, all with Tailwind CSS v4 styling and TypeScript types.

Is Agent UI free?

Yes. Agent UI is MIT licensed and free to use in personal and commercial projects. There is no paid tier, license key, or attribution requirement.

Does Agent UI work with Next.js and Vite?

Yes. The components are standard React 19 components with no framework-specific runtime. They work in Next.js App Router, Vite, Remix, Astro islands, and any other React renderer. Tailwind CSS v4 emits the utility classes the library uses.

How is Agent UI different from a generic component library?

Generic libraries give you buttons and dialogs. Agent UI gives you the domain-specific pieces an agent product needs: streaming text, tool-call status, reasoning blocks, citations, model pickers, message branches, and full provider compose blocks. You still get the generic primitives underneath.

Can I connect Agent UI to my own model backend?

Yes. The library is backend-agnostic. useChat calls your onSend callback with the user text and expects the assistant reply; swap in fetch, an SDK, or a streaming response. No API keys or provider clients are bundled.

Ship the interface your model deserves.

Start with a single primitive or a complete provider block. Every path ends with accessible, typed React you own.

Read the docsOpen the galleryllms.txt