Build agent UIs faster

Production-ready React components and docs for chat, tools, and AI workflows, ready to drop into your app.

Get Started Explore

Hello there

Agent UI preview

Show me the latest changes.

Added tool cards and layout tweaks.

Can you also include a mobile preview?

Yes, the components are fully responsive!

Show me the error handling states too.

Included error cards and retry affordances.

Any accessibility updates in this pass?

Improved focus states, increased contrast, and added clearer labels.

Shimmering status

Reviewing component coverage and preview density.

Custom toolPreview

Release Notes

Welcome to the Agent UI showcase! Here's a breakdown of the latest features and improvements designed to enhance your development workflow.

✨ Key Highlights

Streaming Markdown: Real-time rendering of assistant responses.
Interactive Tool Cards: Native UI for Bash, Search, and planning tools.
Responsive Layouts: Optimized for both side-by-side and mobile views.

📊 Component Status

Component	Status	Priority
MessageList	✅ Ready	High
InputBar	🧪 Beta	Medium
Markdown	✅ Ready	High

🛠️ Implementation Example

Integrating the Markdown component is straightforward:

tsx

import { Markdown } from '@/lib/agent-ui';
export function ChatMessage({ content }) {  return <Markdown content={content} />;}

import { Markdown } from '@/lib/agent-ui';
export function ChatMessage({ content }) {  return <Markdown content={content} />;}

[!TIP] Use the className prop to customize the typography and spacing of the rendered markdown.

Last updated: March 2026

Edited page.tsx

+9-4

Ran command: ls

$ ls -la

app lib README.md

Ran commandpnpm lint

No matchesInputBar

Readinput-bar.tsx

Audit components

Tighten spacing

Ship updates

plan-plan-1.md

Refresh UI previews

Unify tool card spacing and interaction patterns so docs previews feel cohesive across all tool components. Also update the plan tool to support inline editing of the plan title and summary. Also update the plan tool to support inline editing of the plan title and summary. Also update the plan tool to support inline editing of the plan title and summary.

Standardize card chrome (header height, borders, radius, and muted labels) for Plan, Approval, Edit, Search, and Todo previews.
Align content density and typography so title, metadata, and body text read consistently at a glance.
Normalize interaction states: loading shimmer, pending indicators, hover affordances, and disabled action buttons.
Validate responsive behavior on narrow widths, including truncation rules and action-row wrapping.
Run a visual QA pass in both light and dark themes and tighten spacing where cards feel too loose or cramped.

Outcome: preview gallery feels intentionally designed, easier to scan, and stable across viewport sizes.

Searched for “best flights to Tokyo”

United UA837 SFO→NRT · $1,105 economygoogle.com/flights

SFO–Tokyo · 14 results from $1,089expedia.com

ANA NH7 Direct SFO→NRT · $1,240 rtgoogle.com/flights

Ran commandpnpm lint

No matchesInputBar

Readinput-bar.tsx

Command failed

The sandbox exited with status 137 while running pnpm test.

report.pdf22.5 KB

preview.png117.2 KB