Citation design patterns
Citations are the contract between a model answer and the sources it leans on. A good citation design tells the reader where a claim comes from, how confident the system is, and how to verify it themselves — without drowning the prose in footnotes. This recipe walks through three patterns the Meridian gateway uses for its RAG and research endpoints.
1.Inline markers with hover detail
Render each citation as a compact marker like [1]adjacent to the claim it backs. On hover or focus, surface the source title, a short snippet, and the outbound link. This keeps prose readable while letting power users verify in one motion. Make markers focusable so keyboard users can tab through them.
2.Confidence-weighted styling
Not every citation is equal. A reranker score above 0.8 deserves a solid marker; a 0.4 deserves a dotted underline that signals "weak support, check yourself." Surfacing confidence visually nudges readers toward critical reading on the claims that need it most, and lets you measure click-through on low-confidence markers as a quality signal.
3.A typed envelope for transport
Whatever you render, the wire format should be boring and typed. The gateway emits citations as structured objects so the frontend can decide presentation later. Below is the envelope Meridian uses across its /research and/rag endpoints.
// Recommended citation envelope
type Citation = {
id: string;
source_url: string;
title: string;
snippet: string;
confidence: number; // 0..1
};
const cite = (c: Citation) => ({
marker: `[${c.id}]`,
tooltip: `${c.title} — ${c.snippet}`,
href: c.source_url,
});