LLM Kit Citation

Updated on Aug 14, 2026

In Retrieval-Augmented Generation (RAG)-powered applications for legal research, medical information, or financial analysis, users must be able to trace every AI claim back to a real source. Use the Citation component to connect each claim with the source that supports it.

The Citation component embeds an inline reference chip directly inside AI-generated text. By default, hovering over the chip opens a popover with full source details for each cited resource, so readers get evidence without leaving the page.

The following example demonstrates the Citation component embedded in a text paragraph with multiple sources.

Loading ...

Adding Source References

Place the Citation component next to the claim that it supports so the connection between statement and evidence is clear at a glance. To populate the Citation popover, provide an array of CitationSource objects through sources. Define the title, url, and description for each source.

tsx

<p>
    The model outperformed all prior baselines on the evaluation benchmark
    <Citation sources={sources} />
    across five independent runs.
</p>

tsx

const sources: CitationSource[] = [
    {
        title: 'Advances in Natural Language Processing',
        url: 'https://example.com/nlp-advances',
        description: 'A comprehensive study on recent NLP developments.'
    },
    {
        title: 'Retrieval-Augmented Generation: A Survey',
        url: 'https://arxiv.org/abs/2312.10997',
        description: 'Survey of RAG architectures and citation grounding mechanisms.'
    }
];

Controlling the Popover Display

Use showOn to control how users should interact with the Citation chip to open the source popover.

By default, the popover is opened when users hover over the Citation chip. Set showOn to 'click' when users require an explicit action to open source details, such as on touch devices.

tsx

<Citation sources={sources} showOn="click" />

Customizing the Citation

Use the bodyTemplate prop to replace the default source details in the popover. The custom component receives the current CitationSource, so you can control which properties appear and how they are arranged.

tsx

const CitationBody = ({ source }: CitationBodyTemplateProps) => (
    <>
        <h6>{source.title}</h6>
        <p>{source.description}</p>
    </>
);

<Citation sources={sources} bodyTemplate={CitationBody} />;

Use svgIcon to customize the icon rendered inside the Citation chip.

tsx

<Citation sources={sources} svgIcon={bookIcon} />

Suggested Links

• LLM Kit Overview
• Checkpoint
• API Reference of the Citation component