affectUI › Components › Chat

Cited Answer

An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/cited-answer.json · Import from @/components/ui/cited-answer

When to use

  • Search, research and support answers where people need to check which sentence comes from which source before they trust it
  • A finished answer from your RAG pipeline that already knows the passage behind each claim – the preview shows exactly that passage
  • Next to AI Answer: use this one once the answer is done and the point is checking it, not watching it stream

When not to use

  • Answers that are still streaming, with follow-ups and feedback – use AI Answer
  • Casual chat without sources – a plain message is lighter
  • Long reports with dozens of sources – the tray is made for a handful of chips

Usage

import { CitedAnswer, type CitedSegment, type CitedSource } from "@/components/ui/cited-answer";

const sources: CitedSource[] = [
  {
    id: "caching",
    site: "Tokenwise",
    title: "Prompt caching, explained",
    url: "https://tokenwise.dev/blog/prompt-caching",
    date: "Sep 18, 2026",
    quote: "A cached prefix is read instead of recomputed …",
    highlight: ["read instead of recomputed"],
  },
];

const segments: CitedSegment[] = [
  { text: "Prompt caching reuses the processed start of your prompt.", cite: ["caching"] },
  { text: " Streaming makes the rest feel faster." },
];

export function Answer() {
  return <CitedAnswer segments={segments} sources={sources} pagesRead={12} />;
}

Props

NameTypeDefaultDescription
segmentsCitedSegment[]{ text, cite?, paragraph? } – the answer in order. cite lists source ids (one marker each); paragraph starts a new paragraph. Spaces at the edges of text stay outside the highlight
sourcesCitedSource[]{ id, title, site, url?, date?, quote?, highlight?, icon? } – numbered in this order, one chip each
pagesReadnumberPages read while searching – shown in the head as "3 sources · 12 pages read"
defaultOpenstringId of the source whose preview is open at first
onOpenSource(source: CitedSource) => voidCalled by Open source. With it the link doesn't navigate on its own; without it the url opens in a new tab
onPreviewChange(id: string | null) => voidCalled when a preview opens, switches or closes
action{ label: string; onClick: () => void }A button on the tray, e.g. Follow up
classNamestringExtra class on the root

Keyboard

  • Tab: Through the citation markers in reading order, the preview's buttons, the source chips and the action
  • Enter / Space: Opens or closes the preview of a marker or chip
  • ← / → / Home / End: Move between the source chips
  • Esc: Closes the preview and puts focus on its chip

Accessibility

  • Markers and chips are buttons named "Source 2: Latency Notes – title", with aria-expanded and aria-controls pointing at the preview
  • Focusing a marker or chip lights up the same sentences and chip as hovering does
  • The preview is a named region; while closed it is inert
  • The line on the tray is announced politely – what you point at, and "Quote copied"

Responsive

  • Fills its container up to 460px and works from 300px. Chips wrap onto a second row and long names shorten; below 360px the card gets tighter and the preview drops its number tag, below 280px Copy quote keeps only its icon
  • Touch screens: larger hit areas around the markers and taller chips and buttons
  • Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

  • React 19

Related

  • AI Answer – Streamed answer with source cards, citation chips that preview their source, copy, regenerate, feedback and follow-ups
  • Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
  • Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one

Guides