React AI Tool

Function calling is a big part of modern AI apps, and this component shows what's happening under the hood. You get a collapsible card with the tool name, a status badge (streaming, running, completed, error—all the Vercel AI SDK states), and expandable sections for input parameters and output results. JSON is syntax-highlighted so you can actually read it. Huge for debugging when you're wondering "what did it send to the API?" or "why did that tool fail?" Pairs nicely with the Confirmation component when you need human-in-the-loop approval before executing.

Tool preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/tool.json

npx shadcn@latest add https://www.shadcn.io/r/tool.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/tool.json

bunx shadcn@latest add https://www.shadcn.io/r/tool.json

Related Components

FAQ