Skip to content
Course · Shipping AI interfaces

Citations build trust

The citation chip is the RAG product's trust engine: numbered, labelled, expandable, and honest about what it links to. Without it, an answer is an opinion with better grammar.

Intermediate1 min read (computed · recorded 3)updated 2026-09-14aicitationsragcourse

by Motif Editors

revised 2026-09-14First publication in the bank-4 AI-interface curriculum.

Part 7 of 15 in Shipping AI interfacesTokens are a budget, not a mysteryRetry, rate limits, and grace

Key takeaways
  • Citations must be numbered in the text and expandable to their source — a bare list of URLs is a bibliography, not a citation.
  • Each source should state its provenance: title, file, what it claims.
  • Demo references must be labelled as demo references; fake URLs are a trust leak.

A citation is a checkable claim

A numbered marker in the text connected to a source the reader can open and verify — that is a citation. A row of URLs at the bottom of an answer is a bibliography: it documents, it does not connect. The chip pattern sits in between: numbered chips under the answer, each expanding to show title, file and one-line provenance, with the number reappearing in the text it supports.

Sources must survive inspection

The moment a citation expands to a fake URL or a file that does not exist, every other citation on the page becomes suspect. Demo surfaces label their references as demo references — this site's citation demo expands to real repository files it actually cites. The rule is boring and total: only link what opens.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

The component this essay works with — mounted, not pictured
Citation Chip

Every scene carries a declared reduced-motion branch that never removes content — the contract lists the rules each scene promises, and the policy collapses animation cleanly.[1][2]