By Mehdi HassanWhat components does a design system for AI products need?
A design system for AI products needs a set of components that handle slow, streamed and uncertain output: prompt input, message bubbles that stream, loading states that say what the model is doing, citations, feedback, agent plans, approvals, activity logs and undo. Standard kits cover buttons and forms well and almost none of this.
AI product UX content is growing fast, but most of it is vendor opinion with little user data. The patterns people broadly agree on are visible plans, approvals and logs, undo, citations, distinct loading states and showing uncertainty. This guide turns those into a component catalog with states, so every AI feature in your product behaves the same way. It builds on the foundations in our guide to design systems for startups.
Component | Job | Key states |
|---|---|---|
Prompt input | Collect a request, with attachments and context | Empty, typing, with attachments, submitting, disabled, over limit |
Message (assistant) | Show model output as it arrives | Thinking, streaming, complete, stopped, error, regenerated |
Activity indicator | Say what the model is doing right now | Thinking, searching, reading, running tool, writing |
Citation and source | Link claims to their source | Inline marker, hover preview, source list, source unavailable |
Feedback control | Capture quality signals | Neutral, positive, negative with reason, submitted |
Plan or step list | Show what an agent will do or is doing | Proposed, approved, running, step done, step failed, complete |
Approval card | Ask before a risky action | Pending, approved, edited, rejected, expired |
Activity log | Record what an agent did | Collapsed summary, expanded detail, filtered |
Undo and version control | Reverse AI changes | Available, countdown, undone, not reversible |
How should a design system handle streaming and loading states?
A design system should treat AI waiting as several distinct states, not one spinner. Before output starts, the model may be thinking, searching or calling a tool. Once it starts, text streams. A wait is easier to understand when each phase has its own label and visual, and when users can stop it.
- Thinking: a quiet indicator with a short label, before any output exists.
- Working: a named action (Searching the web, Reading 3 files, Running query) so the wait feels purposeful.
- Streaming: text appears progressively; the layout must not jump as lines are added.
- Stopped: the partial answer stays, with a clear marker that it was stopped and an option to continue or regenerate.
- Failed: a plain message saying what happened and a retry, keeping the user's prompt intact.
These sit alongside your general loading patterns, but they shouldn't reuse skeleton screens built for fetching data. A skeleton promises a known layout. AI output has an unknown length and shape. Put a Stop control on every streaming state, as a standard part of the component, so no feature ships without it.
Which components make AI output trustworthy?
Citations, uncertainty markers and feedback controls make AI output trustworthy, because they let users check claims and correct mistakes. Make them system components, so a citation looks and behaves the same in chat, in a generated report and in a search result.
A citation component needs an inline marker, a hover or tap preview showing the source title and snippet, and a full source list at the end of the answer. It also needs a state for a source that can't be opened. Uncertainty is harder: a short, consistent label for low-confidence answers works better than percentages users can't interpret. Our guide to AI product UX explains when to show uncertainty and how.
Hypothetical example: one citation component across three surfaces
For example, suppose a legal research startup shows AI answers in a chat panel, in exported memos and in a search results page. Without a system component, each team builds citations differently: footnote numbers in one place, inline links in another, nothing in the export.
With one citation component, each surface uses the same marker, the same preview and the same source list. The memo export renders the list as footnotes, using the same data. Users learn once how to check a claim, and the team writes the content rules for citations once in the docs.
What components do AI agents need?
AI agents need components that show intent before action and record action afterward: a plan or step list, approval cards, an activity log and undo. Agents take actions with real effects, like sending emails, editing records or spending money, so the interface must make those actions visible and reversible where possible.
Plan
Before acting, the agent shows its intended steps in a step list. Users can approve, edit or cancel. Each step has a status as it runs.
Approval
Any irreversible or high-impact step triggers an approval card: what will happen, to what, with a preview. Approve, edit and reject are always present.
Progress
While running, the step list updates with the activity indicator, so users see which step is active and which are done.
Log
Every completed action lands in an activity log with time, action and result. A collapsed summary keeps it out of the way until needed.
Undo
Where an action can be reversed, an undo control appears immediately and stays in the log. Where it can't, the approval card says so before the action runs.
These are the same patterns as human-in-the-loop design, made reusable. Building them once means every new agent feature inherits approvals and undo rather than shipping without them.
How do prompt inputs and chat components fit the system?
Prompt inputs and chat messages are the most visible AI components, and they need more variants than a normal text field or comment thread. The prompt input handles multi-line text, attachments, context chips, suggested prompts, a model or mode picker and a send-or-stop button. The message component handles streaming, markdown rendering, code blocks, citations and actions like copy and regenerate.
Keep these as composable parts rather than one giant chat component. A copilot sidebar, a full-page chat and an inline edit box can then share the same input and message pieces. Our guides to AI chat interface design and prompt input design cover the patterns in detail.
How do you document and tokenize AI components?
Document AI components with extra attention to content and behavior, because the words and timing matter more than the visuals. Each one needs content rules for its labels (what the activity indicator says, how an error reads), the states it can be in, and what happens when a state lasts longer than expected.
Pros
- Every AI feature handles waiting, errors and approvals the same way
- Trust patterns like citations and undo ship by default
- New features build faster from tested parts
- One voice for the assistant across the product
Cons
- AI patterns are still changing, so components need frequent revision
- More states per component means more design and QA work
- Streaming behavior is hard to show in static Figma frames
- Teams may over-standardize patterns that haven't proven themselves yet
Tokens need a few additions too: a distinct color role for AI-generated content if you mark it, motion tokens for streaming and thinking indicators, and status colors for step states. Keep them in the same semantic layer as your other design tokens. For writing the docs themselves, see design system documentation.
Where should a startup start with an AI design system?
Start with the components your current AI feature already uses, built properly with every state: usually the prompt input, the streaming message, the activity indicator and feedback. Add plans, approvals, logs and undo before you ship your first feature that takes actions on a user's behalf.
For reference points, our collection of SaaS UI design examples includes products whose AI patterns are worth studying. If you want your AI surfaces explored before you build the components, our brand and design sprint is $3,000, fixed: a brand refresh or redesign plus 10 website or product explorations, delivered as Figma files. Details are on our pricing.
