ASP.NET MVC Citation
In applications powered by Retrieval-Augmented Generation (RAG), such as legal research, medical information, or financial analysis, users must be able to trace every AI claim to a real source.
The Citation component places an inline reference chip directly within AI-generated text. Clicking or hovering the chip opens a popover with complete details for each cited resource, giving readers evidence without leaving the page.
Configuration
Place the Citation component directly after the claim it supports so the relationship between the statement and its evidence is immediately clear. Provide an array of CitationSource objects to the Sources property to populate the popover with source titles, URLs, and optional descriptions.
Use the SvgIcon and SourceSVGIcon properties to customize the chip and popover icons. Set DisplayMode to control whether the popover opens on hover or click.
Add Description to each source so users have enough context to decide whether to open the link. Replace the default globe icon with a domain-specific icon, such as a document for internal wikis or a database for data sources, to help users identify the source type before hovering.
@(Html.Kendo().Citation()
.Name("citation")
.Sources(sources =>
{
sources.Add().Title("Quarterly Revenue Report").Url("https://example.com/reports/q1-2025").Description("Summary of enterprise revenue by quarter.");
})
)