Sources

kai-sources

A wrapping row of citation chips that renders the sources behind an assistant answer — each chip shows the domain (or a custom label), an optional favicon, and a hover-card with the title and description.

• Shadow DOM
• No events
• Optional favicons
• Numbered or domain labels
• Declarative children

Preview

When to use

Place <kai-sources> directly below an assistant message when the reply cites external references. Use numbered when the answer body uses [1], [2], … citation markers. Use the sources property for dynamic or streamed lists; use declarative <kai-source> children for static or server-rendered markup.

Usage

Assign the sources property — an array can’t be an HTML attribute:

<kai-sources id="srcs" show-favicon></kai-sources>
<script type="module">
  import '@kitn.ai/ui/elements';
  document.getElementById('srcs').sources = [
    { href: 'https://kitn.dev', title: 'kitn — the kit', description: 'Composable chat UI.' },
    { href: 'https://solidjs.com', title: 'SolidJS', description: 'A reactive UI library.' },
  ];
</script>

• Each item accepts href (required), title, description, label, and showFavicon.
• show-favicon enables favicons globally; a per-item showFavicon: false overrides for that chip.
• numbered replaces domain labels with [1], [2], … — useful when the response body uses in-line citation markers.
• Declarative path — write <kai-source> elements as light-DOM children of <kai-sources>. Prop sources render first; declarative children are appended after.

Examples

Default with Favicons

Code

Domain Labels Only

Code

Numbered Citations

Code

Props

Property	Type	Default	Notes
sources	SourceItem[]	[]	The sources to render. Set as a JS property.
showFavicon	boolean	false	Show favicons on all items (per-item `showFavicon` overrides).
numbered	boolean	false	When true, each citation chip is labelled with its 1-based index in the merged (prop + declarative-children) list (`[1]`, `[2]`, …) instead of the per-item `label` or domain fallback. HTML attribute: `numbered` (boolean — bare attribute or `numbered="true"`). JS property: `el.numbered = true`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

SourceSourceTriggerSourceContentSourceList

---

Need a hand? Report a bug Ask for help