# AI Inline Citation

Numbered inline citation markers in an AI answer with a hover card showing the source title, host and snippet.

- id: `ai-inline-citation`
- Page: https://agentic-ui-kit.com/components/ai-inline-citation
- Live preview: https://agentic-ui-kit.com/live/component/ai-inline-citation?piece=ai-inline-citation

## Install

```bash
agentic-ui add ai-inline-citation
npx shadcn@4.17.0 add @agentic-ui/ai-inline-citation
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** numbered-citation-markers, citation-hover-card, source-title-host-snippet, grouped-markers, source-carousel, viewport-aware-popover, keyboard-and-focus-support, marker-parsing, dark-mode
- **Intents:** converse, retrieve-knowledge
- **Suits domains:** ai-workspace, ai-agents, knowledge, support, saas
- **Interaction:** hover, click, keyboard-focus, carousel
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** numbered inline citation markers in an AI answer with a hover card showing the source title, host and snippet, footnote style source markers like [1] that open a popover, with a carousel when several sources back one claim, cite sources inside a chat response paragraph, grounded answer text with clickable reference numbers
- **Avoid when:** a list or inspector of every retrieved source (use ai-citations-panel or rag-citation-cards), long-form documents with a bibliography section, markdown rendering of a whole message (use ai-message-bubble)
- **Preserve when adapting:** marker-grouping, escape-returns-focus, viewport-clamp
- **Replace when adapting:** sources, text, link-handling
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives