> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Agent Media Card - Web

> The AgentMediaCard presents an agent-authored media attachment as a full-width card.

> [!NOTE]
>
> For development, import `AgentMediaCard` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

**Implementation**

ai-kit-agent-media-card

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-agent-media-card?file=src/App.tsx)

```tsx lines expandable theme={null}
import { AgentMediaCard } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ maxWidth: 520 }}>
      <AgentMediaCard
        media={{
          kind: "document",
          fileName: "Quarterly report.pdf",
          fileTypeLabel: "PDF",
          href: "https://example.com/report.pdf",
        }}
      />
    </div>
  );
}

export default App;
```

## 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.

```tsx theme={null}
<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**

## `AgentMediaCard` Props

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

**media** `MediaAttachment` *required*

Image, video, audio, or document attachment.

**className** `string`

Class merged onto the root element.

**error** `string`

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

**onDownload** `() =\> void | Promise\<void\>`

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

**showPreview** `boolean` (default: true)

Shows rich image, video, and audio treatments.

**titleLevel** `3 | 4 | 5 | 6` (default: 4)

Semantic heading level for the file name.

**MediaAttachment**

## `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`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.