Agentui

Overview

AgentUI is an open-source library of 21 React components for AI agent interfaces, covering chat, reasoning, tool activity, approvals and streamed responses. Components are built with Motion and Tailwind CSS 4 for React 19 and Next.js, and can be copied as source or installed with the shadcn CLI.

The library focuses on the states a long-running agent moves through: streaming text, tool calls, file diffs, task plans and human-in-the-loop decisions. Recent additions include a composer-ready model selector and a coding-agent usage dashboard, and a full chat-app component assembles the pieces into one interface.

Features

• Conversation primitives: Message rows, grouped bubbles, a message scroller that follows the live edge, and an auto-growing prompt input.
• Agent activity: One stream for reasoning, searches, tool calls and execution traces, plus a thinking shimmer and progress indicator.
• Approvals: Approval Card and Tool Approval for single or multiple-choice decisions and multi-step review flows.
• Code and diffs: Shiki-highlighted code blocks and file diffs with line numbers, live change counts and copy feedback.
• Grounded answers: Inline citation markers with a collapsible reference list.
• Task plans: A collapsible todo list with morphing status marks and a completion count.
• Model and usage: A model and reasoning-effort selector and a token usage dashboard by provider and model.

Tech stack

• React 19, Next.js
• Tailwind CSS 4
• Motion, Shiki, lucide-react

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @agentui/component-name