Product Design
Intermediate3 usesBeautiful UI — Crafted Primitives for AI Interfaces
A collection of crafted primitives for AI interfaces: loading states (pixel-grid loader), thinking traces (expandable steps/reasoning/search/coding), streaming text with inline sources and follow-ups, approval cards (human-in-the-loop), tool chips, task rows (live agent status), tabbed chat panels, recommendation cards with confidence meters, context cards, diff tables, records tables, filter tables, sidebar nav, command search, and insight cards with live charts.
ai-agentscomponentsreactfrontendchat-uidashboard
📋
Spec
Beautiful UI — Crafted Primitives for AI Interfaces
A collection of crafted, production-ready primitives for AI agent interfaces.
Components
- Loading State — pixel-grid loader with shimmer and elapsed time.
- Thinking — expandable traces with tabs: Steps, Reasoning, Search, Coding.
- Streaming Text — streamed answer with inline sources, actions, and follow-ups.
- Approval Card — human-in-the-loop questions the agent asks before acting.
- Tool Chips — code edits and tool calls as compact chips.
- Task Rows — live agent task status (running, failed, completed).
- Chat — tabbed chat panel with reasoning replies and a composer.
- Recommendation Card — agent suggestion with confidence meter and actions.
- Context Cards — retrieved knowledge chunks with their sources.
- Diff Table — AI-proposed edits sweeping through tabular data.
- Records Table — CRM-style grid with tags, sorting, and relationship status.
- Filter Table — status chips that reorganize live data.
- Sidebar Nav — workspace navigation with quick search.
- Search — command search with live filtering and empty state.
- Insight Cards — paged agent insights with scrub-ready live charts.
How to use
Browse the component gallery, preview each primitive live, and copy the code into your AI interface. Designed for agent dashboards, copilots, and chat surfaces.
