Agent Media Card – Code

Implementation
AgentMediaCard Props
MediaAttachment

Common Examples

Pass one MediaAttachment through media. Documents render a compact metadata row; images, video, and audio render their preview or player when showPreview is true.

<AgentMediaCard
  media={{
    kind: "document",
    fileName: "Quarterly report.pdf",
    fileTypeLabel: "PDF",
    href: reportUrl,
  }}
/>

Set showPreview={false} to collapse every kind to the document-row treatment. The open-file action calls onDownload when provided; otherwise it opens media.href in a new tab.

Internationalization

AgentMediaCard owns ai-kit.agentMediaCard.download. Media playback uses the ai-kit.mediaAttachment.* messages. Localize fileName, fileTypeLabel, and error before passing them.

React Accessibility

Image previews use alt, falling back to fileName.
Video and audio expose localized media controls.
The open-file action renders only when onDownload or media.href exists.

`AgentMediaCard` Props

The AgentMediaCard accepts the following props and forwards remaining <div> attributes except children and style.

MediaAttachment

required

Image, video, audio, or document attachment.

string

Class merged onto the root element.

string

Failure copy below the card. Omit or pass empty to hide it.

() => void | Promise<void>

Open-file handler. When omitted, the action opens media.href.

boolean

default:"true"

Shows rich image, video, and audio treatments.

3 | 4 | 5 | 6

default:"4"

Semantic heading level for the file name.

`MediaAttachment`

All variants require kind, fileName, and localized fileTypeLabel. href is optional. Image, video, and audio variants also require src. Images accept alt; videos accept poster and aspectRatio.

AI Kit

Agent Experience

Agent Media Card – Code

Common Examples

Internationalization

React Accessibility

`AgentMediaCard` Props

`MediaAttachment`

​Common Examples

​Internationalization

​React Accessibility

​AgentMediaCard Props

​MediaAttachment

Common Examples

Internationalization

React Accessibility

`AgentMediaCard` Props

`MediaAttachment`