Components
Agent tool-call card that stays collapsed while running and expands to its arguments and result, with success, running and error states. Respects prefers-reduced-motion.

"use client";
import Component from "@/components/ui/ai-tool-call";
export default function DemoOne() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10">
<div className="w-full max-w-lg space-y-3">
<Component
args={<code>{'{ "query": "spring physics easing" }'}</code>}
defaultOpen
name="search_web"
result={
<ul className="space-y-1">
<li>motion.dev — Spring options</li>
<li>developer.mozilla.org — easing-function</li>
<li>web.dev — Animations guide</li>
</ul>
}
status="success"
summary="3 results"
/>
<Component name="read_file" status="running" summary="src/app/page.tsx" />
<Component
name="run_tests"
result={<span>2 of 48 suites failed.</span>}
status="error"
summary="failed"
/>
</div>
</div>
);
}