Opening demo
The demo workspace is loading. This can take a little longer on slow mobile networks.
Agent DemoLoading
The demo workspace is loading. This can take a little longer on slow mobile networks.
A copyable showcase of all 19 beautifului.dev-inspired agent-UX primitives — from prompt bar, thinking trace, and streaming text to tables, nav, search, and selection actions — implemented on our ai-elements and shadcn base.
Composer with @-mention source picker, /-command picker, model selector, and dictation slot. Enter submits; picked sources and commands pin as removable chips.
Pixel-grid loader for long-running work — drive (chevron), dots, and orbit variants on a shared wavefront, plus a shimmering label and a live elapsed timer.
Expandable chain-of-thought rows: each step has a status icon, elapsed time, and a nested detail. Click a row to open it; a live run autoplays the steps.
A paragraph that streams itself in character-by-character with a blinking caret. Play / pause / reset controls show the lifecycle states.
Compact chips representing tool calls with pending / running / done / error status. Click a chip to expand its input and output preview.
Agent task rows enter staggered; the active row expands to detail steps mid-run while the last walks pending → failed → done. Every row stays expandable.
Fixed-height tabbed chat panel — the user bubble slides in, then reasoning replies arrive one at a time with source · tool · elapsed labels. Composer is a stub.
A card where the agent pauses and asks a yes / no / edit question before acting. Buttons resolve the card in place and record the verdict.
Recommendation with a 3-bar confidence meter and a single CTA. Alternatives opens an in-card drawer that promotes a different option in place.
Retrieved knowledge chunks with character counts and PDF / CSV source badges — the citation chips pop in a beat after the cards land.
Generated code streams in line-by-line behind a block caret — hand-tinted tokens, line numbers, and a live copy button that confirms in place.
A proposed table edit plays once: red flash, then strikethrough removal and a green added row. The table rests on the completed diff.
Compact CRM grid — select-all checkbox with indeterminate state, sortable headers, connection-strength dots, real links, footer count and New property.
A filter input and status chips compose to show and hide task rows; hidden rows collapse with a transition instead of popping out.
Command-style search with live filtering, highlighted match text, a clear affordance, and an empty state.
Headline metrics with signed deltas and hand-drawn SVG sparklines — the trend shape does the talking, no chart dependency.
Inspector card — Radius and Opacity sliders scrub a live preview chip; the header flags the edited state and offers reset.
Hover or focus a row to float a pill action bar — copy link, comment (expands an inline input), and an overflow menu.