Agent card
Who an agent is: name, what it does, the model behind it, the tools it may call and what it is doing now.
On this page
Name, description, model, tools and status.
Installation
Usage
import { AgentCard } from "@/components/ui/chatcn/agent-card"
<AgentCard
name="Coding agent"
description="Plans and edits code in this repository."
model="claude-sonnet-4-5"
tools={["read_file", "edit_file", "run_command"]}
status="running"
/>Agents get a neutral monogram by default, so they stay distinguishable without color. Pass avatar for your own mark; chatcn ships no provider logos.
Examples
Roster
Rows for a list of agents.
Props
| Prop | Type | Notes |
|---|---|---|
name | string | Also seeds the monogram |
description | ReactNode | Clamped to three lines |
model | ReactNode | Set in mono |
tools | string[] | Chips, then +3 with the rest in a tooltip |
maxTools | number | Default 4 |
status | AgentStatus | idle, running, waiting, done, failed, offline |
avatar | ReactNode | Your own mark |
variant | "card" | "row" | Row for rosters and pickers |
actions | ReactNode | Buttons in the footer or at the row's end |
Accessibility
- The card is a group labelled by the agent's name. Model and tools are a definition list.
- The +3 button names every hidden tool, not just the count.
- Status is always a word next to its glyph.
Motion
- Only the spinner on a running agent, slowed under reduced motion.