Pattern 07 · Output

Citations & sources (RAG)

RAG answers sound equally confident whether they come from a fresh policy or a stale wiki page.

By Aleksey StepikinUpdated October 20263 min readLive demo
Live demo · try it

An interactive mock built in plain HTML, CSS and JavaScript. Data is fictional; no model is called.

FitWhen to use it — and when not

Use it when

  • Any answer drawn from documents, the web or a knowledge base
  • Domains where being wrong costs money: legal, finance, health, support
  • Internal tools where people must defend the answer to someone else

Skip it when

  • Purely creative output with no sources
  • When you cannot map claims to passages — fix retrieval first, do not fake citations

AnatomyThe parts of the pattern

  1. Inline markersNumbered markers right after the claim they support.
  2. Source listTitle, location and freshness of each source.
  3. Quoted snippetThe exact passage, highlighted, on hover or tap.
  4. Health signalsStale or failed sources flagged, not hidden.

GuidelinesDo & don’t

Do

  • Cite at claim level, not one list at the bottom of the answer.
  • Show the passage, not only the document title.
  • Flag stale sources (age) and sources that failed to sync.

Don’t

  • Cite a source that does not contain the claim — it destroys trust faster than no citation.
  • Open sources in a way that loses the conversation.
  • Treat "last indexed 3 months ago" as an admin-only detail.

In productionHow it looks in a shipped product

RAG knowledge base UI: indexed sources with chunk counts, retrieval config and per-source health, including a failed source
In production — Atlas knowledge base: every source shows chunk count, freshness and health, including a source that silently failed to re-index. See the Atlas case

In the wildReal-world examples

PerplexityChatGPT searchMicrosoft CopilotNotebookLM

Products named for reference only — no affiliation, and the demo above is an original illustration, not a copy of their UI.

For engineersImplementation notes

  • Return chunk ids with the answer (ask the model to cite ids, then map ids to spans) instead of asking it to write URLs.
  • Store chunk offsets so the UI can highlight the exact passage in the source viewer.
  • Expose index freshness and per-source sync errors through the same API the answer uses.

OutputRelated patterns

All 26 LLM UX patterns

Building an AI product?

I design and ship AI products end to end — LLM interfaces, agents, RAG, billing — from concept to a live product in weeks, not quarters. Tell me what you are building and get a fixed estimate.

Get an estimateBook a call

Create bold.
Deliver better.

See our workGet in touch