Cite
The numbered citation pill. Render <Cite> immediately after any sourced figure inside a component, passing the short citationId from the tool result - the same id used in a prose citation [n](cite:<id>). In the running app the pill opens the source in the app's source panel on click and previews it on hover, exactly like prose citations.
Examples
The headline figures, each tied back to its source:
The pills above are inert in the design system - there's no chat host to resolve them. Inside a component frame they post to the host, which owns the id → source map.
Props
| Prop | Type | Description |
|---|---|---|
id | string | The short citation id from the tool result. |
children | ReactNode | Optional content the pill trails (usually omitted). |
The bridge
Cite reads its behavior from a InlineCiteProvider context, so numbering is scoped and the host wires the click/hover handlers - the library never posts cross-origin messages itself:
- In the app / component frame - the host wraps components in a
InlineCiteProviderwhose handlers post the citation id to the parent (using its own known origin), which resolves it and opens the source panel. - In the design system - no handlers are wired, so the pills render and number correctly but stay inert.
<div className="tabular-nums">
$4.51B
<Cite id="capiq-1" />
</div>Agent context
Render <Cite id="<citationId>" /> immediately after any sourced figure, passing the same short citationId used in prose [n](cite:<id>). Only pass ids that appear in this turn's tool results - a made-up id renders a dead pill. Every externally sourced number should carry a <Cite>.