Angular LLM Kit Citation
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.
Adding Source References
When using the Citation component, place it next to the claim that it supports, so the connection between statement and evidence is clear at a glance. To populate the Citation popover with sources, provide an array of CitationSource objects to the sources property of the component and specify title, url, and description for each source.
<p>
The model outperformed all prior baselines on the evaluation benchmark
<kendo-citation [sources]="sources"></kendo-citation>
across five independent runs.
</p>Controlling the Popover Display
Use the showOn property of the Citation 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 the source details, such as on touch devices.
<p>
The model outperformed all prior baselines on the evaluation benchmark
<kendo-citation [sources]="sources" showOn="click"></kendo-citation>
across five independent runs.
</p>Customizing the Citation
The Citation provides a kendoCitationBodyTemplate directive that can be used to replace the default source details in the popover. The template receives the current CitationSource as the implicit source value, so you can control which source properties appear and how they are arranged.
<kendo-citation [sources]="sources">
<ng-template kendoCitationBodyTemplate let-source>
<h6>{{ source.title }}</h6>
<p>{{ source.description }}</p>
</ng-template>
</kendo-citation>Use the icon or svgIcon property to customize the icon rendered inside the Citation chip. Set the sourceIcon or sourceSVGIcon property to customize the icon rendered before the source URLs inside the popover.
<kendo-citation
[sources]="sources"
[svgIcon]="bookIcon"
[sourceSVGIcon]="globeIcon"
></kendo-citation>