ReferenceChips
Numbered provenance chips under an answer — what the assistant grounded its reply in.
Install it:
npx shadcn add @ambientui/reference-chipsLive
References
Citations — logo, icon, and unmarked in one row
References
Unmarked — the original anatomy, unchanged
References
1Design system · Foundation2Motion3Response kit v0
Behavior
- ·Numbered in order: the page context first, then attached chips, then the kit's own sources. The number is the citation's identity in the text, so it always shows.
- ·ONE anatomy with an optional mark slot — number · mark · label — not a set of variants, so a row mixing a web source, an internal document, and an unmarked reference still reads as one list.
- ·The mark has a fixed precedence: the source's own logo, else a typed icon, else nothing. A logo that fails to load falls back to a monogram, so a dead image never leaves a hole.
- ·A logo is DATA the caller supplies — the system never invents or fetches one. Icons come from the Foundation's configured library like everywhere else.
- ·A reference with an href is a link, opens in a new tab, and says so on hover; without one it stays inert text.
- ·Renders nothing when there are no references — grounding is never implied by an empty row.
- ·Sits on the neutral glass wash (--glass-wash) so it reads as part of the answer object.
When to use
- ·Under any composed answer that used page context or attached items.
- ·For citations — give web sources their logo and internal ones a typed icon, so provenance is recognizable before it is read.
- ·When the user needs to audit what the assistant saw — the governance habit applied to answers.
When not to
- ·As navigation through the product — a reference opens its source, it is not a menu.
- ·For attaching context, which is the AI form's ContextRow.
- ·To dress up an unsourced claim: a mark makes a reference look authoritative, so never add one the answer did not actually use.