Sources

kai-sources

Gives a reply its references as tappable chips instead of a wall of links.

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

Preview

When to use

Below an assistant message that cites external references; sources the model streamed already render inside Message.

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/web-components';
  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], …
• Declarative path: <kai-source> elements as light-DOM children, appended after any prop sources. Attributes are href, label, headline, description, and the bare show-favicon: the item’s title field is spelled headline, because title is a reserved global HTML attribute.

<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. JS property; omit to pass `<kai-source>` light-DOM children instead.
showFavicon	boolean	false	Show favicons on all items (per-item `showFavicon` overrides).
numbered	boolean	false	Label each citation chip with its 1-based index in the merged list (`[1]`, `[2]`) instead of its own `label`.

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