# Sources

> Citations as numbered chips or cards, linked from [n] markers in the answer.

Source: https://agent-ui-kit-demo.vercel.app/docs/components/sources

## Installation

From npm:

```bash
npm i @dgesteves/agent-ui-kit ai
```

```tsx
import { Sources, getSourceParts } from '@dgesteves/agent-ui-kit';
import '@dgesteves/agent-ui-kit/styles.css'; // once per app, or @import '@dgesteves/agent-ui-kit/tailwind.css' with Tailwind v4
```

Or as source, with the shadcn CLI:

```bash
npx shadcn@latest add @agent-ui-kit/sources
```

```tsx
import { Sources } from '@/components/agent-ui/sources';
import { getSourceParts } from '@/components/agent-ui/lib/ai';
```

## Usage

```tsx
// Send them from the server with toUIMessageStreamResponse({ sendSources: true }).
<Sources sources={getSourceParts(message.parts)} variant="cards" />
```

## API reference

### Sources

Citation list as compact chips or richer cards. External links open in a new tab.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sources` (required) | `ReadonlyArray<SourcePart \| SourceItem>` |  |  |
| `variant` | `'chips' \| 'cards'` | `'chips'` |  |
| `label` | `string \| null` | `'Sources'` | Visible heading. Default "Sources"; pass `null` to hide it (it stays as the accessible name). |
| `idPrefix` | `string` | `'source'` | Prefix for element ids (`${idPrefix}-1`, …) so inline citations can link to a source. |

Other props go to the root `<div>`: `className`, `id`, `aria-*`, `data-*` and event handlers.

### SourceItem

A source in app-level shape. AI SDK `source-url` / `source-document` parts are accepted too.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` (required) | `string` |  |  |
| `url` | `string` |  |  |
| `title` | `string` |  |  |
| `description` | `string` |  | Optional snippet shown in the cards variant. |
| `filename` | `string` |  | For documents. |
| `mediaType` | `string` |  |  |

## Accessibility

- An ordered list named by `label` ("Sources"), not a landmark, so a long conversation doesn’t flood landmark navigation.
- Links open in a new tab and say so to screen readers: "(opens in a new tab)".
- Each item has the id `${idPrefix}-${n}`, which `[n]` citation links in `Markdown` and `AgentMessage` point to.
- It has no state and no `'use client'`, so it renders in Server Components too.

## Theming

Slots (`data-slot`): `sources`.

- `data-variant` on `sources`: 'chips' | 'cards'

Tokens it uses: `--aui-accent-fg`, `--aui-border`, `--aui-border-strong`, `--aui-fg`, `--aui-fg-muted`, `--aui-fg-subtle`, `--aui-font-mono`, `--aui-font-sans`, `--aui-ring`, `--aui-surface`, `--aui-surface-2`. See https://agent-ui-kit-demo.vercel.app/docs/getting-started#theming.