By Mehdi HassanHow should an AI product show sources and citations?
An AI product should show sources next to the specific claims they support, with a quick way to see the passage behind each one. Source attribution in AI is a checking tool first and a trust badge second. If users can't verify a claim in a few seconds, the citation is decoration.
Most AI products that use retrieval, often called RAG, already know which documents fed an answer. The design problem is turning that list into something people use. This guide compares the main patterns and what each one does to reading, checking and clicking. It's part of our hub on AI product UX, which covers the other trust patterns around citations, such as confidence and approvals.
One thing worth saying up front: there's very little published user data on which citation style performs best. What follows is grounded in how the patterns work and what we see in products, so test the choice with your own users.
What are the main AI citations UI patterns?
There are four main AI citations UI patterns: inline markers, footnotes, source cards and a side panel. They trade reading flow against ease of checking and click-through, so the right one depends on what users do after reading the answer.
Pattern | How it looks | Strength | Weakness | Best for |
|---|---|---|---|---|
Inline markers | Small numbers after sentences, preview on hover or tap | Keeps reading flow, ties source to claim | Easy to ignore, small tap targets | Chat answers, assistants |
Footnotes | Numbered list of sources below the answer | Clean text, familiar from documents | Claim-to-source link is weaker | Long reports, exports |
Source cards | Row of cards with title, site and favicon above or below | Invites clicks, shows breadth at a glance | Not tied to specific claims | Search-style answers, web sources |
Side panel | Answer on the left, sources and passages on the right | Best for verifying, shows full context | Takes space, heavy on mobile | Research, legal, compliance, support |
Many products combine two. Perplexity style citations, for example, pair inline numbered markers with a row of source cards, so users get both claim-level links and a quick view of where the answer came from. That combination is a sensible default for web-sourced answers.
How do inline markers and footnotes affect trust?
Inline markers build trust by tying each claim to evidence at the point of reading, while footnotes build trust through completeness but make users work to match a claim with its source. If your users act on individual facts, such as a policy detail or a contract date, inline markers are the better choice.
- Place markers after the claim, not the paragraph. A single marker at the end of a long paragraph tells users nothing about which sentence it supports.
- Open a preview, not a new tab. Hover on desktop and tap on mobile should show the source title and the highlighted passage. Opening the full source is a second, deliberate step.
- Merge repeated sources. If three sentences cite the same document, reuse the same number so users can see how much of the answer leans on one source.
- Make tap targets big enough. Tiny superscript numbers are hard to hit on phones. Pad the target even if the visual stays small.
When does a side panel beat inline citations?
A side panel beats inline citations when checking the source is part of the job, not an optional extra. Grounded answers UX in legal, compliance, finance or support work often means reading the answer and its evidence side by side, and a panel makes that comparison easy.
In a side panel, clicking a claim should scroll the panel to the matching passage and highlight it. Clicking a passage should highlight the claims it supports. That two-way link is what makes the panel worth its space. On mobile, collapse the panel into a bottom sheet that opens from the marker, since a split view won't fit. Our guide to AI chat interface design covers how the panel fits into the wider chat layout.
Pros
- Fastest way to verify claims against full context
- Room to show passage, document metadata and dates
- Natural place for flag-this-source feedback
Cons
- Takes horizontal space from the answer
- Needs a separate mobile design
- Overkill for casual or low-stakes questions
How do citations affect click-through to sources?
Citation design changes how often users click through to sources: visible source cards with titles and site names invite clicks, while small inline markers with full previews tend to answer the question without a click. Neither is wrong. Decide whether you want users to leave, or to check and stay.
If your sources are your own help center or product records, a preview that answers the question in place is usually better, because the user's task is in your product. If the sources are third-party web pages and you want to be a fair citizen of the web, make cards and titles prominent so publishers get the visit. This same dynamic is why marketing sites now care about being cited by AI answers at all, which we cover in keeping AI Overview and ChatGPT citations through a migration.
For example, suppose a support assistant cites help articles
For example, suppose a support assistant answers How do I change my billing date. A good design shows a two-sentence answer with one inline marker. Tapping the marker opens a preview with the article title, last-updated date and the highlighted paragraph, plus Open article. Most users get what they need from the preview. Users with an edge case open the article.
If the answer instead showed three large source cards and no inline marker, users would likely click away to read, even though the two-sentence answer was enough. This is an illustrative walkthrough, not measured data.
What should the UI do when there's no source?
When there's no source, the UI should say so plainly instead of leaving a gap users fill with assumptions. Answers that come from the model's general knowledge, or from reasoning rather than retrieval, need a label like Not based on your documents, so users know to check before acting.
- Label unsourced sentences or answers with a short, neutral note rather than a warning color on everything.
- Show when sources disagree. Two policies with different dates should both be cited, with a line saying they conflict.
- Show source freshness where it matters, such as last updated dates on policies and prices.
- Never generate a citation the system didn't use. If the retrieval layer can't map a claim to a passage, drop the marker rather than guess.
Missing and wrong sources are a close cousin of hallucinations. Our guide to AI error handling UX covers how to phrase low-confidence answers and recovery.
How do you turn citations into a feedback loop?
Turn citations into a feedback loop by letting users mark a source as wrong, irrelevant or outdated right inside the preview. Each flag tells your team exactly which retrieval result failed for which question, which is far more useful than a thumbs-down on the whole answer.
Add a flag action to every preview
Keep it small: Wrong source, Outdated, Doesn't support this claim.
Log the claim, passage and query together
The flag only helps if your team can see what was asked, what was cited and what the user objected to.
Review flags on a schedule
Group them by document. Repeated flags on one source usually mean it needs updating or should be excluded.
Close the loop visibly
When a flagged document gets fixed, a short note like Updated based on feedback shows users their input mattered.
Citations, previews and flags are reusable parts, so they belong in your component library. Our guide to design systems for AI products covers the citation marker, preview and panel as shared components.
