AI & Agents
Agent Avatar
Who is talking in a multi-agent chat: tint colour, name and role.
Usage
PLPlannerBreaks the task into steps
Installation
npm install @wunderui/reactThen import what you need:
import { AgentAvatar } from "@wunderui/react"Examples
Planner
Indigo.
PLPlannerBreaks the task into steps
Writer
Green.
WRWriterDrafts copy and docs
Reviewer
Orange.
RVReviewerChecks the result
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Multi-agent conversation
Each answer says which agent wrote it, and a divider marks where the Planner hands over to the Writer.
I'm redesigning the payment step of our checkout. What should the microcopy say when a saved card is pre-selected?
Keep the copy short and reassuring, and make the saved card the default path: “Pay with Visa •••• 4242” on the button, “Change card” as a quiet link, and “Saved on Sep 12 · expires 08/28” as the helper.
Can you give me the exact button and helper strings as a small table I can paste into Figma?
Planner handed off to Writer
WRWriterDrafts copy and docsButton: Pay $128.40 with Visa •••• 4242 · Change link: Change card · Helper: Saved Sep 12 · expires 08/28
API Reference
| Prop | Type | Default |
|---|---|---|
| name / role | ReactNode | — |
| initials | string | — |
| color | AvatarColor | "indigo" |