{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent",
  "title": "Agent",
  "description": "AI Elements agent/tool roster with a strict-TS fit: a Tool `description` can be a function, which is not a ReactNode, so it is narrowed before render.",
  "dependencies": [
    "ai",
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "badge",
    "@mastra-chat-kit/code-block"
  ],
  "files": [
    {
      "path": "components/ai-elements/agent.tsx",
      "content": "\"use client\";\r\n\r\nimport {\r\n  Accordion,\r\n  AccordionContent,\r\n  AccordionItem,\r\n  AccordionTrigger,\r\n} from \"@/components/ui/accordion\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport type { Tool } from \"ai\";\r\nimport { BotIcon } from \"lucide-react\";\r\nimport type { ComponentProps } from \"react\";\r\nimport { memo } from \"react\";\r\n\r\nimport { CodeBlock } from \"./code-block\";\r\n\r\nexport type AgentProps = ComponentProps<\"div\">;\r\n\r\nexport const Agent = memo(({ className, ...props }: AgentProps) => (\r\n  <div\r\n    className={cn(\"not-prose w-full rounded-md border\", className)}\r\n    {...props}\r\n  />\r\n));\r\n\r\nexport type AgentHeaderProps = ComponentProps<\"div\"> & {\r\n  name: string;\r\n  model?: string;\r\n};\r\n\r\nexport const AgentHeader = memo(\r\n  ({ className, name, model, ...props }: AgentHeaderProps) => (\r\n    <div\r\n      className={cn(\r\n        \"flex w-full items-center justify-between gap-4 p-3\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className=\"flex items-center gap-2\">\r\n        <BotIcon className=\"size-4 text-muted-foreground\" />\r\n        <span className=\"font-medium text-sm\">{name}</span>\r\n        {model && (\r\n          <Badge className=\"font-mono text-xs\" variant=\"secondary\">\r\n            {model}\r\n          </Badge>\r\n        )}\r\n      </div>\r\n    </div>\r\n  )\r\n);\r\n\r\nexport type AgentContentProps = ComponentProps<\"div\">;\r\n\r\nexport const AgentContent = memo(\r\n  ({ className, ...props }: AgentContentProps) => (\r\n    <div className={cn(\"space-y-4 p-4 pt-0\", className)} {...props} />\r\n  )\r\n);\r\n\r\nexport type AgentInstructionsProps = ComponentProps<\"div\"> & {\r\n  children: string;\r\n};\r\n\r\nexport const AgentInstructions = memo(\r\n  ({ className, children, ...props }: AgentInstructionsProps) => (\r\n    <div className={cn(\"space-y-2\", className)} {...props}>\r\n      <span className=\"font-medium text-muted-foreground text-sm\">\r\n        Instructions\r\n      </span>\r\n      <div className=\"rounded-md bg-muted/50 p-3 text-muted-foreground text-sm\">\r\n        <p>{children}</p>\r\n      </div>\r\n    </div>\r\n  )\r\n);\r\n\r\nexport type AgentToolsProps = ComponentProps<typeof Accordion>;\r\n\r\nexport const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (\r\n  <div className={cn(\"space-y-2\", className)}>\r\n    <span className=\"font-medium text-muted-foreground text-sm\">Tools</span>\r\n    <Accordion className=\"rounded-md border\" {...props} />\r\n  </div>\r\n));\r\n\r\nexport type AgentToolProps = ComponentProps<typeof AccordionItem> & {\r\n  tool: Tool;\r\n};\r\n\r\nexport const AgentTool = memo(\r\n  ({ className, tool, value, ...props }: AgentToolProps) => {\r\n    const schema =\r\n      \"jsonSchema\" in tool && tool.jsonSchema\r\n        ? tool.jsonSchema\r\n        : tool.inputSchema;\r\n\r\n    return (\r\n      <AccordionItem\r\n        className={cn(\"border-b last:border-b-0\", className)}\r\n        value={value}\r\n        {...props}\r\n      >\r\n        <AccordionTrigger className=\"px-3 py-2 text-sm hover:no-underline\">\r\n          {typeof tool.description === \"string\" ? tool.description : \"No description\"}\r\n        </AccordionTrigger>\r\n        <AccordionContent className=\"px-3 pb-3\">\r\n          <div className=\"rounded-md bg-muted/50\">\r\n            <CodeBlock code={JSON.stringify(schema, null, 2)} language=\"json\" />\r\n          </div>\r\n        </AccordionContent>\r\n      </AccordionItem>\r\n    );\r\n  }\r\n);\r\n\r\nexport type AgentOutputProps = ComponentProps<\"div\"> & {\r\n  schema: string;\r\n};\r\n\r\nexport const AgentOutput = memo(\r\n  ({ className, schema, ...props }: AgentOutputProps) => (\r\n    <div className={cn(\"space-y-2\", className)} {...props}>\r\n      <span className=\"font-medium text-muted-foreground text-sm\">\r\n        Output Schema\r\n      </span>\r\n      <div className=\"rounded-md bg-muted/50\">\r\n        <CodeBlock code={schema} language=\"typescript\" />\r\n      </div>\r\n    </div>\r\n  )\r\n);\r\n\r\nAgent.displayName = \"Agent\";\r\nAgentHeader.displayName = \"AgentHeader\";\r\nAgentContent.displayName = \"AgentContent\";\r\nAgentInstructions.displayName = \"AgentInstructions\";\r\nAgentTools.displayName = \"AgentTools\";\r\nAgentTool.displayName = \"AgentTool\";\r\nAgentOutput.displayName = \"AgentOutput\";\r\n",
      "type": "registry:component",
      "target": "components/ai-elements/agent.tsx"
    }
  ],
  "type": "registry:component"
}