AI Components / Agent Card
Agent Card
Multi-agent orchestration card with avatar status dot, activity shimmer, handoff chain visualization, capability tags, and cg-button pause/cancel controls. Designed for A2UI / CrewAI / AutoGen dashboards.
ai-workflowv0.4.0
Playground
Examples
Multi-agent pipeline
<div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;"><ai-agent-card name="Planner" agent-role="Orchestrator" status="done" task="Task decomposition complete."></ai-agent-card><ai-agent-card name="Researcher" agent-role="Data Analyst" status="thinking" task="Querying vector store for Q4 revenue breakdown..."></ai-agent-card><ai-agent-card name="Coder" agent-role="Code Generator" status="acting" task="Implementing auth module with JWT refresh tokens"></ai-agent-card><ai-agent-card name="Reviewer" agent-role="QA Agent" status="idle"></ai-agent-card><ai-agent-card name="Deployer" agent-role="DevOps Agent" status="error" task="Pipeline failed: missing env variable API_KEY"></ai-agent-card></div>With handoff chain
<ai-agent-card name="Coder" role="Code Generator" status="acting" task="Implementing auth module with JWT"></ai-agent-card>Import
import { AiAgentCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-agent-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | "Agent" | Agent name |
agentRole | string | "Data Analyst" | Agent role (attribute: agent-role — role would clobber host ARIA) |
status | "idle" | "thinking" | "acting" | "done" | "error" | "thinking" | Live status (thinking/acting show shimmer + pulse) |
task | string | "Querying vector store..." | Current task (2-line clamp) |
handoffChain | string[] | — | Delegation chain with current step highlighted |
capabilities | string[] | — | Agent capability tags |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
ai-agent-pause | {name} | Pause via cg-button |
ai-agent-cancel | {name} | Cancel via cg-button |