AI Tool Call Display
Carte structuree pour les traces d'invocation d'outils, les statuts, l'entree serialisee et la sortie retournee. Installez AI Tool Call Display depuis le registre VLLNT UI avec la CLI shadcn.
Quand utiliser ceci dans une application IA
Use AI Tool Call Display whenever an agent invokes tools or functions. It surfaces the call name, arguments, status, and result so users can follow exactly what the agent did.
Parcourir tous les composants pour agents IACarte structuree pour les traces d'invocation d'outils, les statuts, l'entree serialisee et la sortie retournee. Fait partie de la famille ai dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez AI Tool Call Display a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-tool-call-display.jsonSource
import { cva } from "class-variance-authority";
import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
import { cn } from "../../lib/utils";
import { Badge } from "../badge/badge";
const statusVariants = cva(
"rounded-full px-2 py-0 text-[10px] uppercase tracking-wide",
{
defaultVariants: {
status: "queued",
},
variants: {
status: {
complete: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
error: "bg-red-500/10 text-red-700 dark:text-red-300",
queued: "bg-muted text-muted-foreground",
running: "bg-blue-500/10 text-blue-700 dark:text-blue-300",
},
},
},
);
export type AIToolCallStatus = "complete" | "error" | "queued" | "running";
export type AIToolCallDisplayProps = React.ComponentPropsWithoutRef<"div"> & {
/** Short description of the tool output. */
description?: string;
/** Optional execution duration label. */
duration?: string;
/** Serialized tool arguments or input payload. */
input?: string;
/** Serialized tool result or output payload. */
output?: string;
/** Current tool execution state. */
status?: AIToolCallStatus;
/** Name of the tool. */
toolName: string;
};
const statusIconMap: Record<AIToolCallStatus, React.ReactNode> = {
complete: <CheckCircle2 className="size-4" />,
error: <AlertCircle className="size-4" />,
queued: <Clock3 className="size-4" />,
running: <Wrench className="size-4 animate-pulse" />,
};
const AIToolCallDisplay = ({
className,
description,
duration,
input,
output,
ref,
status = "queued",
toolName,
...props
}: AIToolCallDisplayProps & { ref?: React.Ref<HTMLDivElement> }) => {
return (
<div
className={cn(
"rounded-2xl border border-border/70 bg-card p-4 shadow-sm",
className,
)}
ref={ref}
{...props}
>
<div className="flex flex-wrap items-start justify-between gap-3">
<div className="min-w-0 space-y-1">
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
{statusIconMap[status]}
<span>{toolName}</span>
</div>
{description ? (
<p className="text-sm text-muted-foreground">{description}</p>
) : null}
</div>
<div className="flex items-center gap-2">
{duration ? (
<span className="text-xs text-muted-foreground">{duration}</span>
) : null}
<Badge className={statusVariants({ status })} variant="secondary">
{status}
</Badge>
</div>
</div>
{input ? (
<details
className="mt-4 rounded-xl border border-border/60 bg-muted/20 p-3"
open={status !== "complete"}
>
<summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
Tool input
</summary>
<pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
{input}
</pre>
</details>
) : null}
{output ? (
<details
className="mt-3 rounded-xl border border-border/60 bg-muted/20 p-3"
open={status !== "complete"}
>
<summary className="cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground">
Tool output
</summary>
<pre className="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground">
{output}
</pre>
</details>
) : null}
</div>
);
};
AIToolCallDisplay.displayName = "AIToolCallDisplay";
export { AIToolCallDisplay };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.