AgentChip

An agent as a small pill with its avatar, name and version, for the row of ready agents. A missing agent gets a dashed edge and can become the button that installs it.

AgentChip

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, AgentChip

Claude Code2.1Codex0.9Cursor AgentGemini CLITerminalCodexAn agent with a very long name that does not fit the row at all

Dark theme, AgentChip

Claude Code2.1Codex0.9Cursor AgentGemini CLITerminalCodexAn agent with a very long name that does not fit the row at all

High contrast theme, AgentChip

Claude Code2.1Codex0.9Cursor AgentGemini CLITerminalCodexAn agent with a very long name that does not fit the row at all

UsageLink to the section Usage

tsx

import { AgentChip } from '@skribly/ui/brand'

tsx

<AgentChip name="Codex" letters="X" detail="0.9" />
<AgentChip
  name="Aider" letters="A" available={false}
  unavailableLabel="not installed" actionLabel="Install"
  onPress={install} isPending={installing}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A missing agent is shown by a dashed edge and a download glyph, and unavailableLabel is read, so fading is never the only sign.
As a button its name is the agent, the state and actionLabel.
While pending it keeps focus, ignores presses and React Aria announces it as busy.
Long names truncate inside the chip, which never grows past its container.

This demo runs through axe in all three themes on every test run. See what the tests check.