A grounded answer backs each claim with an inline citation chip that links to its source — keeping the assistant's statements traceable to evidence.
Loading demo: ai-citation-real-world
npx sdaia-ui@latest add ai-citation
1import { AiCitation } from "sdaia-ui";2import type { AiCitationSource } from "sdaia-ui";
1// Inline chip — mark a claim where it appears2<AiCitation variant="brand" index={1} href="/sources/q3" />3// Sources panel — collect every reference under the answer5const sources: AiCitationSource[] = [6{ title: "Saudi Vision 2030 — Overview", url: "vision2030.gov.sa", href: "https://www.vision2030.gov.sa" },7{ title: "Economic diversification in the Kingdom", url: "worldbank.org", href: "https://www.worldbank.org" },8];9<AiCitation type="sources-panel" variant="neutral" label="Sources" sources={sources} />
A compact marker placed in the running text — a link glyph plus the citation number. Neutral and Brand share the tinted fill; Outline uses the default surface.
Loading demo: ai-citation-inline-chip
The full list of references collected under the answer — a header with a count, then a numbered row per source with its title, URL and an open affordance.
Loading demo: ai-citation-sources-panel
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
type | 'inline-chip' | 'sources-panel' | 'inline-chip' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
text | ReactNode | — | optional |
index | ReactNode | 1 | optional |
href | string | — | optional |
onChipClick | (e) => void | — | optional |
chipLabel | string | 'View citation' | optional |
label | ReactNode | 'Sources' | optional |
count | number | sources.length | optional |
hideCount | boolean | false | optional |
sources | AiCitationSource[] | [] | optional |
autoNumber | boolean | true | optional |
as | ElementType | 'span' / 'div' | optional |
