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.

Citations the model streamed as source parts already render as a row inside the message. Reach for <kai-sources> when the citations are yours to place rather than the model’s.

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. The attributes are href, label, headline, description, and the bare show-favicon — note headline, not title: title is a reserved global HTML attribute, so the declarative form spells the item’s title field headline.

<kai-sources>
  <kai-source href="https://kitn.ai" headline="AI/UI" description="Web components for AI chat"></kai-source>
</kai-sources>

Child element	Attributes	Text content	Notes
<kai-source>	descriptionheadlinehreflabelshow-favicon	—	Parse a single light-DOM `<kai-source>` element into a `KaiSourceItem` descriptor. Attribute mapping: - `href` → KaiSourceItem.href - `label` → KaiSourceItem.label - `headline` → KaiSourceItem.title (matches kai-source's prop name; "title" is a reserved HTMLElement attribute so kai-source uses "headline") - `description` → KaiSourceItem.description - `show-favicon`→ KaiSourceItem.showFavicon (bare boolean attribute)

Examples

Default with Favicons

Code

Domain Labels Only

Code

Numbered Citations

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
sources	KaiSourceItem[]	[]	The sources to render. Set as a JS property. Omit to supply them as `<kai-source>` light-DOM children instead; when both are present the property's sources come first.
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: a 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