← Back to home

Cited

Docs Search With Citations

Role: Engineering + DesignStack: Next.js, FastAPI, ClaudeWebsite: cited-ebon.vercel.app ↗

Overview

Docs have the answers, they're just spread across fifty pages. Finding one usually means a search box that matches keywords, a sidebar you scan by guessing, and a row of open tabs you keep switching between.

AI chat tools fix the searching, but they bring a new problem. The answer reads well, and you have no idea which part came from the docs and which part the model filled in on its own.

I wanted both: the speed of asking a question, and the confidence of reading the source.

That idea became Cited.

What Cited Is

Cited is a search for documentation. You ask a question and it finds the answer across the docs, citing every line it used.

Every claim in an answer carries a small numbered citation. Hover it, or tap it on a phone, and a card opens with the exact passage the claim came from and a link to the page. You never have to take the answer on trust.

If the docs don't cover what you asked, Cited says so and answers from general knowledge, with no citations. It never mixes the two, so a cited answer always means the docs actually said it.

Features

Inline Citations

This is the core of the product. Answers stream in with citations placed at the end of each sentence, and every source used is listed under the answer. The hover card shows the passage itself, so checking a claim takes a second instead of a new tab.

Index Any Docs Link

Paste a link and Cited reads the pages under it, up to thirty, then splits and embeds them. You can watch each step happen: pages being read, chunks being embedded, and starter questions being written for that site.

On the live demo this is turned off to protect the API keys, and five docs sites come preloaded: Next.js, React, Tailwind, Vue and the Python tutorial.

Search Across Every Site

There's no picking which docs to search. Every question is matched against every indexed site at once, so a question about Tailwind classes inside a Next.js component can pull from both.

Follow-up Threads

Questions build on each other. A follow-up like "what about server components?" is searched both on its own and together with the previous question, so it finds the right pages without dragging every new topic back to the old one.

Focus Mode

Long answers can be read in focus mode. Press F and everything except the paragraph you're reading fades back, with a small pill showing how much reading is left.

Model Fallback

Answers come from Claude by default. If a model is busy or fails, Cited moves to the next one in line and shows the switch in the steps, so you still get an answer instead of an error.

How It Works

Under the hood Cited is retrieval-augmented generation, split into two halves: indexing a site once, and answering questions against it.

Crawl
Reads every page under the link, stripping menus, headers and footers.
Chunk
Splits each page into pieces of about 800 characters along paragraph breaks.
Embed
Turns each chunk into a vector, with progress saved so an interrupted run picks up where it stopped.
Search
Scores the question against every chunk from every site and keeps the best five.
Answer
The five chunks become numbered sources in the prompt, and the model answers only from them, citing each one it uses.

Architecture

I kept the stack small on purpose. Every piece is something I could read end to end, with no vector database or framework hiding how retrieval actually works.

Python + FastAPI: The backend crawls, indexes and answers. Everything streams to the frontend as newline-delimited JSON events, and those events drive the step-by-step plan you see while it works.
Gemini Embeddings: Chunks and questions are embedded with Gemini, in batches that respect the free tier. Gemini also writes the starter questions for each site.
Claude API: Writes the answers. The prompt holds the numbered sources and the last few turns of the thread, with strict rules on when and where to cite.
NumPy Search:Each site is stored as JSON plus a NumPy array of vectors, and search is a straight cosine similarity over them. That's fast enough for a handful of sites and keeps the whole retrieval step in a few lines.
Next.js + Framer Motion: The frontend handles the streaming answer, the citation cards, focus mode and every transition between states.
Vercel: The frontend and the Python backend deploy together as one project on one domain, with the indexed sites shipped alongside the code.

Design Decisions

The whole product is about trust, so the interface has to make checking an answer feel effortless rather than like extra work.

  • Sources Stay In Place.Citations open a card right where you're reading instead of sending you to another page, so you never lose your spot in the answer.
  • Show The Work.While an answer is being written, the steps show what Cited is doing and which sections of the docs it's reading, so the wait feels like progress rather than a spinner.
  • One Input.The same field takes a question or a link and works out which one you meant, so there's nothing to learn before using it.
  • Honest About Gaps.When the docs don't have the answer, the interface says so plainly instead of dressing a guess up as a cited answer.
  • Built For Phones Too. Hover cards become tap cards, and the input docks to the bottom of the screen once an answer starts, so the whole flow works one-handed.