← All proposals

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

proposals/AgentAvatar/AgentAvatar.mdx31 lines · View on GitHub
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} />