React agent UI components
The parts an AI agent's screen is made of: a composer to type into, messages, a thinking state while the model works, and Pro pieces such as Agent Run, Tool Call Row and Approval Card for runs, tool calls and approvals.
Message takes an AI SDK UIMessage, so the messages from useChat() render as they are.
35 components in Eased UI are built for AI products; 7 of the 12 here are free under MIT.
12 components, running
A chat composer that grows on a spring, opens an attachments row with Auto Height, and morphs its Send arrow into a Stop square while a reply streams.
npx shadcn add https://eased.dev/r/composer.jsonA chat message: the user's in a sunken bubble on the right, the assistant's flush on the left.
npx shadcn add https://eased.dev/r/message.jsonThe line above a reasoning model's answer: the label shimmers while a seconds counter rolls, then "Thinking" morphs into "Thought for 12s" and the reasoning folds away a second after the answer starts.
npx shadcn add https://eased.dev/r/thinking-bar.jsonA small living orb for an assistant's state: colour fields drift inside a glassy sphere and it breathes, idle, listening, thinking or speaking, with its speed tied to the token rate so it keeps pace with the stream.
npx shadcn add https://eased.dev/r/agent-orb.jsonShimmer text for React: a soft band of light sweeps across a label while something is working.
npx shadcn add https://eased.dev/r/shimmer-text.jsonTypography for rendered markdown and rich text, from one element map in two densities: chat for replies and document for long reads.
npx shadcn add https://eased.dev/r/prose.jsonA chat attachment: images as a thumbnail that sharpens from a blur once decoded, files as a typed chip.
npx shadcn add https://eased.dev/r/attachment.jsonAn agent's run as it happens: steps stream onto a rail and rise once as they land, with each step's tool calls inline.
npx shadcn add @eased-pro/agent-runA tool call as a flush row: while it runs a band of light travels down its left rule and the seconds roll; when it lands the check draws and the result count rolls up; an error shakes it once.
npx shadcn add @eased-pro/tool-call-rowA permission request where the diff is the thing being approved: the change fills the card and the reason is one muted line.
npx shadcn add @eased-pro/approval-cardA Dynamic Island for background work: a pill docked to the app edge that morphs as an agent, build or upload goes from running to needs-you to done, its width, height and corners on one bouncy spring.
npx shadcn add @eased-pro/activity-pillThe screen a team watches agent runs on: a runs list, the selected run with its status badge, rolling totals, Thinking Bar and Agent Run rail, and an inspector that follows the open step.
npx shadcn add @eased-pro/agent-run-console
Pieces, not a whole dashboard
The AI blocks page is about whole screens for agent products, such as a run console or an approval inbox. This page is the smaller pieces you build a chat or agent view from, so you can drop them into the app you already have. AI blocks
How to install
1.Add a free component with the shadcn CLI:
npx shadcn add https://eased.dev/r/composer.json2.Or have your coding agent do it. Add the Eased MCP server, then ask for what you're building: Quickstart for agents
claude mcp add --transport http eased https://eased.dev/api/mcp3.Pro components install from the private @eased-pro registry with a personal token: Pro setup
npx shadcn add @eased-pro/agent-run
Questions
Does Message work with the Vercel AI SDK?
Yes. It renders the text and file parts of an AI SDK UIMessage, so you can map over useChat().messages and pass each one in.
Which of these are free?
Composer, Message, Thinking Bar, Agent Orb, Shimmer Text, Prose and Attachment Chip are free under MIT. Agent Run, Tool Call Row, Approval Card, Live Activity Pill and Agent Run Console are in Pro, a one-time licence.
Can my coding agent install them?
Yes. The Eased MCP server gives Claude Code, Cursor, VS Code and Codex tools to search components, read their docs and get the install command. For an agent without MCP, point it at https://eased.dev/llms.txt.
How is this different from the AI blocks page?
The blocks page shows full agent screens built from many components. This page lists the components themselves, so you can pick only the ones your interface needs.