Ai.Task#

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

Import#

import { Task } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(<Task title="Looking up your transactions" />)

Description#

Ai.Task shows work in progress and its outcome, such as looking up transactions or generating a report. It shows a progress indicator while the task runs and a status when it completes, fails or is canceled. Use children for details, controls or a larger result.

Pass a human-readable title and a display status: running, awaiting, done, error or canceled. Your application owns the task and maps its state to these values. An AI framework tool call can be one source of that state.

Use children for a useful result, such as a balance or a confirmation, and errorText for a user-facing error. The component does not execute work or make requests. For actions requiring confirmation, show status="awaiting", render your confirmation controls as children, and pass the user's decision to your chat implementation.

Task and Ai.AgentAction both show an operation and its outcome. Choose Task for a status row with details, decision controls or structured results below it. Choose AgentAction for progress followed by a short text result and optional Undo. The choice does not depend on whether the application uses an agent or a framework tool. See Choosing Task or AgentAction for a comparison and examples.

Ai.Task does not create a live region. Your application owns announcements when status or results change. Use AriaLive for meaningful updates, and avoid duplicating announcements from the surrounding conversation. See screen reader announcements.

Demos#

Task states#

<Task title="Looking up your transactions" status="running" />
<Task top title="Blocking your card" status="awaiting" />
<Task top title="Looking up your transactions" status="done">
  <P space={0}>Your latest transactions are ready.</P>
</Task>
<Task
  top
  title="Blocking your card"
  status="error"
  errorText="The card could not be blocked. Try again later."
/>
<Task top title="Blocking your card" status="canceled" />