FG—01AI Design Field Guide

Search the field guide

Search chapters, principles, patterns, worksheets, and glossary terms

PTN—23

Citations

Attach retrievable sources to specific claims so people can verify the answer instead of trusting the vibe.

A fluent paragraph with no sources is an assertion; the same paragraph with inline citations is an argument. Citations turn AI output from something you believe into something you can check. That distinction is the whole game for retrieval-backed products: Perplexity built its identity on numbered, per-sentence citations, and it reads as trustworthy before you have clicked a single one — the presence of the affordance does most of the work.

The craft is in granularity. A pile of links at the bottom of a response is bibliography theater: nobody can tell which link supports which claim. Good citations are claim-level — a marker sits on the sentence it supports, and activating it shows the relevant passage, not just a URL. The person should get from “is this true?” to the supporting text in one interaction.

Citations also discipline the model-facing side of the system. When the interface commits to showing sources per claim, the retrieval pipeline has to actually ground each claim, and unsupported sentences become visible as what they are: uncited. Design the UI so an uncited factual claim looks slightly naked. That pressure improves the product more than any accuracy disclaimer.

The pattern emerged as the antidote to the hallucination era: once fabricated citations and invented studies made headlines, “where did this come from?” became the first question every serious buyer asked, and retrieval-backed products answered it in the interface itself. Maturity is measured behind the UI. Teams that treat citations as a rendering feature ship bibliography theater; teams that treat them as a contract run grounding audits — sampling claims and checking that the cited passage actually supports the sentence it decorates. Perplexity’s lesson is that the affordance sells the product, but only the audit keeps the promise it makes.

Anatomy

Fig. 01CitationsLive specimen

Assistant · answer

Invoice #1042 for Harrison Heating & Air is 45 days past due, and this customer has paid each of their last three invoices more than two weeks late. A firm reminder with a payment link is likely warranted.

Hover or tap a marker to inspect its source

A response with claim-level citation markers, each resolving to a source preview.

  1. 1Inline marker. A numbered superscript anchored to the specific claim it supports, not the paragraph.
  2. 2Source preview. Hover or tap reveals title, domain, date, and the exact quoted passage — verification without leaving the flow.
  3. 3Quoted span. The passage from the source that grounds the claim, so people compare text to text, not text to a homepage.
  4. 4Source list. A deduplicated footer of all sources, each linking back to the claims it supports.

When to use

Design considerations

Pitfalls

In the wild

Perplexity
Numbered inline citations on nearly every sentence, with source cards showing favicon, title, and snippet — the citation system is the brand.
Claude
When answering from searched or attached sources, marks grounded spans with citations that reveal the underlying passage.
Gemini
Offers a “double-check” affordance that colors statements by whether Google Search found corroborating or conflicting results, linking out per claim.
Notion AI
Q&A answers over a workspace cite the specific pages the answer was drawn from, so “where did this come from” is one click.
GitHub Copilot
Can flag completions matching public code and show the referenced repositories and licenses — provenance applied to code.

Principles served

Discussed in the guide