Beautiful UI

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

Tier B · UsefulComponent LibraryBlock CollectionReferencebeautifului.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.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Next.js
Styling: Tailwind CSS
Distribution: Copy-paste snippet, Web app / online tool
Platform: Web
Content type: Code
Agent readiness: Copy-paste ready code, Client-rendered shell
Accessibility: Unknown
Maturity: Stable

Components it ships

20 total

Spinner Reasoning Streaming Text Approval Request Tool Call Task Conversation Prompt Input Suggestion Sources Diff Proposal Table Data Grid Sidebar Command Palette Code Block Chart Message Actions Panel

Helps you build

AI Chat Panel AI Action Approval Agent Run History Chat Web App Filtering Items Search Results Analytics

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.

Also in AI Interface Kits

beautifului.devTier B