AI Citation

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

Installation

npx sdaia-ui@latest add ai-citation

Usage

1import { AiCitation } from "sdaia-ui";
2import type { AiCitationSource } from "sdaia-ui";

1// Inline chip — mark a claim where it appears
2<AiCitation variant="brand" index={1} href="/sources/q3" />
3 
4// Sources panel — collect every reference under the answer
5const 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 
10<AiCitation type="sources-panel" variant="neutral" label="Sources" sources={sources} />

Types

Inline-Chip

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

Sources-Panel

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

API Reference

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