import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as AgentAvatarStories from './AgentAvatar.stories';
<Meta of={AgentAvatarStories} name='Usage' />
<Title />
## Purpose
Identifies an AI agent as the one who did something or is responsible for it. It is a purpose-built component so people can tell an agent from a person at a glance.
## Usage
Use it wherever a person's avatar would show up and an agent can be the actor: activity logs, comment threads and chat messages, deploy and commit histories, and assignee or owner lists.
Put it next to the agent's name, as with a human avatar. The avatar says "an agent did this"; the name says which one.
- Use `zappy` (the default) for Pantheon agents and `sparklesSolid` for other (third-party) agents.
- Keep the halo (`hasHalo`, on by default) so the agent signal is also carried by the ring, not only by the icon.
- Do not use it for people or workspaces. Use `Avatar` for those.
## Implementation
See the table below for the available props. The other stories show every variant and state.
<hr />
<Canvas of={AgentAvatarStories.Default} />
<Controls of={AgentAvatarStories.Default} />
Agent avatar
Start from the PDS v2 Avatar (src/components/identity/Avatar, branch v2.x), renamed AgentAvatar (class pds-agent-avatar).
Net-new componentOpen in Storybook