Agent avatar

Free · MIT

An agent's mark: its role glyph on a tile tinted with the role's hue.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/agent-avatar

Brings in: chat, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { AgentBadge, AgentRolesProvider } from "@/components/agent-avatar"
import { Rocket } from "lucide-react"

export default function Example() {
  return (
    <div className="flex flex-col gap-3">
      <AgentBadge agent={{ id: "a", name: "Support agent", role: "assistant" }} />
      <AgentBadge agent={{ id: "b", name: "Research agent", role: "researcher" }} />
      <AgentBadge agent={{ id: "c", name: "Code reviewer", role: "reviewer" }} />
      <AgentRolesProvider roles={{ launcher: { Icon: Rocket, noun: "Launcher", hue: "var(--chart-4)" } }}>
        <AgentBadge agent={{ id: "d", name: "Release agent", role: "launcher" }} />
      </AgentRolesProvider>
    </div>
  )
}

<AgentAvatar>

Prop	Type	Default	Description
agentrequired	`AgentIdentity`	—	Who the agent is: id, display name and role.
size	`"sm" \| "md" \| undefined`	"md"	md for message headers, sm for lists and chips.
className	`string \| undefined`	—	Extra classes for the outer element.

<AgentBadge>

Avatar plus name, with the role spelled out for screen readers.

Prop	Type	Default	Description
agentrequired	`AgentIdentity`	—	Who the agent is: id, display name and role.
size	`"sm" \| "md" \| undefined`	"md"	md for message headers, sm for lists and chips.
className	`string \| undefined`	—	Extra classes for the outer element.

<AgentRolesProvider>

The app's agent roles; nested providers add to (and can override) the ones above.

Prop	Type	Default	Description
rolesrequired	`Record<string, AgentRoleInfo>`	—	Role ids mapped to an icon, a noun and a hue.
childrenrequired	`React.ReactNode`	—	What goes inside.

Functions

useAgentRoles()

Look up a role's glyph, noun and hue; unknown roles read as "Assistant".

Strings

The fixed words, in English by default. Change any of them under agentAvatar in <LocaleProvider strings={{ … }}>; the table is exported as agentAvatarStrings.

Key	English
assistant	Assistant
orchestrator	Orchestrator
planner	Planner
researcher	Researcher
analyst	Analyst
designer	Designer
coder	Coder
reviewer	Reviewer
tester	Tester
roleAgent	, {noun} agent

Types

AgentRoleInfo: { Icon: LucideIcon; noun: string; hue: string }