// Ported from vercel/ai-elements @ main (packages/elements/src/agent.tsx). // Customizations applied on import: import-alias rewrites, RTL physical→logical // class swap, Vercel theme-token sweep. See scripts/registry/port-ai-elements.mjs // for the deterministic transforms — re-run to re-sync against upstream. "use client"; import type { Tool } from "ai"; import { BotIcon } from "lucide-react"; import type { ComponentProps } from "react"; import { memo } from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/registry/primitives/core/accordion"; import { Badge } from "@/components/registry/primitives/core/badge"; import { cn } from "@/lib/registry/cn"; import { CodeBlock } from "./code-block"; export type AgentProps = ComponentProps<"div">; export const Agent = memo(({ className, ...props }: AgentProps) => (

)); export type AgentHeaderProps = ComponentProps<"div"> & { name: string; model?: string; }; export const AgentHeader = memo( ({ className, name, model, ...props }: AgentHeaderProps) => (

{name} {model && ( {model} )}

), ); export type AgentContentProps = ComponentProps<"div">; export const AgentContent = memo( ({ className, ...props }: AgentContentProps) => (

), ); export type AgentInstructionsProps = ComponentProps<"div"> & { children: string; }; export const AgentInstructions = memo( ({ className, children, ...props }: AgentInstructionsProps) => (

Instructions

{children}

), ); export type AgentToolsProps = ComponentProps; export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (

Tools

)); export type AgentToolProps = ComponentProps & { tool: Tool; }; export const AgentTool = memo( ({ className, tool, value, ...props }: AgentToolProps) => { const schema = "jsonSchema" in tool && tool.jsonSchema ? tool.jsonSchema : tool.inputSchema; return ( {tool.description ?? "No description"}

); }, ); export type AgentOutputProps = ComponentProps<"div"> & { schema: string; }; export const AgentOutput = memo( ({ className, schema, ...props }: AgentOutputProps) => (

Output Schema

), ); Agent.displayName = "Agent"; AgentHeader.displayName = "AgentHeader"; AgentContent.displayName = "AgentContent"; AgentInstructions.displayName = "AgentInstructions"; AgentTools.displayName = "AgentTools"; AgentTool.displayName = "AgentTool"; AgentOutput.displayName = "AgentOutput";

Agent

Showcase

Agent