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

# Avatar Gallery

> Browse and select from available avatar options for your personas

export const AvatarGrid = ({avatars}) => {
  const [copiedId, setCopiedId] = useState(null);
  const copyToClipboard = async (id, name) => {
    try {
      await navigator.clipboard.writeText(id);
      setCopiedId(id);
      setTimeout(() => {
        setCopiedId(null);
      }, 2000);
    } catch (err) {
      console.error("Failed to copy ID: ", err);
    }
  };
  if (!avatars || avatars.length === 0) {
    return <p className="text-center text-gray-500">No avatars to display.</p>;
  }
  return <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
      {avatars.map(avatar => <div key={avatar.id} className="card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full" onClick={() => copyToClipboard(avatar.id, avatar.name)} tabIndex={0} role="button" aria-label={`Select ${avatar.name} avatar and copy ID`} onKeyDown={e => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      copyToClipboard(avatar.id, avatar.name);
    }
  }}>
          <div className="relative">
            <img src={avatar.image || "/placeholder.svg"} alt={`${avatar.name} avatar`} className="w-full object-cover object-center not-prose" />
            <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/20 transition-colors">
              {copiedId === avatar.id ? <div className="flex items-center justify-center p-3 bg-black/60 rounded-full">
                  <Icon icon="check" size={24} color="white" />
                </div> : <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-3 bg-black/60 rounded-full">
                  <Icon icon="copy" size={20} color="white" />
                </div>}
            </div>
          </div>
          <div className="p-4 relative">
            <h2 className="not-prose font-semibold text-base text-gray-800 dark:text-white" title={avatar.name}>
              {avatar.name}
            </h2>
            <div className="prose font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
              {avatar.variant}
            </div>
          </div>
        </div>)}
    </div>;
};

## Available Avatars

Click on an avatar to copy the avatar ID.

<AvatarGrid
  avatars={[
{id: '6cc28442-cccd-42a8-b6e4-24b7210a09c5', name: 'Gabriel', variant: 'table', image: 'https://lab.anam.ai/persona_thumbnails/gabriel_table.png'},
{id: 'edf6fdcb-acab-44b8-b974-ded72665ee26', name: 'Mia', variant: 'studio', image: 'https://lab.anam.ai/persona_thumbnails/mia_studio.png'},
{id: '19d18eb0-5346-4d50-a77f-26b3723ed79d', name: 'Richard', variant: 'table', image: 'https://lab.anam.ai/persona_thumbnails/richard_table.png'},
{id: '071b0286-4cce-4808-bee2-e642f1062de3', name: 'Liv', variant: 'home', image: 'https://lab.anam.ai/persona_thumbnails/liv_home.png'},
{id: '81b70170-2e80-4e4b-a6fb-e04ac110dc4b', name: 'William', variant: 'lean', image: 'https://lab.anam.ai/persona_thumbnails/william_lean.png'},
{id: 'edcb8f1a-334f-4cdb-871c-5c513db806a7', name: 'Julia', variant: 'sofa', image: 'https://lab.anam.ai/persona_thumbnails/julia_sofa.png'},
{id: '8a339c9f-0666-46bd-ab27-e90acd0409dc', name: 'Finn', variant: 'lean', image: 'https://lab.anam.ai/persona_thumbnails/finn_lean.png'},
{id: '27e12daa-50fc-4384-93c2-ebca73f1f78d', name: 'Anne', variant: 'home', image: 'https://lab.anam.ai/persona_thumbnails/anne_home.png'},
{id: 'ecfb2ddb-80ec-4526-88a7-299a4738957c', name: 'Hunter', variant: 'table', image: 'https://lab.anam.ai/persona_thumbnails/hunter_table.png'},
{id: 'dc9aa3e1-32f2-499e-9921-ecabac1076fc', name: 'Bella', variant: 'sofa', image: 'https://lab.anam.ai/persona_thumbnails/bella_sofa.png'},
{id: 'ccf00c0e-7302-455b-ace2-057e0cf58127', name: 'Kevin', variant: 'table', image: 'https://lab.anam.ai/persona_thumbnails/kevin_table.png'},
{id: 'ae2ea8c1-db28-47e3-b6ea-493e4ed3c554', name: 'Layla', variant: 'home', image: 'https://lab.anam.ai/persona_thumbnails/layla_home.png'},
{id: '6dbc1e47-7768-403e-878a-94d7fcc3677b', name: 'Sophie', variant: 'sofa', image: 'https://lab.anam.ai/persona_thumbnails/sophie_sofa.png'},

// original avatars
{id: 'c1785d08-9825-4ead-89b3-171d3f667c47', name: 'Alister', variant: 'desk', image: 'https://lab.anam.ai/persona_thumbnails/alister_desk.png'},
{id: '5701b9ca-c474-4b28-b108-4ca81911ca16', name: 'Alister', variant: 'window sofa', image: 'https://lab.anam.ai/persona_thumbnails/alister_windowsofa.png'},
{id: 'e36f16d8-7ad1-423b-b9c9-70d49f5eaac6', name: 'Alister', variant: 'window desk', image: 'https://lab.anam.ai/persona_thumbnails/alister_windowdesk.png'},
{id: 'bdaaedfa-00f2-417a-8239-8bb89adec682', name: 'Astrid', variant: 'desk', image: 'https://lab.anam.ai/persona_thumbnails/astrid_desk.png'},
{id: 'e717a556-2d44-4213-96ec-27d0b94dc198', name: 'Astrid', variant: 'window desk', image: 'https://lab.anam.ai/persona_thumbnails/astrid_windowdesk.png'},
{id: '972e0055-4a8a-4ba5-8b77-39bc0dfb6a1c', name: 'Astrid', variant: 'window sofa corner', image: 'https://lab.anam.ai/persona_thumbnails/astrid_windowsofacorner.png'},
{id: '960f614f-ea88-47c3-9883-f02094f70874', name: 'Cara', variant: 'window sofa', image: 'https://lab.anam.ai/persona_thumbnails/cara_windowsofa.png'},
{id: '30fa96d0-26c4-4e55-94a0-517025942e18', name: 'Cara', variant: 'desk', image: 'https://lab.anam.ai/persona_thumbnails/cara_desk.png'},
{id: 'd9ebe82e-2f34-4ff6-9632-16cb73e7de08', name: 'Cara', variant: 'window desk', image: 'https://lab.anam.ai/persona_thumbnails/cara_windowdesk.png'},
{id: '195d733e-58a9-40bb-a049-ac344fa70b7f', name: 'Evelyn', variant: 'window sofa corner', image: 'https://lab.anam.ai/persona_thumbnails/evelyn_windowsofacorner.png'},
{id: '290ef1d5-9201-40f4-8c88-394a6317f10d', name: 'Evelyn', variant: 'desk', image: 'https://lab.anam.ai/persona_thumbnails/evelyn_desk.png'},
{id: 'bb4f5306-ffdb-4437-a837-da6fdc23cbff', name: 'Evelyn', variant: 'window desk', image: 'https://lab.anam.ai/persona_thumbnails/evelyn_windowdesk.png'},
{id: 'd73415e3-d624-45a6-a461-0df1580e73d6', name: 'Leo', variant: 'window desk', image: 'https://lab.anam.ai/persona_thumbnails/leo_windowdesk.png'},
{id: '121d5df1-3f3e-4a48-a237-8ff488e9eed8', name: 'Leo', variant: 'window sofa corner', image: 'https://lab.anam.ai/persona_thumbnails/leo_windowsofacorner.png'},
{id: 'aa5d6abd-416f-4dd4-a123-b5b29bf1644a', name: 'Leo', variant: 'desk', image: 'https://lab.anam.ai/persona_thumbnails/leo_desk.png'},
{id: '92b91f2a-4159-411f-b092-3e1b8663f6b9', name: 'Pablo', variant: 'window desk', image: 'https://lab.anam.ai/persona_thumbnails/pablo_windowdesk.png'},
{id: '8dd64886-ce4b-47d5-b837-619660854768', name: 'Pablo', variant: 'desk', image: 'https://lab.anam.ai/persona_thumbnails/pablo_desk.png'},
{id: '2fbdec6f-86fd-47d6-8bcc-e8a69270e75b', name: 'Pablo', variant: 'window sofa', image: 'https://lab.anam.ai/persona_thumbnails/pablo_windowsofa.png'},

]}
/>

<Note>
  Use the copied avatar ID when creating your session token. See the [Usage in
  Production](/production) guide for more information.
</Note>

## Avatar media

Fetch an avatar resource to get the media URLs for your own app:

* `imageUrl` is the still preview image used for selection screens and loading states.
* `videoUrl` is a muted idling MP4 preview, about 30 seconds long, or `null`
  if the video is still generating.

Call [GET `/v1/avatars/{id}`](/api-reference/avatars/get-avatar) from your
server to fetch fresh URLs. Never expose your API key in browser code.

```bash theme={"system"}
curl https://api.anam.ai/v1/avatars/30fa96d0-26c4-4e55-94a0-517025942e18 \
  -H "Authorization: Bearer $ANAM_API_KEY"
```

The response includes both fields:

```json theme={"system"}
{
  "id": "30fa96d0-26c4-4e55-94a0-517025942e18",
  "displayName": "Cara",
  "variantName": "desk",
  "imageUrl": "https://lab.anam.ai/persona_thumbnails/cara_desk.png",
  "videoUrl": "https://anam-prod.../idling_video.mp4?X-Amz-Signature=..."
}
```

Use the video as a lightweight preview before the live session starts:

```jsx theme={"system"}
<video
  src={avatar.videoUrl}
  autoPlay
  loop
  muted
  playsInline
  style={{ width: "100%", objectFit: "cover" }}
/>
```

When the user starts a session, replace this preview video with the live WebRTC
stream. `videoUrl` values are signed URLs that expire after 1 hour, so fetch
them when you need them. For long-lived pages, CMS content, static widget
configuration, or high-traffic selection screens, download the MP4 server-side
and serve it from your own CDN.