Skip to content
IndexDesign corpus
AI Interface KitsComponent LibraryBlock CollectionReferenceMITFreeReact

Beautiful UI

20 MIT interaction patterns for agent UIs: thinking, streaming, approvals, diffs

Aboutbeautifului.dev

Beautiful UI is a single-page set of 19 interaction patterns for AI-native products, built by the product design studio Turbo (Shane Levine) and released under MIT. Each pattern is a live, interactive demo of a moment in a human-agent conversation — thinking traces, streamed answers with inline sources, human-in-the-loop approval cards, tool-call chips, agent task rows, retrieved context chunks, AI-proposed diff tables. It is closer to a reference implementation of AI UX than a packaged library: there is no CLI, no npm package, and no documented registry. The domain now redirects to beautifului.dev.

For an agent

Reach for this when you are designing the *states* of an agent product — what a thinking trace, an approval request, or a proposed diff should look and feel like — and use Vercel AI Elements or HeroUI Pro's chat set when you need an installable dependency instead. There is no install command or public repo that I could verify, so plan to reimplement each pattern from the demo behaviour and its named parts (elapsed-time loader, expandable step traces, confidence meter, context chunks with source badges). The demo data is deliberately fictional (an ice-cream shop CRM), so do not copy its labels.

Why it is here. It names and shows the specific screens agent products keep getting wrong — approval, tool activity, retrieved context, proposed edits — with the taste of a design studio rather than a component dump. As a shape reference for AI UX it is worth more than most installable kits.

Install command, framework, licence and component list.
Components it ships20 total
Helps you build7
Notable for
  • 19 AI-native interaction patterns
  • human-in-the-loop approval card
  • AI-proposed diff table
  • MIT, by Turbo / Shane Levine
  • showcase page, no CLI or repo
Provenance

Verified 2026-08-29. HTTP 200. https://beautiful-ui-five.vercel.app/ (308 redirect), https://www.beautifului.dev/ (full DOM text, all 19 component names + anchors), https://www.beautifului.dev/license (MIT, Shane Levine), /registry.json and /llms.txt probed and both return the app shell, web search for a public repo. Re-checked 2026-08-29: the canonical URL is now https://www.beautifului.dev (200, 628 KB); the old beautiful-ui-five.vercel.app address still 308-redirects there, so this record now names the production domain. The set has grown from 19 patterns to 20 — the page numbers its sections 01 through 20 and adds a Fine-tune Card, a Recommendation Card, a Flowchart and a Filter Table since the last check. The footer still credits the product design studio Turbo.

Related resourcesAI Interface Kits