Agent Card

Display agent information, capabilities, and status with an interactive card component designed for AI agent interfaces.

Examples

Idle

An AI agent specialized in gathering and analyzing information

This example demonstrates an agent card with status changes, capabilities, and action buttons.

Idle

A versatile AI agent that can help with research, analysis, and conversation

Research

Can search and analyze information from various sources

Analysis

Performs deep analysis and provides insights

Chat

Engages in natural conversations

Prop	Type	Default	Description
`name`	`string`	-	The name of the agent
`description`	`string`	-	A brief description of the agent
`avatar`	`string`	-	URL for the agent's avatar image
`status`	`"idle" \| "thinking" \| "running" \| "paused" \| "error" \| "completed"`	`"idle"`	The current status of the agent
`capabilities`	`AgentCapability[]`	`[]`	List of agent capabilities
`className`	`string`	-	Additional CSS classes
`onAction`	`(action: string) => void`	-	Callback when action buttons are clicked

Prop	Type	Description
`name`	`string`	The name of the capability
`description`	`string`	A description of what the capability does
`icon`	`React.ReactNode`	Optional icon for the capability