Agent Card

One agent’s definition as a card: the model behind it, the tools it may reach for, and whether it is allowed to run. Tools are listed by name rather than counted, because a count tells you nothing about blast radius.

src/components/ui/agent-card.tsx

About

From the component's own source, where it was written.

One agent's definition, as a card in a roster.

The unit an agent-building UI is organised around: a name, the model behind it, the tools it may reach for, and whether it is currently allowed to run. Everything a reviewer needs to answer "what is this thing permitted to do" without opening it.

Tools are listed by name rather than counted. "6 tools" tells you nothing about blast radius; delete_customer in that list tells you everything, and it is the name that makes someone look twice. The overflow chip only appears past maxTools, so short rosters stay complete.

status is separate from enabled on purpose. An agent can be switched on and still be failing, and collapsing the two hides exactly the case worth seeing.

Install

npx astralyx-ui add agent-card

Usage

import { AgentCard } from '@/components/ui/agent-card'

<AgentCard
  name="Billing operator"
  model="claude-sonnet-5"
  tools={['get_invoice', 'issue_refund']}
  temperature={0}
  status="running"
  enabled={enabled}
  onToggle={setEnabled}
/>

Composer

Change the props and the source below follows.

Support triage

Running

Reads an incoming ticket, answers it or routes it on.

claude-opus-50.23

search_docsget_customercreate_ticket

Enabled

Billing operator

Failing

Handles refunds and plan changes, inside a spend cap.

claude-sonnet-50.05

get_invoiceissue_refundchange_plandelete_customer+1

Enabled

Props

with switch

tsx

<AgentCard
  name="Billing operator"
  model="claude-sonnet-5"
  tools={tools}
  status="running"
  enabled={enabled}
  onToggle={setEnabled}
/>

Examples

A roster

tsx

<AgentCard name="Support triage" model="claude-opus-5" tools={tools} status="running" />

Read-only

tsx

<AgentCard name="Support triage" model="claude-opus-5" tools={tools} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`AgentCard`

One agent's definition, as a card in a roster.

Extends Omit<ComponentProps<'div'>, 'onToggle' | 'onSelect'>.

Prop	Type	Default	Description
name	string	required	The model id is shown verbatim — an agent’s behaviour is tied to the exact one, not to a family.
description	ReactNode	—	The model id is shown verbatim — an agent’s behaviour is tied to the exact one, not to a family.
model	string	—	The model id is shown verbatim — an agent’s behaviour is tied to the exact one, not to a family.
tools	string[]	[]	Listed by name. `delete_customer` in that list is what makes someone look twice; “6 tools” is not.
maxTools	number	4	Listed by name. `delete_customer` in that list is what makes someone look twice; “6 tools” is not.
temperature	number	—	—
status	AgentStatus	'idle'	Kept separate from `enabled`: an agent can be switched on and still be failing, and folding the two hides that case.
statusLabels	Partial<Record<AgentStatus, string>>	—	Every string is a prop.
enabled	boolean	—	Renders the switch. Omit `enabled` entirely for a read-only card.
onToggle	(enabled: boolean) => void	—	Renders the switch. Omit `enabled` entirely for a read-only card.
toggleLabel	string	'Enabled'	Every string is a prop.
actions	ReactNode	—	Trailing slot and the leading glyph — a menu, a Run button, an avatar.
icon	ReactNode	—	Trailing slot and the leading glyph — a menu, a Run button, an avatar.
selected	boolean	false	For a roster that drives a detail panel. The switch stops propagation, so toggling does not also select.
onSelect	() => void	—	For a roster that drives a detail panel. The switch stops propagation, so toggling does not also select.
toolsEmptyLabel	string	'No tools'	—

Types

Type	Definition	Description
`AgentStatus`	'idle' \| 'running' \| 'error' \| 'draft'	—