Adding Citations to RAG Answers

Users trust an answer more when they can click through to the source. Citations also make hallucinations easy to spot: an unsupported claim has nothing to point at.

Option 1: Ask for chunk IDs

Answer the question using only the sources below. After each sentence,
cite the source id in square brackets, e.g. [2]. If no source supports
an answer, say "I couldn't find that in the documentation."

<source id="1" url="/docs/billing">...</source>
<source id="2" url="/docs/refunds">...</source>

Then turn [2] into a link with a regular expression. This is simple and works with any model, but the model can still cite the wrong source.

Option 2: Built-in citations

With the Claude API you can pass each chunk as a document and enable citations. The response text is split into blocks, and cited blocks carry the exact quoted text and which document it came from.

const response = await client.messages.create({
  model: 'claude-opus-5-5',
  max_tokens: 16000,
  messages: [
    {
      role: 'user',
      content: [
        ...chunks.map((chunk) => ({
          type: 'document',
          source: { type: 'text', media_type: 'text/plain', data: chunk.content },
          title: chunk.title,
          citations: { enabled: true },
        })),
        { type: 'text', text: question },
      ],
    },
  ],
});

for (const block of response.content) {
  if (block.type !== 'text') continue;
  const refs = (block.citations ?? []).map((ct) => chunks[ct.document_index].url);
  render(block.text, refs);
}

Good citation UX

• Show a numbered footnote next to the sentence, and the source title on hover.
• Highlight the cited passage when the user opens the source.
• Show "no sources found" honestly instead of an uncited answer.