# Agent UI — Chat Components for AI Agents
> 24 shadcn-style React components for building ChatGPT-class chat interfaces. WCAG AA, TypeScript, zero vendor lock-in, dark-mode native.

## Install
```bash
pnpm add @agent-ui/react
```

## Core Components

### Chat
- [MessageBubble](https://agent-ui.frontendx.dev/components/message-bubble): Chat message with role-based styling (user/assistant/system), avatar, name, timestamp, status (sending/sent/error). `@agent-ui/react/message-bubble`
- [Composer](https://agent-ui.frontendx.dev/components/composer): Compound component with slots (Input, SendButton, ProviderModelSlot, SkillSlot, AttachmentSlot, SearchToggle, ThinkingToggle, MentionMenu). Auto-resizing textarea. `@agent-ui/react/composer`
- [MessageList](https://agent-ui.frontendx.dev/components/message-list): ARIA `role="log"` live region with auto-scroll, empty state, loading skeleton. `@agent-ui/react/message-list`
- [ChatShell](https://agent-ui.frontendx.dev/components/chat-shell): Composed chat interface combining MessageList, MessageBubble, Composer, TypingIndicator, StopButton, CancelledBadge. `@agent-ui/react/chat-shell`
- [useChat](https://agent-ui.frontendx.dev/components/use-chat): React hook for chat state management — messages, send, stop, clear, streaming, error. `@agent-ui/react/use-chat`

### Display / Markdown
- [MarkdownContent](https://agent-ui.frontendx.dev/components/markdown): GFM markdown renderer (headings, bold, code, links, lists, blockquotes). XSS-safe (strips script/style). `@agent-ui/react/markdown-content`
- [CodeBlock](https://agent-ui.frontendx.dev/components/code-block): Syntax-highlighted code with copy button, language badge, optional line numbers. `@agent-ui/react/code-block`
- [Skeleton](https://agent-ui.frontendx.dev/components/streaming): Loading placeholder with configurable line count. `@agent-ui/react/skeleton`

### Streaming
- [StreamingText](https://agent-ui.frontendx.dev/components/streaming): Animated token reveal with blinking cursor. Respects `prefers-reduced-motion`. `@agent-ui/react/streaming-text`
- [TypingIndicator](https://agent-ui.frontendx.dev/components/streaming): Bouncing dots showing assistant is generating. `@agent-ui/react/typing-indicator`
- [StopButton](https://agent-ui.frontendx.dev/components/streaming): Button to abort ongoing generation. `@agent-ui/react/stop-button`
- [CancelledBadge](https://agent-ui.frontendx.dev/components/streaming): Alert badge for cancelled/incomplete responses. `@agent-ui/react/cancelled-badge`

### Agent / Tool Calls
- [ToolCallCard](https://agent-ui.frontendx.dev/components/tool-call): Tool invocation card with status transitions (pending/running/success/error), args/result/details, duration. `@agent-ui/react/tool-call-card`
- [ToolResult](https://agent-ui.frontendx.dev/components/tool-call): Rendered tool output with copy button. `@agent-ui/react/tool-result`
- [ThinkingBlock](https://agent-ui.frontendx.dev/components/thinking): Expandable reasoning block using `<details>/<summary>`. `@agent-ui/react/thinking-block`
- [SourceCard](https://agent-ui.frontendx.dev/components/thinking): Citation card with title, URL, snippet. `@agent-ui/react/source-card`

### Model / Provider
- [ModelPicker](https://agent-ui.frontendx.dev/components/model-picker): Searchable dropdown for AI model selection. Keyboard nav (Arrow keys, Enter, Escape). `@agent-ui/react/model-picker`
- [ProviderSelector](https://agent-ui.frontendx.dev/components/model-picker): Pill-button group for AI provider selection. `@agent-ui/react/provider-selector`

### Input
- [Button](https://agent-ui.frontendx.dev/components/button): Polymorphic button with cva variants (default/destructive/outline/secondary/ghost/link) and sizes (default/sm/lg/icon). `@agent-ui/react/button`
- [SuggestionChips](https://agent-ui.frontendx.dev/components/chat): Quick-reply suggestion pills. `@agent-ui/react/suggestion-chips`

### Chrome
- [ConversationSidebar](https://agent-ui.frontendx.dev/components/chat): Navigation sidebar with conversation list, active state, new chat button. `@agent-ui/react/conversation-sidebar`
- [FeedbackButtons](https://agent-ui.frontendx.dev/components/chat): Thumbs up/down buttons, visible on hover. `@agent-ui/react/feedback-buttons`
- [BranchPicker](https://agent-ui.frontendx.dev/components/chat): Tab switcher for conversation branches using ARIA tablist pattern. `@agent-ui/react/branch-picker`

### Protocol
- [dcmp](https://agent-ui.frontendx.dev/components/dcmp): Deterministic Component Message Protocol — Zod schemas for typed message parts (text, component, tool_call, tool_result, media). Component catalog validation with semver. `@agent-ui/react/dcmp`

## Demo Apps
- [ChatGPT Clone](https://agent-ui.frontendx.dev/chat): Full-featured chat app with sidebar, streaming, tool calls, model selection.
- [Popup Widget](https://agent-ui.frontendx.dev/popup): Floating chat widget (bottom-right bubble expands to full panel).

## Resources
- Documentation: https://agent-ui.frontendx.dev/components
- GitHub: https://github.com/agent-ui/agent-ui
- npm: https://npmjs.com/@agent-ui/react
- Issues: https://github.com/agent-ui/agent-ui/issues