---
title: 'AI components'
description: 'Building blocks for AI chat experiences, from the welcome screen with suggestions to the conversation, streamed markdown responses and the prompt input.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.117Z
checksum: a503cf4158ae3b7807aee4a4fafd74484fd1cea3a1fc3b6590a21dac99d6786e
---

# AI components

**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 {
  Conversation,
  Message,
  PromptInput,
  Response,
} from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
```

Import the components and hooks you use by name. The `Ai.` prefix in the documentation identifies the extension; the examples use named imports directly.

### Isolated styles

For applications using [style isolation](/web/usage/customisation/styling/style-isolation/), replace the regular AI style import with the isolated entry point:

```tsx
import '@dnb/eufemia/style/isolated'
import '@dnb/eufemia/extensions/ai/style/isolated'
import { IsolatedStyleScope } from '@dnb/eufemia/shared'
import { Response } from '@dnb/eufemia/extensions/ai'

render(
  <IsolatedStyleScope>
    <Response>{'Hello from the assistant.'}</Response>
  </IsolatedStyleScope>
)
```

The AI entry point adds only the extension styles. Keep the isolated basis and theme imports for the Eufemia components used inside it.

## Description

`Ai` provides building blocks for AI chat experiences, built with Eufemia components. Use them to build a chat with an assistant, from the welcome screen with suggestions to the conversation and the prompt input.

## Usage

Your application owns the messages, transport, tool execution and error handling. Eufemia renders the content and handles presentation, keyboard interaction and conversation scrolling.

The message type below belongs to this example. Use your application's data and map it to the component props.

```tsx
import { useId } from 'react'
import {
  Conversation,
  Message,
  MessageIndicator,
  PromptInput,
  Response,
} from '@dnb/eufemia/extensions/ai'
import { GlobalStatus } from '@dnb/eufemia/components'
import '@dnb/eufemia/extensions/ai/style'

type ChatMessage = {
  id: string
  from: 'user' | 'assistant'
  text: string
  isStreaming?: boolean
}

type ChatProps = {
  messages: Array<ChatMessage>
  isBusy: boolean
  isWaiting: boolean
  hasError: boolean
  onSend: (text: string) => void
  onStop: () => void
}

export function Chat({
  messages,
  isBusy,
  isWaiting,
  hasError,
  onSend,
  onStop,
}: ChatProps) {
  const prefix = useId()
  return (
    <>
      <Conversation
        label="Chat with the assistant"
        style={{ height: '32rem' }}
      >
        {messages.map((message) => (
          <Message
            key={message.id}
            id={prefix + message.id}
            from={message.from}
          >
            {message.from === 'user' ? (
              message.text
            ) : (
              <Response
                parseIncompleteMarkdown={message.isStreaming ?? false}
              >
                {message.text}
              </Response>
            )}
          </Message>
        ))}
        {isWaiting && <MessageIndicator />}
      </Conversation>
      {hasError && (
        <GlobalStatus
          show
          autoScroll={false}
          omitSetFocus
          id={prefix + '-error'}
          text="The reply could not be completed. Try again."
        />
      )}
      <PromptInput
        isBusy={isBusy}
        onSubmit={({ value }) => onSend(value)}
        onStop={onStop}
      />
    </>
  )
}
```

Compose tool results and sources inside each message using `Ai.Task` and `Ai.Sources`. See [Integrations](/web/patterns-and-extensions/ai/integrations/) for complete framework examples and ownership of each state.

Use [Ai.AgentAction](/web/patterns-and-extensions/ai/AgentAction/) for compact agent actions with progress, a result, and optional Undo. The application controls the action state and reversal window.

Use [Ai.Confirmation](/web/patterns-and-extensions/ai/Confirmation/) to ask the user to confirm or decline before proceeding with a proposed action.

## Guides

For streamed-reply announcements, follow the [application-owned announcement recipe](/web/patterns-and-extensions/ai/integrations/#screen-reader-announcements).

- [Translations](/web/patterns-and-extensions/ai/translations/): select a locale and customize component labels.
- [Integrations](/web/patterns-and-extensions/ai/integrations/): composition and recipes for AI SDK and TanStack AI.

- [Message scroller](/web/patterns-and-extensions/ai/message-scroller/): how the conversation scrolls while replies stream in.

## Components

<ListAiComponents size="small" />

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/ai)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/patterns-and-extensions/ai)


## Examples

### Full chat experience

A complete chat with an assistant. Choose a suggestion or write a message, e.g. "Block my card" or "Compare my spending", to see the tools, answer and sources stream in. Press stop to end the reply, or regenerate the last answer.

The demo uses scripted replies and local chat state. Connect your own messages, status, send, stop and regenerate actions to the components in your app.

New chat opens an empty conversation and clears any draft or pending reply. The demo content and component labels are in English. See [Translations](/web/patterns-and-extensions/ai/translations/) for changing component labels; your application supplies translated chat content.


```tsx
const primarySuggestions = [{
  icon: card,
  prompt: 'Block my Visa card'
}, {
  icon: bank,
  prompt: 'Compare my spending with last month'
}, {
  icon: transfer,
  prompt: 'Show my latest transactions'
}];
const suggestionChips = [{
  icon: loan,
  label: 'loan offers',
  prompt: 'What loan offers do you have?'
}, {
  label: 'what can you do?',
  prompt: 'What can you help me with?'
}];
const ainoAvatar = <Avatar size="small" icon={aino} hasLabel />;
const BankingAssistant = () => {
  const [chatStarted, setChatStarted] = useState(false);
  const [draft, setDraft] = useState('');
  const promptRef = useRef<HTMLTextAreaElement>(null);
  const [feedback, setFeedback] = useState({});
  const {
    messages,
    status,
    sendMessage,
    stop,
    regenerate,
    setMessages
  } = useChatSimulation();
  const send = text => sendMessage({
    text
  });
  const questions = messages.filter(({
    role
  }) => role === 'user');
  return <Provider locale="en-GB">
              <ChatLayout>
                <section className="chat" style={chatStyle}>
                  <Flex.Horizontal align="center" justify="space-between">
                    <Flex.Horizontal align="center" gap="small">
                      {ainoAvatar}
                      <div>
                        <strong>Aino</strong>
                        <P size="small">DNB Banking Assistant</P>
                      </div>
                    </Flex.Horizontal>

                    <Button variant="tertiary" icon={add} iconPosition="left" onClick={() => {
            setMessages([]);
            setFeedback({});
            setDraft('');
            setChatStarted(true);
            promptRef.current?.focus();
          }}>
                      New chat
                    </Button>
                  </Flex.Horizontal>

                  {!chatStarted && messages.length === 0 ? <Welcome greeting="Hello, Peter" avatar={<Avatar size="small" icon={aino} hasLabel />} title="Where do you want to start today?" style={{
          margin: 'auto 0'
        }}>
                      <Suggestions>
                        {primarySuggestions.map(({
              icon,
              prompt
            }) => <Suggestion key={prompt} icon={icon} suggestion={prompt} onClick={({
              suggestion
            }) => {
              send(suggestion);
              promptRef.current?.focus();
            }} />)}
                      </Suggestions>
                      <Suggestions>
                        {suggestionChips.map(({
              icon,
              label,
              prompt
            }) => <Suggestion key={label} icon={icon} suggestion={prompt} onClick={({
              suggestion
            }) => {
              send(suggestion);
              promptRef.current?.focus();
            }}>
                            {label}
                          </Suggestion>)}
                      </Suggestions>
                    </Welcome> : <Conversation id="banking-chat" aria-live="off" scrollBehavior="end" style={{
          flex: '1 1 auto'
        }}>
                      <DateMarker date={new Date()} />
                      <Info>
                        <P>
                          Aino is a chatbot for customer service. Do not
                          share personal information with the chatbot. Read
                          more about{' '}
                          <Anchor href="https://www.dnb.no/personvern">
                            your privacy
                          </Anchor>
                          .
                        </P>
                        <P top>
                          Some answers are generated with artificial
                          intelligence and are marked with a tag.
                          AI-generated answers can contain errors.
                        </P>
                      </Info>

                      {messages.map((message, index) => {
            const isAssistant = message.role === 'assistant';
            const isLast = index === messages.length - 1;
            const isDone = !(isLast && status === 'streaming');
            const transactions = getTransactions(message);
            const actions = isAssistant && isDone && <Actions>
                            <CopyOnClick.Button size="small" iconSize="default" bounding copyContent={getText(message)} title="Copy response" tooltip="Copy response" />
                            <Action icon={thumbs_up} label="Good answer" selected={feedback[message.id] === true} onClick={() => setFeedback(all => ({
                ...all,
                [message.id]: all[message.id] === true ? undefined : true
              }))} />
                            <Action icon={thumbs_down} label="Bad answer" selected={feedback[message.id] === false} onClick={() => setFeedback(all => ({
                ...all,
                [message.id]: all[message.id] === false ? undefined : false
              }))} />
                            {isLast && <Action icon={refresh} label="Regenerate" onClick={() => {
                regenerate();
                promptRef.current?.focus();
              }} />}
                          </Actions>;
            return <Fragment key={message.id}>
                            <Message id={message.id} from={message.role} aria-label={isAssistant ? 'Aino' : 'You'} grouped={isAssistant && messages[index - 1]?.role === 'assistant'} avatar={isAssistant ? ainoAvatar : undefined} aiGenerated={isAssistant} actions={transactions ? undefined : actions}>
                              <DemoMessageContent message={message} />
                              {message.stopped && <P size="small">Reply stopped.</P>}
                            </Message>

                            {transactions && <Message variant="plain" actions={actions}>
                                <List.Container>
                                  {transactions.map(({
                    name,
                    account,
                    date,
                    amount
                  }) => <List.Item.Action key={name} icon={amount < 0 ? transfer : pay_from} onClick={() => send(`Show the payment confirmation for ${name}`)}>
                                        <List.Cell.Title>
                                          <List.Cell.Title.Overline>
                                            {account} · {date}
                                          </List.Cell.Title.Overline>
                                          {name}
                                        </List.Cell.Title>
                                        <List.Cell.End>
                                          <NumberFormat.Currency value={amount} />
                                        </List.Cell.End>
                                      </List.Item.Action>)}
                                </List.Container>
                              </Message>}
                          </Fragment>;
          })}

                      {status === 'submitted' && <MessageIndicator name="Aino" avatar={ainoAvatar} />}
                    </Conversation>}
                  <ReplyAnnouncement isBusy={status !== 'ready'} messageId={messages.at(-1)?.role === 'assistant' ? messages.at(-1).id : undefined} outcome={messages.at(-1)?.stopped ? 'Reply stopped.' : undefined} />

                  <PromptInput value={draft} textareaProps={{
          ref: promptRef
        }} onChange={({
          value
        }) => setDraft(value)} isBusy={status === 'submitted' || status === 'streaming'} characterCounter={200} onSubmit={({
          value
        }) => {
          send(value);
          setDraft('');
        }} onStop={stop} />
                </section>

                {questions.length > 1 && <QuestionOverview questions={questions} />}
              </ChatLayout>
            </Provider>;
};

// Jump between the questions, and see which one you read
// Jump between the questions, and see which one you read
const QuestionOverview = ({
  questions
}) => {
  const {
    scrollToMessage
  } = useConversation('banking-chat');
  const {
    currentTurnId
  } = useConversationVisibility('banking-chat');
  return <nav aria-label="Questions in this chat">
              <P bottom="x-small">
                <strong>Questions</strong>
              </P>
              <List.Container>
                {questions.map(question => <List.Item.Action key={question.id} selected={question.id === currentTurnId} aria-current={question.id === currentTurnId ? 'step' : undefined} onClick={() => scrollToMessage(question.id)}>
                    <List.Cell.Title>{getText(question)}</List.Cell.Title>
                  </List.Item.Action>)}
              </List.Container>
            </nav>;
};
render(<BankingAssistant />);
```


### Chat window and customer-service handover

Compose a chat window with Dialog for its keyboard focus, close controls and responsive modal behavior. The input uses the large radius token inside the window. Suggestions sit above the input; the application owns sending them. A customer-service reply uses the assistant side with a headset avatar and no AI-generated label.


```tsx
render(<Dialog restoreFocusTo={() => document.getElementById('ai-chat-window-trigger')} trigger={props => <Button {...props} id="ai-chat-window-trigger">
            Open chat window
          </Button>} minWidth="23rem" maxWidth="23rem" title="Chat with DNB">
        <Flex.Stack gap="small" style={{
    height: 'min(38rem, 65dvh)',
    minHeight: '18rem'
  }}>
          <Conversation scrollBehavior="end" aria-live="off" style={{
      flex: '1 1 auto'
    }}>
            <Message from="user">Can I speak to a person?</Message>
            <Message aria-label="Aino" avatar={<Avatar size="small" icon={aino} hasLabel />}>
              I will connect you to customer service.
            </Message>
            <Message aria-label="Maria, customer service" avatar={<Avatar size="small" icon={customer_service} hasLabel />}>
              Hello, I am Maria from DNB. How can I help?
            </Message>
          </Conversation>
          <Suggestions aria-label="Suggested replies">
            <Suggestion suggestion="Help with a payment" />
            <Suggestion suggestion="Help with my card" />
          </Suggestions>
          <PromptInput style={{
      '--ai-prompt-input-radius': 'var(--token-radius-lg)'
    } as React.CSSProperties} />
        </Flex.Stack>
      </Dialog>)
```


### Streamed reply announcements

The application keeps a separate `AriaLive` region mounted and updates it once when the reply ends, including when Stop preserves a partial answer. The conversation's automatic live announcements are disabled to avoid duplicates. See [Screen reader announcements](/web/patterns-and-extensions/ai/integrations/#screen-reader-announcements) for the application helper and failure handling.


```tsx
const Chat = () => {
  const {
    messages,
    status,
    sendMessage,
    stop
  } = useChatSimulation();
  const isBusy = status !== 'ready';
  const reply = messages.at(-1);
  return <>
              <Conversation aria-live="off" style={{
      height: '18rem'
    }}>
                {messages.map(message => <Message key={message.id} id={message.id} from={message.role}>
                    <DemoMessageContent message={message} />
                    {message.stopped && <P size="small">Reply stopped.</P>}
                  </Message>)}
              </Conversation>
              <ReplyAnnouncement isBusy={isBusy} messageId={reply?.role === 'assistant' ? reply.id : undefined} outcome={reply?.stopped ? 'Reply stopped.' : undefined} />
              <PromptInput isBusy={isBusy} onSubmit={({
      value
    }) => {
      sendMessage({
        text: value
      });
    }} onStop={() => {
      stop();
    }} />
            </>;
};
render(<Chat />);
```


### Chat with compact input


```tsx
render(<Welcome greeting="Hello, Peter" avatar={<Avatar size="small" icon={aino} hasLabel />} title="Where do you want to start today?">
        <Suggestions>
          <Suggestion icon={bank} suggestion="Explain my spending this month" />
          <Suggestion icon={bank} suggestion="Show my savings goals" />
          <Suggestion icon={bank} suggestion="When is my next bill due?" />
        </Suggestions>
        <PromptInput variant="compact" placeholder="Start typing here" />
      </Welcome>)
```


### Chat with content in the conversation

User messages are placed on the right. Content like a list can be shown without a bubble by using `variant="plain"`.


```tsx
render(<div style={chatStyle}>
        <Conversation style={{
    flex: '1 1 auto'
  }}>
          <Message from="user" name="You" timestamp="15:23" avatar={<Avatar hasLabel>P</Avatar>}>
            Hi, I need the payment confirmation for a transfer I made from
            my salary account 12.02
          </Message>

          <Message name="Aino" timestamp="15:24" avatar={<Avatar variant="secondary" hasLabel>
                A
              </Avatar>}>
            Hi, it seems you made 2 transfers 12.02. I have provided both
            for you below. Just click the correct one and you will be able
            to get to the payment confirmation.
          </Message>

          <Message variant="plain">
            <List.Container>
              <List.Item.Action icon={transfer}>
                <List.Cell.Title>
                  <List.Cell.Title.Overline>
                    (xxxx.xx.xxxxx)
                  </List.Cell.Title.Overline>
                  Intro Aksel
                </List.Cell.Title>
                <List.Cell.End>
                  <NumberFormat.Currency value={-888888} />
                </List.Cell.End>
              </List.Item.Action>
              <List.Item.Action icon={pay_from}>
                <List.Cell.Title>
                  <List.Cell.Title.Overline>
                    (xxxx.xx.xxxxx)
                  </List.Cell.Title.Overline>
                  Kim Olsen
                </List.Cell.Title>
                <List.Cell.End>
                  <NumberFormat.Currency value={-888888} />
                </List.Cell.End>
              </List.Item.Action>
            </List.Container>
          </Message>
        </Conversation>

        <PromptInput characterCounter={111} />
      </div>)
```