Source

kai-source

A citation chip that shows a domain label and reveals a hover card with a headline and description — drop it below an assistant message to let users verify where an answer came from.

• Shadow DOM
• All props are attributes
• Optional favicon
• Hover-card preview
• No events

Preview

When to use

Use <kai-source> for a single citation chip in isolation — inside a custom message template or a tooltip. For two or more sources, reach for <kai-sources> instead: it accepts a sources array and lays chips out in a wrapping row.

Usage

All props are plain HTML attributes — no JavaScript needed:

<kai-source
  href="https://kitn.dev"
  headline="kitn — the kit"
  description="Composable SolidJS + web-component chat UI."
  show-favicon
></kai-source>
<script type="module">import '@kitn.ai/ui/elements';</script>

• href is required. The element renders nothing without it.
• label defaults to the hostname (kitn.dev). Pass an explicit label when the domain is ambiguous or too long.
• headline (not title) — title is a reserved HTML attribute that conflicts with custom element constructors.
• Clicking the chip opens the URL directly — the element emits no events.

Examples

Basic Citation

Code

With Favicon

Code

Custom Label

Override the domain default with label when you want a shorter or more recognisable name.

Code

Full Detail with Favicon

Code

Props

Property	Type	Default	Notes
href	string	''	The URL this citation links to (the domain also seeds the default label/favicon).
label	string	—	Trigger label (defaults to the domain).
headline	string	''	Hover-card headline. Attribute: `headline` (`title` is avoided — it's a global HTML attribute that reflects in a CE constructor and breaks it).
description	string	''	Hover-card body text describing the source.
showFavicon	boolean	false	Show the source's favicon next to the trigger 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