Tool Call Card

Agent tool call card showing the tool name, argument preview, duration and a running, done or failed status chip, with collapsible monospace output below.

src/registry/ui/tool-call-card.tsx/r/tool-call-card.json

Installation#

bash

npx shadcn@latest add @minidev/tool-call-card

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/tool-call-card.json

Usage#

tsx

import { ToolCallCard } from "@/components/ui/tool-call-card"

export function Example() {
  return (
    <ToolCallCard name="read_file" status="done">
      DESIGN.md § Geometry
    </ToolCallCard>
  )
}

API reference#

ToolCallCard props
Prop	Type	Default
`name*`	`string`	`-`
`status`	`"running" \| "done" \| "error"`	`"done"`
`args`	`string`	`-`
`duration`	`string`	`-`
`children`	`React.ReactNode`	`-`
`defaultOpen`	`boolean`	`true`
`className`	`string`	`-`

* required

Dependencies#

npm

lucide-react

Built from

No other MiniDev files

Examples#

AIChat, prompts, streaming New in 0.2Interactive chart, toasts, agent runs, inbox

Agent TraceReact timeline of an AI agent run: each tool step shows pending, running, done or error, reports its duration and folds out details. The header sums up the run.Ai ComposerChat input for AI apps with a multiline textarea, Enter to send, suggestion chips, attach button, model picker and a stop button while a response streams.Artifact PreviewFramed preview for AI generated artifacts such as code, documents or UI, with a title bar, copy button and optional expand action for a full view.Attachment ChipCompact Tailwind file chip with a paperclip icon, truncated filename and an optional remove button, for attachments in chat composers, emails and forms.Chat ThreadScrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.Citation ChipInline citation button for AI answers, with an accent source number and label. Link it to a source panel or popover so users can check references.

All AI chat UI components for React

Learn more

AI chat UI in React: streaming messages, tool calls and reasoningGuide