React AI Citation Interface Design: Connecting Answer Markers to Verifiable Source Text

The goal of a citation interface is not to prove that "the model searched for sources," but to let users answer three questions: Which evidence supports this statement? Does the evidence actually support the conclusion? Is the source appropriate for the current time and context? If a system merely places three bare links at the end of an answer, users cannot tell which statement each link supports, nor can they easily identify sources that conflict, are outdated, or support only part of a conclusion.

A reliable experience begins with a backend data contract. The frontend should not use regular expressions to guess link relationships from model-generated Markdown. Instead, it should receive structured answer fragments and citation objects. Each citation should at least include a stable citationId, an evidence ID, document title, source type, canonical URL, update time, location information, and a permitted short excerpt. Answer fragments reference only citationId, while the server confirms that the evidence actually came from the current retrieval snapshot.

Citations Must Bind to Specific Claims

Placing [1] only at the end of a paragraph containing three facts creates ambiguity. A better level of granularity is to represent verifiable claims as text ranges or structured segments, with each segment associated with one or more citations. Do not blindly locate them using character offsets after generation: Markdown rendering, Unicode, and subsequent edits all change indexes. The generation protocol can transmit stable fragment IDs, allowing markers and fragments to form React nodes together after rendering.

When a claim has multiple pieces of evidence, the marker should show the combined count and list them separately when expanded. When evidence conflicts, do not merge it as "more sources"; instead, present the conflict state, each source's date, and its scope of applicability. For backend handling of this lineage, see RAG Citation Provenance Design and RAG Evidence Conflict Resolution.

Citation numbers should be assigned stably in order of first appearance. During streaming, it is common for fragments to arrive before citation metadata; the interface can show a neutral loading placeholder, but must not temporarily present an unverified URL as a formal citation. After generation completes, if a claim requiring a citation still has no evidence, display "No verifiable source found" instead of silently removing the marker and making unsupported text appear equally trustworthy.

Keep Verification Within the Reading Context

On desktop, source details can appear in a sidebar; on mobile, use a bottom sheet or navigate to a dedicated evidence page. When a user clicks a citation marker, focus should move to the corresponding source title, and closing the panel should return focus to the original marker. When the user clicks another marker, replace only the details without resetting the answer's scroll position. Source details should first show the excerpt and location supporting the claim, then document metadata and an action to open the original text, rather than sending users to the home page of a document dozens of pages long and making them search on their own.

Markers must not rely on color alone or say only "click here." Screen reader users need understandable names such as "Citation 2, a document, page 4." DOM IDs for multiple markers can combine React useId with the business citation ID to ensure that aria-controls is unique and consistent between server and client. If the interaction uses a disclosure, it should follow rules for button expanded state, keyboard operation, and focus; do not attach click handlers to an unfocusable superscript span.

When a source opens in a new window, say so in its accessible name or adjacent text, and use the correct security attributes for external links. Internal knowledge-base links must not bypass permission checks merely because they appear in an answer; clicks must still be authorized according to the current session. For additional component fundamentals, review React Component Accessibility.

Continue Treating Source Content as Untrusted Input

Titles, excerpts, and URLs may all come from user-uploaded documents or external web pages. Preserve React's default text escaping, and do not directly inject source HTML merely to highlight content. If rich text must be rendered, sanitize it server-side with a strict allowlist and prohibit scripts, event attributes, dangerous schemes, and arbitrary iframes. After parsing, external URLs should allow only https and approved internal protocols; calculate the displayed domain from the canonical URL rather than accepting a separate "trusted domain" string supplied by the model.

Excerpts need length limits and must avoid disclosing neighboring sensitive text. The retrieval layer determining that a user may view a chunk does not mean it may return an entire document or a long-lived public signed URL. The citation API should return only the minimum evidence fragment, and downloading the original document should require authorization again. For the overall presentation of streaming citations, also see RAG Streaming UI, but citation state should remain independent of answer text state so that a failure cannot bring down the entire answer.

Measure Whether Users Can Complete Verification

Test data needs to cover a single source, multiple sources, multiple claims in one paragraph, source conflicts, no source, broken links, excessively long titles, mixed Chinese and English text, repeated citations, and permission revocation. Visual tests should verify that superscripts do not obscure text on narrow screens and that the sidebar does not narrow the main content until it becomes unreadable. Keyboard tests should verify opening, closing, and focus return in sequence. Streaming tests should verify that late citations and event replay do not create duplicate numbering.

Production observability can track citation rendering completeness, the rate of claims without evidence, source open rate, link failure rate, permission denials, and the proportion of users who move from an excerpt to the original text. Do not directly interpret low citation clicks as poor quality, because a clear excerpt may already satisfy verification. More importantly, sample-check whether claims match their evidence and feed user reports of incorrect citations back into the evaluation set.

Ultimately, citation markers, source panels, and backend evidence must share the same stable identity. As long as any layer infers relationships from text, even a polished interface may point to the wrong evidence. A trustworthy citation experience comes from a traceable data chain, not a row of blue links at the end of an answer.