Design Atlas

← Atlas

AI interfaces ​

Interfaces for AI products: chat and agent components, patterns for oversight and trust, visuals for thinking and speaking states, and tools for reviewing what an agent built.

Start here ​

  • The Shape of AI — 57 AI UX patterns in six groups, each with trade-offs and real product examples; the place to name what you need before picking components.
  • Prompt Kit — MIT shadcn components for chat UIs: prompt input, auto-scrolling conversation, reasoning, tool-call and citation views.
  • termcn — terminal components for coding-agent front ends, including agent chat, tool approval and per-file diff review.
  • Orbkit — 33 shader orbs that show whether a voice or chat agent is idle, thinking or speaking, driven by real audio levels.
  • Agentation — a dev-only toolbar that turns click-to-annotate feedback into selectors and file paths an agent can act on over MCP.

All sources ​

Showing 50 of 52 sites

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • AgentationReact toolbar that turns click-to-annotate feedback into selectors and file paths agents can act on over MCP.Verdict Very usefulConditional licence, source availableAgent channels mcp, skillReviewed
  • agentcnBackend agent recipes in shadcn format (19 recipes × 4 frameworks), including one that extracts a DESIGN.md; no UI.Verdict NicheShip licence, open source permissiveAgent channels llms-txt, registry, api, skillReviewed
  • AI UX PlaygroundA practical AI-interface reference with named patterns, live interaction demos, product teardowns, and agent skills.Verdict Very usefulLook only licence, not statedAgent channels llms-txt, skillReviewed
  • AlternativeToA searchable software directory that helps designers discover comparable products, interfaces and further visual references.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • apmix.aiAn AI API landing page that pairs a geometric mesh with side-by-side terminal sessions and a usage dashboard.Verdict NicheConditional licence, proprietary paidAgent channels apiReviewed
  • Auri (auri.ai)Interactive demos of an AI keyboard, visual chat and notes show how assistant features can fit into everyday writing flows.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • BananiPublic UI-screen references and an AI editor for turning prompts or screenshots into editable prototypes.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Beautiful UI21 polished MIT shadcn components for agent UIs: thinking states, approvals, tool chips, task rows, diff tables and a prompt bar.Verdict Very usefulShip licence, open source permissiveAgent channels registryReviewed
  • bendayAn MIT React component that turns a logo into a halftone mark with 21 controllable loading and agent-state animations.Verdict UsefulShip licence, open source permissiveAgent channels registry, llms-txtReviewed
  • BestAIBuilderRanked index of 101 AI website builders scored on craft, speed, control and value, with a radar comparison and a publisher disclosure on every entry.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • beUIMIT motion components, agent UI and charts with llms.txt, JSON API, agent skill and hosted MCP; paid Pro adds blocks and templates.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, registry, api, skillReviewed
  • CardinalRevenue-AI landing page with a warm graph-paper grid, hand-drawn annotations and small illustrated metric cards.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • ConduitHospitality AI site that pairs a restrained serif hero with a live-looking omnichannel inbox and an escalation workflow.Verdict UsefulConditional licence, proprietary paidAgent channels mcp, api, llms-txtReviewed
  • CotoolSecurity AI landing page with a saturated blue field, dotted terrain artwork and a highlighted phrase inside its hero headline.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Fluid FunctionalismSpring-driven shadcn registry (Radix or Base UI) with proximity hover, AI chat parts and copy prompts.Verdict Very usefulShip licence, open source permissiveAgent channels registry, promptsReviewed
  • FuserA polished recipe page explains an image workflow with a connected input, recipe and output diagram.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • GAIA UIMIT, shadcn-compatible React components for AI assistants, with documented registry installation and a focused agent-app visual language.Verdict UsefulShip licence, open source permissiveAgent channels registryReviewed
  • Halaska UIMIT React kit for AI products, pairing live sample screens with reusable interaction patterns and components.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • HandyOpen-source speech-to-text app that pastes what you say into the focused field, sold on privacy and a single push-to-talk shortcut.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • HextaUIshadcn/ui blocks for AI chat interfaces, covering streaming, tool calls, voice and agent states, with an MCP server and Markdown docs.Verdict UsefulConditional licence, mixedAgent channels mcp, llms-txtReviewed
  • Jessy In's GallerySocial art gallery built on MoMA's open collection, with shared two-player curation, live chat, postcards and WebMCP tools for browser agents.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Keel WorkspaceA polished CRM workspace demo with dense pipeline metrics, source-backed agent decisions and keyboard-first review controls.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • KobraProprietary component system for AI and agent product interfaces, with an llms.txt index and a markdown API per component.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txt, apiReviewed
  • Kokonut UIPlayful Motion components with AI inputs; llms.txt links per-component Markdown pages with full source.Verdict Very usefulConditional licence, mixedAgent channels llms-txt, registryReviewed
  • Libraries.dev: Thinking orbsMIT React loading orbs with nine AI "thinking" states, copy-prompt buttons and an installable agent skill.Verdict UsefulConditional licence, mixedAgent channels prompts, skillReviewed
  • Liquid Orb EditorLive WebGPU editor for liquid-glass orbs, with shareable parameter links and Web or SwiftUI/Metal code export.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • LocalMode UIMIT shadcn registry of local-first AI components and runnable browser demos for chat, RAG, vision, audio and privacy flows.Verdict UsefulShip licence, open source permissiveAgent channels cli, registryReviewed
  • Luma (AI)Creative AI product site with a dark, editorial hero, production-focused workflow examples and pricing for multimodal creative agents.Verdict NicheConditional licence, proprietary paidAgent channels apiReviewed
  • MagicPathDesign interactive interfaces on a shared canvas, then browse live prototypes and bring selected designs into code with supported agents.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • mcpcnYoung MIT registry of 30 MCP App widget blocks (commerce, events, forms) with an optional ChatGPT Apps SDK theme.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registry, api, skillReviewed
  • microchartsMIT React charts sized for sentences, tables and KPI cards, with a catalog and seven live example apps.Verdict UsefulShip licence, open source permissiveAgent channels mcp, llms-txtReviewed
  • ModulifyPrompt-to-website builder that ships a Postgres database, CMS, forms, analytics and hosting together, with an llms.txt that maps the whole product.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txtReviewed
  • Nous PortalA dark AI service portal with a fixed resource rail, editorial typography, model catalog and clear subscription comparisons.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • OpenShaderLibrary117 shader effects written once and exported for React, React Native and SwiftUI, so web and native apps share the same visuals.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txtReviewed
  • Orbkit33 state-driven WebGL orbs for voice and chat agents, with llms.txt, a skill, a JSON API and a shadcn install.Verdict UsefulConditional licence, mixedAgent channels llms-txt, registry, api, skillReviewed
  • PanelUIMIT React Native component library for Expo, with Tailwind styling, live examples and agent resources.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, mcp, skillReviewed
  • PoeticEnterprise AI landing page with oversized type, proof metrics, a product walkthrough and a recovery example for evolving workflows.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Prompt KitMIT shadcn components for chat UIs: prompt input, auto-scrolling conversation, reasoning, tool-call and citation views.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, registryReviewed
  • React Bits ProPaid library of animated React work — 230 components, 300 page blocks and 300 app-UI blocks — with a counted, category-by-category inventory.Verdict Very usefulConditional licence, proprietary paidAgent channels promptsReviewed
  • SevallaCloud hosting landing page that explains apps, databases, storage and static sites through product previews, location data and MCP workflows.Verdict NicheConditional licence, proprietary paidAgent channels mcp, llms-txt, apiReviewed
  • shadercnWebGPU ports of the Orbkit orbs in shadcn registry format; the orb files are non-commercial despite the MIT repo.Verdict NicheConditional licence, mixedAgent channels llms-txt, registry, api, skillReviewed
  • Smooth UI198 MIT animated components with a large AI-interface set, llms.txt, JSON catalog and a no-auth REST API.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, cli, registry, apiReviewed
  • Spectrum UIFree Apache-2.0 animated shadcn components and blocks, strong on AI-assistant, chart and empty-state blocks, with an MCP server.Verdict UsefulShip licence, open source permissiveAgent channels mcp, registryReviewed
  • Swift PiecesAnimated SwiftUI components for iOS with live interaction previews, single-file source and agent installation paths.Verdict UsefulConditional licence, mixedAgent channels mcp, llms-txt, cli, registryReviewed
  • termcnInk and OpenTUI terminal components via shadcn CLI, including agent chat, tool-approval and diff-review widgets.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, registry, api, skillReviewed
  • The Shape of AIEmily Campbell's 57 AI UX patterns in six groups, each with trade-offs and real product examples; CC BY-NC-SA.Verdict Very usefulConditional licence, cc noncommercialAgent channels noneReviewed
  • Thinking OrbsAnimated React and JavaScript status indicators for AI interfaces, with a live gallery of states, shapes and rendering styles.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, promptsReviewed
  • Transitions.devCurated product-UI transitions as portable CSS, with an agent skill, CLI and live Refine timeline.Verdict Very usefulConditional licence, mixedAgent channels skillReviewed
  • Unsiloed AIDocument-AI site that turns parsing into a layered illustration, with annotated document regions and side-by-side output examples.Verdict UsefulConditional licence, proprietary paidAgent channels apiReviewed
  • VariantExplore a prompt-led stream of live interface experiments, then use the examples as inspiration for your own visual direction.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed

Patterns worth reusing ​

  • Name the pattern before choosing components, and check how shipping products handle it and what it costs (The Shape of AI).
  • Show the plan before acting, keep plan, execution log and evidence as linked views, and give every agent step a visible state: queued, running, waiting for approval, failed, done (The Shape of AI).
  • Put an approval step in front of risky actions: plan cards with keyboard shortcuts (Kobra), tool-approval prompts with an explicit risk level (termcn), and accept or reject per hunk or per file for edits (Kobra, termcn).
  • Collapse reasoning and tool calls by default behind a one-line status, expandable on demand (Prompt Kit, termcn).
  • Keep a conversation pinned to the newest message only while the user hasn't scrolled up, and offer a button to jump back down (Prompt Kit, Kobra).
  • Show citations as hover cards with title and domain, point them at the exact passage, and say plainly when a source is missing (Prompt Kit, The Shape of AI).
  • Give each agent activity its own visual and motion vocabulary, such as a shimmer on the status text instead of a spinner (Libraries.dev: Thinking orbs, Transitions.dev, Prompt Kit).
  • Drive an agent's avatar from app state and real input and output audio levels, not hand-timed animation (Orbkit).
  • In a widget inside a chat host, allow one primary and one optional secondary action, move richer navigation to fullscreen, and scope the host theme to a data attribute (mcpcn).
  • Give agents selectors, file paths and component names rather than visual descriptions, and make "fixed" an explicit status on each note (Agentation).
  • Give the AI a consistent name, colour and icon so people always know which content it produced (The Shape of AI).

Pitfalls ​

  • Licences range from open to ideas-only: Kobra is proprietary, Agentation is source-available and needs a commercial licence to redistribute, Orbkit's 19 XorDev ports and all shadercn orbs are non-commercial, and The Shape of AI's text is CC BY-NC-SA.
  • Most of these are young projects with one maintainer (mcpcn, agentcn, termcn, shadercn, Orbkit); pin what you install.
  • Demos and recipes can involve keys: Prompt Kit's primitive demos store a pasted OPENAI_API_KEY in localStorage, and agentcn's recipes call paid third-party APIs with keys you supply.
  • mcpcn's theme covers looks only; display modes, widget state and tool calls still go through the host's Apps SDK bridge, and only the ChatGPT styling is documented.
  • Agentation's MCP server accepts private-network origins by default and its CORS setting is not authentication; don't open it to * on a shared network.
  • Each orb is its own GPU context: use one per agent and keep fewer than about a dozen on a page (Orbkit). shadercn needs WebGPU and documents no fallback.
  • Pattern screenshots show other companies' products and date quickly as those products change (The Shape of AI).