Source Browser
Source browser is an AI UX pattern that shows the original documents or passages beside (or linked from) the generated answer so users can verify claims in context. Highlights map answer spans back to source excerpts, making RAG and research outputs auditable instead of black-box.
When to use
Perfect for legal research tools, document analysis applications, and platforms where side-by-side source verification builds trust and enables fact-checking.
When not to use
- Pure chat with no retrieval corpus, where a browser pane would be empty theater.
- Mobile chat where a persistent dual pane destroys reading space; prefer a slide-over Sources view instead.
- Creative generation tasks where “sources” would invent provenance.
Anti-patterns
- Listing file names without showing the excerpt that grounded the claim.
- Highlights that do not match the cited sentence, training users to distrust the panel.
- Auto-opening a full-width browser that pushes the answer off-screen on every query.
- No jump-to-passage link from an inline citation chip into the browser.
How products use it
| Product | Implementation |
|---|---|
| ChatPDF / document Q&A tools | Keeps the PDF open beside answers and scrolls to cited pages. |
| Perplexity | Sources panel and previews support claim-level inspection beyond chat text. |
| Notion AI / enterprise RAG | Opens linked workspace pages or snippets that the answer drew from. |
| Legal research platforms | Dual-pane reading of opinions or filings next to AI summaries. |
Use this pattern in your project
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Source Browser" AI interface design pattern.
Pattern Definition:Best single guess
Spain is the clearest favorite for the 2026 World Cup: bookmakers and prediction markets keep them priced first, with Brazil and France close behind.
Why this is still uncertain
Odds move quickly after openers. Japan already climbed after a strong start, and market prices compress as more games land.
Real-world examples
How shipped products implement source browser, from our teardown guides.
Frequently asked questions
What is a source browser in AI products?
A source browser is a side panel or dual-pane view of the documents or passages the model used, often with highlights tied to claims in the answer so users can verify context without leaving the product.
How does a source browser relate to citations?
Citations mark which claim maps to which source. The source browser is where users go after clicking a citation to read the underlying passage. Strong trust UX usually needs both.
When is a full dual-pane better than a sources list?
Use dual-pane for document-heavy work (contracts, PDFs, codebases) where users compare answer and source continuously. Use a compact list or drawer for web search answers on small screens.
Related patterns
- Trust
Progress Steps
Collapsible thinking and tool traces
- Trust
Citation Tooltips
Hover for source
- Trust
Confidence Score
Show how sure the model is about a claim
- Trust
Verification Next Steps
Concrete actions to validate uncertain output
- Trust
Knowledge Graph
Visualizing RAG
- Trust
Citations
Attach verifiable sources to generated claims