# Sources

A wrapping row of citation chips — one element, any number of links, with optional favicons and hover-card previews.

<p class="kai-tag-sub">kai-sources</p>

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.

## Preview

> **tip:** 
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:

```html
<kai-sources id="srcs" show-favicon></kai-sources>
<script type="module">

  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`.

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

## Examples

### Default with Favicons

### Domain Labels Only

### Numbered Citations

## Props

## Composed from