How to Design AI Citations & Sources UX

When an AI product answers from the web, users are not judging prose quality alone. They are judging whether they can verify a claim before acting on it. Citations are that verification surface: not a bibliography footnote, but a trust system that shows where each claim comes from and what to do when a source is wrong.

This guide is a binder for that job. It stitches the Trust Scaffolding framework, the core citations patterns, and the live ChatGPT vs Perplexity citations comparison into one build playbook. Each pattern below shows a shipped product shot, then a referral to try the interactive demo on the pattern page.

What citations UX actually means

Citations UX is the set of controls that ground an AI answer in inspectable sources. The model may retrieve pages, synthesize an answer, and attach evidence. The interface must make that evidence legible at the claim level, auditable at the answer level, and correctable when the retrieval is wrong.

Trust Scaffolding treats citations as visible evidence: users make local trust decisions with what they can verify, not a global promise that the system is "accurate." Chat UX owns the reading rhythm. Put evidence where the eye already is.

If you only read one distinction: inline chips answer "where did this sentence come from?" A sources panel answers "what did the system use overall?" Most grounded products need both.

The core pattern: attach evidence to claims

Start with publisher chips on the claims that depend on retrieval. ChatGPT keeps chips near the claim and pages multi-source support with a +N marker so the reading flow stays intact.

Real-world example

ChatGPT · Publisher favicon and name pills sit on claims. +N marks multi-source support. Full teardown

Pattern: Citations, try the interactive demo on the pattern page.

Chips without a preview force a context switch. Design the hover or open state so users can judge the excerpt before they leave the thread.

Pattern spine: preview, audit, and correction

Chips alone are not a system. Shipped products compose citations with three siblings. Each block below shows the product evidence, then a pattern referral for the matching demo.

1. Citation hover / claim preview

Show the publisher, title, and supporting excerpt without leaving the answer. ChatGPT pages multiple sources with 1/N navigation from the same claim anchor.

Real-world example

ChatGPT · Claim-anchored popover with paging. Progressive depth instead of a link dump. Full teardown

Pattern: Citation Tooltips, preview the supporting excerpt without leaving the answer.

2. Source browser / full audit

Give power users a place to review every source used. Perplexity treats the Links tab as the primary research surface, not a secondary footer.

Real-world example

Perplexity · Links audit as a first-class tab. Research products need a place to inspect everything. Full teardown

Pattern: Source Browser, open a full audit of sources when research depth demands it.

3. Source quality and fact-checking signals

Help users weight evidence, not just count URLs. Pair chips with quality or conflict cues when sources disagree.

Real-world example

Perplexity · Summarize what was searched and used so provenance is not a mystery. Full teardown

Pattern: Source Quality Scores, help users weight evidence quality, not just URL count.

4. Wrong-source feedback

When retrieval fails, give a taxonomy users can act on. Perplexity lets people mark wrong sources so the failure mode is specific.

Real-world example

Perplexity · Wrong sources as an explicit feedback path. Thumbs-down alone hides the bug. Full teardown

Pattern: Fact-Checking Indicators, give a failure taxonomy when a source does not support the claim.

Two product bets: progressive chat vs citation-native research

The same trust job produces two different interfaces. Steal the citation system that matches how often users need to audit sources. Full table and steal rules live in the citations comparison.

ChatGPT: progressive verification depth

ChatGPT layers evidence for chat: publisher chips on claims, claim-anchored popovers with 1/N paging, and a Sources sidebar that keeps people in the thread. Steal this when most users want a readable answer first and optional audit second.

Real-world example

ChatGPT · Sources stay beside the thread. Verification without abandoning the conversation. Full teardown

Steal this when chat habit is the product and research is an occasional mode.

Perplexity: citations as the product

Perplexity treats sources as the interface: domain chips, research steps, Links tab, selection Check sources, and Wrong sources feedback. Steal this when users arrive to verify, compare, and export evidence.

Real-world example

Perplexity · Domain-first chips at the end of claims. Research posture, not chat decoration. Full teardown

Steal this when the answer exists to justify a decision with inspectable sources.

Claim-level chips or answer-level audit?

This is the highest-leverage product decision in the citations family.

• Lead with claim-level chips when most users skim answers and only spot-check risky sentences. ChatGPT is the reference.
• Lead with a full audit when users treat the product like a research desk. Perplexity's Links tab is the reference.
• Use both when answers mix casual reading and high-stakes verification. Progressive depth beats a single dense dump.

If you only ship a footer list of URLs, you are asking users to reverse-engineer which sentence each link supports. That is trust theater.

Decision checklist

Prefer evidence users can inspect over confidence language they must believe. Friction that reveals provenance is good. Friction that buries it behind three menus is not.

Anti-patterns to refuse

• URL dumps in a footer with no claim-level mapping
• Citation chips that open empty or irrelevant pages
• Hallucinated publishers or titles that never appeared in retrieval
• Confidence percentages that replace source evidence
• No path to report a wrong or missing source
• Forcing a full page leave for every verification moment

These show up as Trust Scaffolding failure modes: opaque automation and trust theater. If a chip cannot show evidence, it is decoration.

What to ship next

Pick a posture from the comparison, then wire claim chips and one audit surface. Measure how often users open previews versus bounce to the raw URL. That ratio is your trust signal.

1. Read the citations comparison and steal the depth model that matches chat vs research.
2. Spec claim chips with the citations and citation hover demos as interaction references.
3. Add a Links/Sources audit only if users regularly need a full inventory.
4. Cross-check against Trust Scaffolding so evidence sits beside uncertainty and rollback stories.

Explore related reference

• AI citations UX compared
• ChatGPT citations teardown
• Perplexity citations teardown
• Citations pattern
• Citation hover pattern
• Source browser pattern
• The Trust Stack
• Designing Better AI Chat (Part 2)