AI Citations Panel
Problem statement
Perplexity's killer feature isn't search — it's cited search. Every claim in a generated answer carries a numbered pill linking back to the source it came from. Hover the pill, see a preview. Click it, jump to the source in the sidebar. The pattern has become a defining trait of trustworthy AI UIs and you'll see variations of it in Bing Copilot, You.com, Brave Search, and Google's AI Overviews.
Build an answer view with inline citation pills, a sticky sources panel, and the cross-linking between them. Same source referenced three times in the answer should show as the same number every time. Hovering a pill shows a preview card with title, snippet, and URL. Clicking a pill scrolls the corresponding source into view and highlights it.
The architectural insight is treating citation numbers as a derived view, not source-of-truth data. The LLM emits citations attached to specific text segments — your job is to deduplicate, assign stable display numbers, and keep the bidirectional relationship in sync. Any rerun of the answer should produce identical numbering.
Requirements & constraints
- Inline citation pills appear after the relevant text segment
- Same source cited multiple times shares the same display number
- Hovering a pill shows a preview card (title, snippet, host)
- Clicking a pill scrolls its source into view and highlights it
- Sources panel lists every cited source in citation order
- Clicking a source card highlights it as active
- Layout is responsive — sources collapse below the answer on narrow screens
How to approach AI Citations Panel
The strategy an interviewer expects you to reach for.
How I'd Think About This Problem Citations are how AI products earn trust. Without them, the model's output is a confident-sounding stranger — believable but unverifiable. With them, the user can audit any claim by clicking back to the source. Perplexity built its entire product around this single UX move; Bing Copilot, Brave, You. com, and Google's AI Overviews all converged on roughly the same shape because the alternatives don't work. So when you build citations, you're not building a clever feature — you're building a trust UI primitive. The mental model that makes the rest of the question fall out: there are three layers of data, and each has a single responsibility. (1) Sources are the raw evidence — title, URL, snippet — keyed by stable IDs. (2) Citations are pointers attached to spans of generated text — they say "this sentence came from source X.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.