Sources

Cited sources under an AI response, plus compact numbered Citation chips for the markers models emit in grounded answers — a real <section> of real <a> links, not a card of styled divs.

Examples

<Sources>
  <Source
    index={1}
    title="Attention Is All You Need"
    href="https://arxiv.org/abs/1706.03762"
  />
  <Source
    index={2}
    title="Efficient Transformers: A Survey"
    href="https://arxiv.org/abs/2009.06732"
  />
</Sources>

<p>
  Transformers scale well with data and compute
  <Citation index={1} href="https://arxiv.org/abs/1706.03762" />
  , though attention is quadratic
  <Citation index={2} href="https://arxiv.org/abs/2009.06732" />.
</p>
<Sources>…</Sources>

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Sources>
  <Source
    index={1}
    title="Attention Is All You Need"
    href="https://arxiv.org/abs/1706.03762"
  />
</Sources>

<kernel-sources>
  <kernel-source index="1"
    title="Attention Is All You Need"
    href="https://arxiv.org/abs/1706.03762"
  ></kernel-source>
</kernel-sources>

Props

Accessibility

• Each source is a real link — open in a new tab, copy URL, and find-in-page all work without a custom interaction layer.
• External links default to rel="noopener noreferrer" when target="_blank".
• Citation chips are also real anchors, so the inline marker and the footer entry share the same navigable destination.