Collapsible card for one AI agent tool call: the arguments stream in, a status pill shimmers while it runs, then the result slides in. Takes a Vercel AI SDK tool part as is.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/tool-call
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { useChat } from "@ai-sdk/react";4import { ToolCall } from "@/components/nextui/tool-call";56export function Messages() {7const { messages } = useChat();89return messages.map((message) =>10message.parts.map((part, i) =>11part.type.startsWith("tool-") ? (12// Pass the AI SDK tool part as is: name, state, input and output come from it.13<ToolCall key={i} part={part as never} />14) : part.type === "text" ? (15<p key={i}>{part.text}</p>16) : null,17),18);19}2021// Or drive it yourself, without the AI SDK:22// <ToolCall name="get_weather" state="output-available" input={{ city: "Hanoi" }} output={{ tempC: 29 }} duration={840} />
| Prop | Type | Default | Description |
|---|---|---|---|
| part | ToolPartLike | – | A Vercel AI SDK tool part (type, state, input, output, errorText); fills the props below |
| name | string | "search_web" | Tool name in the header; read from part.type when you pass part |
| state | "input-streaming" | "input-available" | "output-available" | "output-error" | "output-available" | Where the call is: arguments streaming, running, done or failed |
| input | unknown | – | Arguments the model sent; objects show as formatted JSON |
| output | unknown | – | What the tool returned; objects show as JSON, elements render as they are |
| errorText | string | – | Message shown when state is output-error |
| duration | number | – | Time the call took in ms, shown as “Done · 1.2s” |
| autoPlay | boolean | false | Loop a scripted call while on screen, for demos |
| open | boolean | – | Controlled expanded state |
| defaultOpen | boolean | true | Starting expanded state when uncontrolled |
| onOpenChange | (open: boolean) => void | – | Called when the header is clicked |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.