A citation panel that keeps inline [n] reference markers in an AI answer synced with a side list of sources, with active highlighting, expandable excerpts, copy-link, and keyboard navigation.
"use client";
import * as React from "react";
import {
SourceCitationRail,
CitationMarker,
type CitationSource,
} from "@/components/ui/source-citation-rail";
const sources: CitationSource[] = [
{
id: "s1",
index: 1,
title: "Streaming responses guide",
domain: "docs.example.dev",
url: "https://example.dev/streaming",
type: "docs",
excerpt:
"Flush tokens to the client as soon as they are produced instead of buffering the whole response, and apply backpressure when the read buffer fills.",
verified: true,
},
{
id: "s2",
index: 2,
title: "Trust in cited AI answers",
domain: "research.example.org",
url: "https://example.org/citations-study",
type: "paper",
excerpt:
"In a field study, readers trusted answers more when inline markers were clearly tied to a source list they could open and inspect.",
author: "J. Alvarez",
publishedAt: "2024-03-12",
},
];
export default function SourceCitationRailDemo() {
const [activeId, setActiveId] = React.useState<string | null>(null);
return (
<div className="w-full max-w-3xl">
<SourceCitationRail
sources={sources}
activeSourceId={activeId}
onActiveSourceChange={setActiveId}
layout="rail"
>
<article className="text-sm leading-relaxed">
<h2 className="mb-2 text-base font-semibold">
How should a product stream AI answers with low latency?
</h2>
<p>
Flush tokens to the client as soon as they are produced instead of
buffering the whole response
<CitationMarker source="s1" />. Readers trusted answers more when
inline markers were clearly tied to a source list they could open
and inspect <CitationMarker source="s2" />.
</p>
</article>
</SourceCitationRail>
</div>
);
}
Part of Motiq — browse the full library on 21st.dev.