By Mehdi HassanHow do you add AI to a product without a chat sidebar?
You add AI without a chat sidebar by attaching it to the objects users already work on: a text field, a table row, a form, a document. The user stays in the same screen, the AI acts on what's in front of them, and the result appears in place for them to accept or reject.
Chat is a fine interface for open-ended questions, but it's a poor fit for repeated, structured work. Asking someone to describe their task in a sidebar, then copy the answer back, adds two steps to every job. Inline patterns remove those steps. This guide is part of our hub on AI product UX, and if you're still deciding between interaction models, our breakdown of copilot vs agent vs chat covers the bigger choice first.
The rule we use when scoping AI features is simple: if the user already knows what they want to do and only wants it done faster, the AI belongs inline. If they're exploring, a chat surface can earn its place.
What are the main inline AI UX patterns?
There are five inline AI UX patterns that cover most product use cases: suggest, rewrite, diff, autofill and summarize. They differ in how much the AI changes and how much the user has to review before the change sticks.
Pattern | What the AI does | Best for | Review needed |
|---|---|---|---|
Suggest (ghost text) | Proposes the next words or value in gray | Writing, search, code, short replies | Low: Tab to accept, keep typing to ignore |
Rewrite in place | Replaces selected text with a new version | Tone, length, clarity edits | Medium: preview before replace |
Diff review | Shows proposed changes as additions and removals | Documents, contracts, code, settings | High: accept or reject per change |
Autofill | Fills form fields or table cells from context | Data entry, CRM records, invoices | High: fields stay flagged until confirmed |
Inline summary | Condenses a long item where it sits | Threads, tickets, call notes, reports | Low to medium: link back to the source |
Most products need one or two of these, not all five. Start with the pattern that fits your most repeated task. A support tool might only need inline summaries on tickets and suggested replies in the composer.
When should you use ghost-text suggestions and autocomplete?
Use ghost-text suggestions when the cost of a wrong suggestion is close to zero and the user is already typing. AI autocomplete UX works because ignoring it is free: the user keeps typing and the gray text disappears.
- Keep suggestions short. A phrase or a sentence is easy to judge at a glance. A full paragraph forces the user to stop and read, which breaks the typing rhythm.
- Use one accept key and say what it is. Tab is the common convention. Show it once in a hint, then stop showing it.
- Allow partial accept. Let users take the next word rather than the whole suggestion.
- Respect a pause. Trigger suggestions after a short pause, not on every keystroke, or the text will flicker as people type.
Don't use ghost text for values that matter, such as amounts, dates or names in a legal document. A suggestion that looks almost right gets accepted by muscle memory, and that's exactly where errors hide.
How should rewrite and diff patterns work?
Rewrite and diff patterns should always show the user what will change before it changes. Rewrite works for small selections where the whole result can be judged at once. Diff review is the safer choice for anything longer than a paragraph or anything with consequences.
Select the target
The user highlights text or picks an item. A small floating toolbar offers a few named actions: shorten, make formal, fix grammar, or a free-text instruction.
Preview the result
Show the new version next to or over the original, clearly marked as a proposal. Stream it in so users can see progress, as covered in our guide to AI loading states.
Show the changes
For longer edits, mark additions and deletions inline. Users scan the red and green, not the whole text.
Accept, reject or adjust
Offer accept all, reject all and per-change controls. Add a quick follow-up like make it shorter so users can refine without starting over.
Keep undo one step away
After accepting, a standard undo should restore the original. Never make AI edits a special case that undo can't reach.
How do you design AI autofill without corrupting your data?
Design AI autofill so every filled value is visibly marked as AI-generated until a person confirms it. Autofill is the most useful inline pattern for operations-heavy products and the most dangerous, because a wrong value in a record spreads into reports, emails and invoices.
- Mark filled fields with a subtle tint and a small label, and clear the mark when the user edits or confirms.
- Show the source for each value, such as the line in the uploaded invoice it came from. Our guide to citations in AI answers covers preview patterns that work here too.
- Leave fields empty when unsure. An empty field is honest. A guessed field looks finished.
- Block submission of unreviewed critical fields like amounts or bank details, or require a single confirm-all step that lists them.
For example, suppose an invoice tool adds autofill
For example, suppose a small invoicing app lets users drop in a supplier PDF and autofills supplier, date, line items and total. A careful design fills supplier and date with a tint, links each line item to its row in the PDF, and leaves the tax field empty when the document shows two possible rates. The submit button reads Review 2 flagged fields instead of Save, so nothing unconfirmed reaches the ledger.
This is a hypothetical walkthrough to show the decisions, not a result from a real product.
Where do inline summaries help, and where do they hurt?
Inline summaries help when users have to triage many long items quickly, such as tickets, threads, call transcripts or pull requests. They hurt when they replace the source instead of pointing to it, because users start trusting a summary they can't check.
Put the summary at the top of the item, keep it to a few lines, and link key points back to the passage they came from. Label it as a summary and show when it was generated, so users know whether it reflects the latest replies. When the model can't summarize well, for example because the thread is too short or in mixed languages, hide the summary rather than showing a weak one. Our guide to AI error handling UX covers how to phrase those fallbacks.
Pros
- Fast triage of long items without opening them
- Stays in the list or detail view users already use
- Easy to ignore when users want the full source
Cons
- Users may stop reading the source and miss nuance
- Stale summaries mislead when new replies arrive
- Adds model cost on every item unless generated on demand
How do you choose the first inline AI feature to ship?
Choose the first inline AI feature by finding the task users repeat most often that has a clear right answer and a low cost of error. That combination gives users many chances to see the AI help, with little risk when it gets something wrong.
- List the five tasks users do most often in your product.
- For each, note what a mistake would cost: a typo, a wrong record or a lost customer.
- Pick the most frequent task with the lowest mistake cost.
- Map it to one pattern from the table above and design accept, reject and undo before anything else.
- Ship it to a small group and watch how often suggestions are accepted, edited or ignored.
If the answer turns out to be open-ended questions across many records, an inline pattern may not fit, and a dedicated surface makes more sense. Our guide to AI chat interface design covers that case.
