By Mehdi HassanAI features fail in a different way from ordinary software. A button either works or it doesn't. A model gives an answer that is mostly right, sometimes wrong and occasionally confidently invented, and the interface has to make that usable. Most advice on the subject is scattered across vendor blogs and pattern lists. This guide pulls it into one model with four parts, then links to deeper guides on each pattern. We write it as a team that designs these interfaces in Figma and builds them in React and Next.js.
What is AI product UX?
AI product UX is the practice of designing interfaces for features whose output comes from a probabilistic model. The core difference from ordinary UX is uncertainty: the same input can produce different outputs, and some outputs are wrong. Good AI UX makes that uncertainty visible and manageable instead of hiding it.
That changes what designers spend time on. In a normal form, the hard part is the input. In an AI feature, the hard parts are the waiting state, the output, the explanation and what happens when the output is wrong. It also changes who needs to be in the room. Prompt behavior, latency and cost are design constraints, so the people writing prompts and building the streaming pipeline need to work alongside the designer from the first sketch.
Concern | Ordinary software UX | AI product UX |
|---|---|---|
Output | Deterministic | Varies per run, can be wrong |
Waiting | Short, predictable | Long, streamed, multi-step |
Errors | Clear failure messages | Plausible but incorrect answers |
User control | Inputs and settings | Prompts, edits, approvals, stop and undo |
Trust | Earned by reliability | Earned by transparency and recovery |
Cost | Fixed per action | Varies with tokens, tools and retries |
How do you design AI product experiences that users trust?
You design AI experiences users trust by handling four jobs deliberately: set accurate expectations, make the reasoning and sources visible, keep the user in control of anything consequential, and make recovery from errors fast. Trust comes less from the model being right and more from the user knowing when to rely on it.
Expectations
Tell users what the feature is for, what it can't do and how reliable it is, in the interface itself. Suggested prompts, examples and scoped labels do more than a disclaimer.
Transparency
Show where an answer came from and what the system did: sources, steps taken, tools used and confidence where you can measure it.
Control
Let users edit outputs, approve actions before they happen, stop generation and choose how much autonomy the feature has.
Recovery
Make wrong outputs cheap: regenerate, edit, undo, report and fall back to a manual path. Collect feedback where it improves the system.
These four jobs show up in every pattern below. A citation is transparency. An approval step is control. Undo is recovery. When you review an AI feature, ask which of the four each element serves. Elements that serve none are usually decoration, like a sparkle icon on a button that could have said what it does. Our piece on the sparkle icon problem covers that habit in detail.
Users don't need the model to be perfect. They need to know when to check it, and how to fix it fast.
Which AI interaction model should your product use?
Choose the interaction model before designing screens: inline assistance inside existing workflows, a chat interface, a copilot panel beside the work, or an agent that acts on its own. The model decides how much autonomy the AI has and how much the user must supervise.
Model | What it does | Best for | Main UX risk |
|---|---|---|---|
Inline assist | Suggests or transforms content in place | Writing, editing, data cleanup | Suggestions that interrupt |
Chat | Open-ended question and answer | Exploration, support, research | Blank-box paralysis |
Copilot | Side panel aware of the current work | Complex tools and documents | Context the user can't see |
Agent | Plans and executes multi-step tasks | Repetitive work across tools | Actions the user didn't expect |
Most products need more than one, and the most common mistake is defaulting to chat for everything. Our comparison of copilot vs agent vs chat gives a verdict by use case. For the inline route, see inline AI patterns that fit existing workflows. If you're adding AI to a product that already exists, start with our UX readiness checklist for adding AI to SaaS.
How do you set expectations in an AI interface?
Set expectations by showing users what good input looks like and what the feature is scoped to, before they type. Suggested prompts, templates, examples of output and clear labels about scope prevent the two failures of a blank input box: users who don't know what to ask, and users who ask for things the feature can't do.
- Scope the entry point: "Summarize this contract" sets better expectations than "Ask AI anything".
- Offer starters: three to five suggested prompts based on the user's current context.
- Show input requirements: file types, length limits and what context the AI can see.
- State limits in place: a short note near the output, such as which data the answer is based on, beats a generic disclaimer in the footer.
- Make cost visible: if actions consume credits, show the cost before the user commits.
Our guide to prompt UX and input design covers starters and templates. For credit-based products, see pricing and usage UX for AI products. And because users increasingly expect AI to remember context across sessions, designing what the AI remembers is part of setting expectations too.
How do you make AI answers transparent?
Make AI answers transparent by showing sources, the steps the system took and its limits, in a form non-technical users can check quickly. Transparency isn't a wall of reasoning text. It's the minimum evidence a user needs to decide whether to trust a specific answer.
The strongest pattern is the citation: a numbered marker in the answer that links to the exact passage or record it came from. For agents, the equivalent is a visible plan and a task log, so users can see which tools were called and what changed. For predictions and scores, it is a short explanation of the main factors, written for the person reading it rather than for the data scientist.
What transparency looks like in three common features
A research assistant shows inline citations that open the source passage in a side panel, and marks claims it couldn't source.
An agent that updates CRM records shows its plan before running, then a log of each change with a link to the record and an undo control.
A risk score in a fintech dashboard shows the three factors that moved the score most, in plain language, with a link to the full model documentation for the people who need it.
Read more in our guides to showing sources and citations in AI answers and explaining AI decisions to non-technical users.
How much control should users have over AI actions?
Users should have control proportional to the consequence of the action. Low-risk outputs, like a draft paragraph, can appear directly with edit and regenerate. High-risk actions, like sending emails, changing records or spending money, need an approval step, a visible plan and undo.
Risk level | Example | Control pattern |
|---|---|---|
Low | Rewrite a sentence | Show result, offer edit and regenerate |
Medium | Draft an email to a customer | Draft for review, user sends |
High | Update 200 CRM records | Plan preview, approval, batch undo |
Critical | Move money or delete data | Explicit confirmation, limits, audit log |
Agents need the most control design, because they act across several steps. The core patterns are plans users can edit before execution, approval gates at risky steps, interrupt controls while the agent runs, and rollback afterwards. Our guide to agentic UX goes pattern by pattern, and human-in-the-loop design covers approval queues and review for teams.
How do you design for AI errors and hallucinations?
Design for AI errors by assuming some outputs will be wrong and making them cheap to catch and fix. That means making uncertainty visible, giving fast recovery paths like regenerate, edit and undo, offering a manual fallback, and collecting feedback that the team actually reviews.
- Distinguish failure types: a timeout, a refusal, a tool error and a wrong answer each need different messaging.
- Keep partial work: if streaming fails halfway, keep what arrived and offer to continue.
- Make editing the default fix: users would often rather correct a near-miss than regenerate from scratch.
- Flag low-confidence output: when retrieval found nothing relevant, say so instead of answering anyway.
- Close the loop: thumbs and corrections should feed an evaluation process, or they teach users that feedback goes nowhere.
Our guides to recovery patterns for AI errors and hallucinations and AI feedback UI go deeper on each.
What are the key AI UI patterns to know?
The key AI UI patterns are the chat thread, inline suggestions, streaming output, distinct loading states, citations, visible plans, approval gates, undo, feedback controls and memory settings. Each one maps to at least one of the four trust jobs.
Pattern | Trust job | Deeper guide |
|---|---|---|
Chat thread anatomy | Expectations, recovery | |
Thinking and tool-use states | Transparency | |
Inline citations | Transparency | |
Plans, approvals, logs | Control | |
Review queues | Control | |
Regenerate, edit, undo | Recovery | |
Thumbs and corrections | Recovery | |
Memory controls | Expectations, control |
To see these patterns in shipped products, our roundup of AI UX examples worth copying describes what each one does well. When you have a dozen of these patterns in a product, they need to be components, not one-off screens. Our guide to design systems for AI products covers the components for chat, streaming and agents.
What should engineers know when building streaming AI interfaces?
Engineers building streaming AI interfaces should design for partial output, interruptions, retries and variable cost from the start. Streaming changes how React components render, how errors surface and how layout behaves, so the design and the implementation have to be planned together.
Render incrementally without layout jumps
Stream tokens into a container that grows smoothly. Reserve space for code blocks, tables and citations so content doesn't shift under the user's cursor.
Parse structure as it arrives
Markdown, tables and citation markers arrive in fragments. Render a safe intermediate state, then upgrade it once the block is complete.
Make stop a first-class action
A stop control should cancel the request on the server, not just hide the stream, so it also stops cost.
Separate the states
Queued, thinking, calling a tool, streaming, done and failed are different UI states. Model them explicitly in component state, not as one loading flag.
Handle failures mid-stream
Keep partial output, show what failed and offer retry or continue. Log the failure with enough context for the team to reproduce it.
Respect accessibility
Announce completion to screen readers instead of every token, keep focus stable and let users pause motion-heavy indicators.
Search and filtering matter in AI products too, especially when results are retrieved or generated in bulk. Our guide to search and filter UX for SaaS covers faceted patterns, and designing for power users and beginners helps when the same AI feature serves both.
How should an AI startup approach design and hiring?
An AI startup should design the core AI interaction early, test it with real model output rather than ideal mockups, and work with designers who understand streaming, agents and evaluation. A team that owns words, design and code together avoids the gap between a beautiful mockup and a frustrating streamed reality.
The marketing site has a related job: explaining what the product does to people who haven't used it. Our guides to explaining AI products on your website and website design for complex products cover that side. When you're ready to evaluate partners, read how to pick an AI product design agency, and use our UI/UX glossary to decode the terms designers use. If conversion is the issue rather than the product, a CRO audit is the better first step, and our guide to what a CRO audit costs explains the scope.
