bunx shadcn@latest add @elements/agent-roster

import {
  AgentRoster,
  AgentRosterHeader,
  AgentRosterContent,
  AgentCard,
} from "@/components/elements/ai-elements/multi-agent/agent-roster";

const agents = [
  {
    id: "1",
    name: "Research Agent",
    description: "Searches and analyzes information from multiple sources",
    status: "active",
    model: "gpt-4o",
    matchOn: ["search", "analyze", "research"],
  },
  {
    id: "2",
    name: "Code Agent",
    description: "Writes, reviews, and debugs code",
    status: "idle",
    model: "claude-3",
    matchOn: ["code", "debug", "review"],
  },
  {
    id: "3",
    name: "Writer Agent",
    description: "Creates and edits written content",
    status: "busy",
    model: "gpt-4o",
    matchOn: ["write", "edit", "compose"],
  },
];

export function AgentRosterExample() {
  return (
    <AgentRoster
      agents={agents}
      activeAgentId="1"
      onSelect={(id) => console.log("Selected:", id)}
      layout="grid"
    >
      <AgentRosterHeader>Available Agents</AgentRosterHeader>
      <AgentRosterContent />
    </AgentRoster>
  );
}

interface RosterAgent {
  id: string;
  name: string;
  description?: string;
  matchOn?: string[];
  status: "active" | "idle" | "busy" | "offline";
  icon?: React.ReactNode;
  model?: string;
}