Summarize with AI
To show citations in AI answers, put a small marker after each sentence and make that marker open the exact passage in the source that backs it, quoted, with the matching words highlighted. Cite fewer sources, merge the copies, and label any sentence that has no source at all, instead of letting it look as solid as the rest.
Most AI products treat citations as a bibliography: a row of numbered links under the answer that proves the model read something. People do not read that row. They use it to check one claim, usually a number, and the first link that fails to back it up decides whether they trust the product again. If your answers are good and your users still check everything by hand, the citation design is where your work is getting lost.
Seven bracketed numbers and a page that moved
Picture an AI research assistant built for analysts at small investment funds. The input says Ask a research question. An analyst types: How did Halden Robotics cut costs across its last two annual reports? Halden is made up for this example, and so is the product.
The answer streams in as four paragraphs, about 210 words. The second paragraph says operating costs fell by $12.4 million, mostly from moving assembly to one plant. Under the last paragraph sits a line of bracketed numbers, [1] to [7]. Hovering one shows only a domain name. Two share a domain. Three are news sites that rewrote one press release. None sits next to the sentence it supports.
The $12.4 million is the line she needs for her memo, so she hovers [3]. The preview card loads the page title of the site's error page, because the article moved. She opens [1] instead. It is a 64 page annual report PDF, and it opens on the cover. She searches for operating costs and gets 19 matches. On page 41 a table shows $9.1 million. The $12.4 million came from a news article that added two years together.
She closes the tab, rebuilds the paragraph from the PDF by hand, and pastes none of the answer into her memo. The next morning she asks her next question in the general chat assistant her firm already pays for.
The fix his team shipped was more sources
The founder of that assistant sees it from the other side. At one customer, active seats drop from eleven to four over a month. On the renewal call, the head of research says something in the spirit of: we still check every number ourselves. That line is an illustration, but it is the kind of thing these calls return.
His team raises the cap from seven sources to twelve and adds favicons, on the theory that more sources look more thorough. Behind the answer sits a year of work nobody sees: a reranker tuned on filings, a step that checks each sentence against the passage it came from, an eval set of a few hundred analyst questions. He knows each sentence was grounded, because he built the grounding. The analyst sees twelve bracketed numbers and a dead preview.
Then an investor asks the question every AI founder in this space gets: what stops a big chat model from adding citations and doing this for free? The honest answer is the year of grounding work, and none of it is on the screen. A product read as a thin layer gets priced like one. AI product builders average around 52 percent gross margin, against 70 to 80 percent for traditional software, because every answer is paid inference. An answer the analyst rebuilds by hand cost the full price and delivered nothing.
A citation is a check, not a credit line
Most advice on AI citations borrows from academic papers: number the sources, list them at the end, make them look tidy. That answers where did you read this. The user is asking something else: is this sentence true, and how fast can I find out.
The gap between the two is not small. A Stanford study of popular generative search engines found that only 51.5 percent of generated sentences were fully supported by their citations, and only 74.5 percent of citations actually supported the sentence they were attached to. So a marker that sends someone to a whole page is a promise that fails about one time in four. After two or three misses, users stop clicking and start checking everything by hand.
So design the citation as a verification tool: its job is to take one sentence from claim to proof in as few steps as possible. If you want the wider set of trust patterns for AI features, our guide to AI product UX covers them; this post stays on the citation itself.
Point at the sentence in the source, not the page
The unit a user checks is a sentence, so the citation has to live at the sentence. Put the marker right after the claim it supports, not at the end of the paragraph.
Hovering or tapping a marker opens a card. For the Halden answer, the card for the cost sentence would read: Halden Robotics Annual Report 2025, PDF, page 41. Below that, the quoted span from the table, two lines long, with $9.1 million in bold. Under the quote, one button reading Open at this passage. If the sentence said $12.4 million and the quote says $9.1 million, the analyst sees the mismatch in the card, before she ever opens the PDF.
The button should land on the passage, not the top of the page. For web pages, a text fragment link (the part after #:~:text= in the address) asks the browser to scroll to and highlight the quoted words. For PDFs you render in your own viewer, open on the right page with the span highlighted. The reader should never have to search for a sentence you already found.
Save the quoted span when you retrieve it, not when the user clicks. Pages move and get edited. If the link has gone dead, the card still shows the text the model read, with a line such as Page has moved. Showing the text as retrieved on 14 September. A dead link with the quote still visible is a small problem. A dead link with nothing behind it ends the session.
The same idea works far outside software. On the Mi-VAD website we designed, the whole pitch is that the heart pump is small. The homepage does not ask anyone to take that on faith. It shows the device beside the larger HeartMate 3 and a quarter dollar, so a visitor checks the claim against things she already knows, on the same screen as the claim. A citation card should give a sentence that same treatment.
Three sources that hold beat twelve that might
More markers feel thorough to the team and look like noise to the reader, and each one is another chance to find a miss. Cite the strongest source for each sentence, and add a second only when it says something the first does not.
- Merge copies. Three news sites rewriting one press release are one source. Cite the press release, or the filing it came from.
- Put primary sources first. A filing, a policy document or a dataset beats an article about it. Label the kind on the card: Annual report, News, Forum post.
- Show the date on every card. A 2023 page cited for a 2025 fact is the first thing an analyst will catch.
- Mark partial support honestly. If a source backs half the sentence, say Supports the first half, and show which half.
This is a different job from laying out a whole search results page, where the answer has to sit with a list of other matches. We covered that layout in how to design an AI search results page. Inside a chat answer there is no list to fall back on, so each citation carries its own proof.
Label the sentence that has no source
Every long answer contains sentences the model wrote without retrieval behind them: a summary line, a transition, a guess dressed as a fact. Most products style them exactly like the cited sentences, so the reader cannot tell what was read from what was written.
Give unsupported sentences a visible state. A dotted underline and a small label reading No source. Model's own wording is enough. Run a plain check on numbers too: if a figure in the sentence does not appear in its quoted span, flag the sentence with Number not found in source. For the Halden answer, that check alone would have caught the $12.4 million before the analyst did.
Here is the claim many teams push back on. An answer with two flagged sentences earns more trust than an answer with none, because it proves the product checks its own work. When decisions rather than answers need this kind of trail, the same thinking becomes an audit view, which we walk through in designing AI audit interfaces.
A citation audit you can run this week
None of this needs a new model. Your retrieval step already knows which passage each sentence came from; the work is putting it on the screen. A first pass fits in a week:
- Pull 30 recent answers from real users. Mark every sentence supported, partly supported, unsupported, or source dead, and count each pile.
- Hover every citation in ten of those answers. Count the previews that fail to load or land on the wrong page.
- Start saving the quoted span with each citation at retrieval time, with the date.
- Move each marker to the sentence it supports, and make it open a card with the quote, the source kind, the date and an Open at this passage button.
- Cap citations per sentence, merge copies of one story, and put primary sources first.
- Add the No source label and the number check. Ship them, even if the first version is rough.
- Watch three users check one claim before and after. Note how many clicks it takes them to reach the proof.
If you would rather bring in a team for it, our ranking of UX design agencies for AI search products compares studios that have designed answer and source screens.
Where Studio Maydit fits
The grounding your team built is the best argument your product has, and right now it lives in a pipeline nobody can see. Studio Maydit is a product and web design studio for AI founders, and this is the kind of screen we work on: the answer card, the source card, the states for dead links and missing sources, and the first run where a new user decides whether to believe you. Fixed-scope projects take three to four weeks and end with a diagnosis of what is leaking in the product. If your users still check every number by hand, book a 30 minute call with Studio Maydit.
