---
title: 'Ai.Sources'
description: 'Shows a collapsible list of the sources used in a reply.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.094Z
checksum: 934548ff608e22f54a71584c2c99551a3d5dbf82b0ba7477d729ed8de318ca08
---

# Ai.Sources

**Experimental:** The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.

## Import

```tsx
import { Sources } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(<Sources />)
```

## Description

`Ai.Sources` shows a collapsible list of sources. Pass `sources` as an array of `{ url, title }` objects. Put it inside `Ai.Message` where the sources should appear. URLs are checked before links are rendered.


## Demos

### Sources


```tsx
<Message name="Aino" aiGenerated>
      <Response>
        {'You can block your card in the app under **Cards**.'}
      </Response>
    </Message>
<Sources top="x-small" sources={[{
url: 'https://www.dnb.no/kort',
title: 'Cards'
}, {
url: 'https://www.dnb.no/hjelp',
title: 'Help and contact'
}]} />
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "sources": {
      "doc": "The sources to list, as `{ url, title }`.",
      "type": "Array<AiSource>",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Translations

| Key       | nb-NO           | en-GB            | sv-SE           | da-DK           |
| --------- | --------------- | ---------------- | --------------- | --------------- |
| `sources` | Kilder (%count) | Sources (%count) | Källor (%count) | Kilder (%count) |