Overview
Avatar
AI agent identity component with name, persona, status, and profile marker
identityagentpersona
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Primary display name for the AI agent |
persona | string | undefined | Optional role/persona subtitle displayed below or beside name |
imageUrl | string | undefined | Optional image source URL for the avatar photo |
badgeLabel | string | undefined | Optional badge text, for example AI Agent or Reviewer |
status | "online" | "idle" | "offline" | "online" | Availability/status indicator shown with the avatar |
size | "small" | "medium" | "large" | "medium" | Avatar visual size |
variant | "inline" | "compact" | "card" | "inline" | Layout style for presenting the avatar identity |
onSelect | () => void | undefined | Optional callback fired when profile action is selected |
Docs
Avatar gives the AI agent a stable visual and textual identity so users can quickly recognize who is responding. It combines a name, persona label, and status signal to reduce ambiguity in mixed human/AI interfaces. A clear avatar pattern improves trust and orientation, especially in collaborative spaces where multiple agents and people appear together.
Variants
- Inline avatar — A compact identity token shown in chat rows, prompt bars, or result headers.
- Compact profile — Name and persona with a small status marker for dense sidebars and activity feeds.
- Profile card — A richer card with role badge, status, and action link to agent details.
Use Cases
- Chat interfaces with multiple AI assistants
- Team workspaces mixing human and AI participants
- Agent marketplaces with role-based assistants
- Task panels that show which agent handled a result
- Support tools that hand off between bots and people
Best Practices
- Use a consistent name and visual identity across surfaces.
- Differentiate AI avatars from human participants without stigmatizing.
- Show current status (online/idle/offline) with simple, clear markers.
- Include persona/role labels so users know when to engage each agent.
- Pair avatar identity with disclosure patterns for explicit AI labeling.