Overview
How might we make every claim verifiable without forcing people to leave the answer to check sources?
When answers depend on external evidence
- Research, search, and RAG products where claims need a trail back to documents or the web.
- Answers that mix retrieval with generation, so people can separate evidence from synthesis.
- Regulated or high-stakes domains (news, finance, health) where unverifiable answers create risk.
- Any surface where “trust the model” is not enough and inspectable provenance is required.
When inventing sources would mislead
- Purely creative or opinionated generation where inventing sources would mislead.
- Offline or closed-corpus tools with no retrievable documents to cite.
- Tiny UI surfaces where chips destroy readability; prefer a single Sources entry instead.
States
Design the whole verification ladder, not only a footnote list at the bottom of the answer.
Retrieving
Search or RAG is in progress. Research steps may show; claim chips are not final yet.
Grounded
The answer is visible with claim-adjacent chips that identify publishers or domains.
Previewing
A bottom sheet shows title, excerpt, and optional 1/N paging for that claim’s sources.
Auditing
A source-count row (favicon stack + N sources) summarizes what grounded the answer.
Challenging
The person marks an individual source as wrong so retrieval can improve on the next pass.
Updated
Citations or the answer refresh after feedback, regen, or a deeper research pass.
Key UX elements
The parts that must be present for citations to build trust.
Put publisher identity on the claim.
Show favicon + domain next to the statement, not anonymous numbers alone.
Expose +N when more than one source supports a claim.
The count opens that claim’s sources in the sheet so each one can be inspected.
Show title and excerpt in-product.
Open a bottom sheet from the chip so people can verify without a new tab.
Summarize sources under the answer.
A favicon stack plus source count shows what was used without a separate “view all” link.
Say what was searched or used.
Research steps or a short provenance summary explain how the answer was grounded.
Let people challenge a bad source.
Wrong-source feedback belongs on the individual source in the sheet, not as a global dump.
Anti-patterns to avoid
Footnote-only lists that force readers to leave the claim to verify.
Anonymous numbered markers with no publisher or title identity.
Citations that open a new tab for every check with no in-product preview.
Aggregating sources behind +N with no way to inspect each one.
How products use it
| Product | Implementation |
|---|---|
| Perplexity | Domain +N chips inline, research steps, Links tab, and Wrong sources feedback. |
| ChatGPT | Publisher chips, claim popovers with 1/N paging, and a Sources sidebar. |
| Google AI Overviews | Numbered markers in the overview with related source links alongside. |
| Bing Copilot | Inline citations tied to web results in the answer pane. |
Real-world examples
How shipped products implement citations, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Citations" AI interface design pattern.
Pattern Definition:Frequently asked questions
What are AI citations in UX?
AI citations are UI affordances that show which sources support a generated claim: inline chips, hover previews, footnotes, or a sources panel. They let users verify answers without treating the model as a black box.
Should citations be inline chips or a sources list?
Use both when possible. Inline chips keep evidence on the claim for skimmers; a Sources sidebar or Links tab supports full audit. Footnote-only lists are weaker for scanning.
How do citations differ from confidence indicators?
Citations point to external evidence. Confidence indicators show the model’s uncertainty. High confidence without sources is still unverifiable; sources without confidence can still be wrong.
When are wrong-source feedback controls worth it?
When sourcing quality is a first-class failure mode, news, finance, health, research. Treating “wrong sources” as feedback taxonomy helps the product improve retrieval, not only answer tone.