---
title: 'Ai.Welcome'
description: 'Greets the user before the conversation starts.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.095Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Ai.Welcome

**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 { Welcome } from '@dnb/eufemia/extensions/ai'
import { Avatar } from '@dnb/eufemia/components'
import { aino } from '@dnb/eufemia/icons'
import '@dnb/eufemia/extensions/ai/style'
render(
  <Welcome
    greeting="Hi Matthias"
    avatar={<Avatar size="small" icon={aino} hasLabel />}
    title="Where do you want to start today?"
  />
)
```

## Description

`Ai.Welcome` greets the user before the conversation starts, with a heading and content below, like [Ai.Suggestions](/web/patterns-and-extensions/ai/Suggestions/) or a compact [Ai.PromptInput](/web/patterns-and-extensions/ai/PromptInput/).

Use `greeting` for the introduction above the heading and `avatar` for an optional decorative avatar beside it. For the Aino avatar, use `<Avatar size="small" icon={aino} hasLabel />`. Welcome hides the decorative avatar from screen readers; `hasLabel` tells Avatar that its accessible context is provided here rather than by an Avatar.Group. The greeting and avatar are omitted for an empty or false greeting. Keep meaningful identity in the greeting text. Your application provides and translates the greeting and title.

The title uses Eufemia's large heading typography. Keep `level` aligned with the surrounding heading structure; it defaults to `2`. Sections have `1.25rem` spacing. Suggestions placed directly inside Welcome are stacked with `1rem` between buttons and can wrap long labels on narrow screens. Standalone Suggestions retain their horizontal wrapping layout.


## Demos

### Welcome with suggestions


```tsx
render(<Welcome greeting="Hi Matthias" avatar={<Avatar size="small" icon={aino} hasLabel />} title="Where do you want to start today?">
        <Suggestions>
          <Suggestion suggestion="Make a transfer" />
          <Suggestion suggestion="Look at my spendings" />
          <Suggestion suggestion="Pay a bill" />
        </Suggestions>
      </Welcome>)
```


### Long labels in a narrow container

Suggestion labels wrap inside their buttons, including long words and translated text.


```tsx
render(<Welcome style={{
  width: '13.75rem',
  maxWidth: '100%'
}} greeting="Hei Matthias" avatar={<Avatar size="small" icon={aino} hasLabel />} title="Hva vil du gjøre i dag?">
        <Suggestions>
          <Suggestion suggestion="Vis betalingsoppdragsoversikten" />
          <Suggestion suggestion="Hjelp meg å forstå forbruket mitt denne måneden" />
        </Suggestions>
      </Welcome>)
```

<!-- 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": {
    "greeting": {
      "doc": "Greeting shown above the heading, e.g. `Hi Matthias`. Empty or false greetings are omitted.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "avatar": {
      "doc": "Decorative avatar beside the greeting. It is hidden from screen readers and omitted when there is no greeting. Set `hasLabel` when using Avatar outside Avatar.Group.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "title": {
      "doc": "The heading, e.g. `Where do you want to start today?`.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "level": {
      "doc": "The heading level.",
      "type": "number",
      "defaultValue": "2",
      "status": "optional"
    },
    "children": {
      "doc": "Content shown below the heading, e.g. `Ai.Suggestions`.",
      "type": "React.ReactNode",
      "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)."
}
```