Skip to content

Annotations and Citations

Responses streaming includes annotations you can use to build rich, trustworthy UIs. This page explains what to expect and how to render them.

What are annotations?

Annotations attach metadata to output text so you can:

  • Render citation markers that refer to source material.
  • Attribute content to tool outputs.
  • Highlight the context that the model used when answering.

You will see annotations packaged alongside output_text items in the stream and the final response object.

Rendering citations

When citations are available, you’ll receive both text deltas and a growing annotations array for the current content part. A simple approach is to display bracketed indices [1], [2], etc., and show a references panel mapping each index to metadata (e.g., filename, URL, or other reference info available in annotations).

Pseudocode:

js
if (event.type === 'response.output_text.delta') {
  ui.appendText(event.delta);
}

if (event.type === 'response.output_text.delta' || event.type === 'response.output_text.done') {
  const annotations = currentContent.annotations; // track from events
  renderReferences(annotations);
}

Context inputs

If you pass background material as messages with name set to "context" (for example, input_text items marked as context), annotations can help you distinguish what came from user-supplied context. This is useful when mixing private notes with retrieved sources.

Example input snippet:

json
{
  "type": "message",
  "role": "user",
  "name": "context",
  "content": [
    { "type": "input_text", "text": "Roadmap excerpt...", "name": "context" }
  ]
}

Tool outputs

When tools such as File Search or MCP tools are used, output may include markers that allow you to link final answers back to tool-generated material. Treat these similarly to citations: present a reference list and let users navigate between text and source snippets.

UI guidelines

  • Keep the main answer readable; place references in a sidebar or footnotes section.
  • Let users expand a citation to preview the corresponding source text or resource.
  • Provide clear labels for user-provided context vs retrieved sources.
  • Preserve streaming interactivity by appending text deltas immediately, then updating references incrementally.