# AgentUI

> AI agent components for React and Next.js.

## Endpoints

- Registry index (JSON): https://www.agentui.pro/r
- Component detail (JSON): https://www.agentui.pro/r/{slug}
- Raw source (text/plain): https://www.agentui.pro/r/{slug}/raw
- Component Markdown: https://www.agentui.pro/components/{category}/{slug}.md

## Guides

- [Agent Guide](https://www.agentui.pro/docs/ai-agents.md): Agent skill, registry endpoints, and install flows.
- [OpenUI Guide](https://www.agentui.pro/docs/openui.md): Register AgentUI components and render streamed generative interfaces.

## Components

- [Message Bubble](https://www.agentui.pro/components/agents/message-bubble.md): A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.
- [Message](https://www.agentui.pro/components/agents/message.md): Composable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent rows.
- [Message Scroller](https://www.agentui.pro/components/agents/message-scroller.md): A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
- [Prompt Input](https://www.agentui.pro/components/agents/prompt-input.md): An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
- [Todo List](https://www.agentui.pro/components/agents/todo-list.md): A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
- [Code Block](https://www.agentui.pro/components/agents/code-block.md): A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
- [Approval Card](https://www.agentui.pro/components/agents/approval-card.md): A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
- [File Diff](https://www.agentui.pro/components/agents/file-diff.md): A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
- [Tool Result](https://www.agentui.pro/components/agents/tool-result.md): A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
- [Streaming Response](https://www.agentui.pro/components/agents/streaming-response.md): A stable response surface with completion actions, rendered content, and an expandable source summary.
- [Image Generation](https://www.agentui.pro/components/agents/image-generation.md): A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
- [Tool Approval](https://www.agentui.pro/components/agents/tool-approval.md): A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.
- [Citations](https://www.agentui.pro/components/agents/citations.md): Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
- [Agent Activity](https://www.agentui.pro/components/agents/agent-activity.md): One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
- [Agent Loading States](https://www.agentui.pro/components/agents/loading-states.md): Three thoughtful loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
- [AI Sidebar](https://www.agentui.pro/components/agents/ai-sidebar.md): A collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware labels.
- [Chat App](https://www.agentui.pro/components/agents/chat-app.md): A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.

## Usage for agents

1. Fetch the index to discover components.
2. Fetch a component detail JSON for files, deps and source.
3. Drop files into the user's project at the listed paths.
4. Install external `dependencies` listed on the entry.
5. Internal helpers (e.g. `@/lib/utils`) ship in the `files` array as `type: util`.