Tool Call Card

One tool invocation in a chat transcript: a trigger row over collapsible sections, whose status badge follows the call's lifecycle state.

Parameters

{
  "query": "design system tokens",
  "limit": 5
}

tsx

1
2
3'use client';

import { useRef, type ReactNode } from 'react';

Installation

bash

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/tool-call-card.json

Usage

tsx

import {
  ToolCallCard,
  ToolCallCardContent,
  ToolCallCardDescription,
  ToolCallCardSection,
  ToolCallCardSectionTitle,
  ToolCallCardStatus,
  ToolCallCardTitle,
  ToolCallCardTrigger,
} from '@/components/feedback/tool-call-card';

tsx

<ToolCallCard state="output-available">
  <ToolCallCardTrigger>
    <Wrench />
    <ToolCallCardTitle>search</ToolCallCardTitle>
    <ToolCallCardDescription>3 results</ToolCallCardDescription>
    <ToolCallCardStatus>Completed</ToolCallCardStatus>
  </ToolCallCardTrigger>
  <ToolCallCardContent>
    <ToolCallCardSection>
      <ToolCallCardSectionTitle>Parameters</ToolCallCardSectionTitle>
      <CodeBlock code={JSON.stringify(input, null, 2)} language="json">
        <CodeBlockContent>
          <CodeBlockCode />
        </CodeBlockContent>
      </CodeBlock>
    </ToolCallCardSection>
  </ToolCallCardContent>
</ToolCallCard>

The host maps its own dispatcher lifecycle onto state. Use it for a tool invocation whose status the assistant reports; for a consent request the visitor must decide, use Permission Card instead.

Composition

text

ToolCallCard
|-- ToolCallCardTrigger
|   |-- ToolCallCardTitle
|   |-- ToolCallCardDescription
|   `-- ToolCallCardStatus
`-- ToolCallCardContent
    `-- ToolCallCardSection
        |-- ToolCallCardSectionTitle
        `-- CodeBlock
            |-- CodeBlockActions
            |   `-- CodeBlockCopy
            `-- CodeBlockContent
                `-- CodeBlockCode

Error state

Error

The search index did not respond within 10s.

tsx

1
2
3import type { ReactNode } from 'react';

import {

state="output-error" turns the status badge's icon into a cross; the host supplies the failure's own text inside a ToolCallCardSection.

API reference

ToolCallCard

Renders shadcn's Collapsible, as a small Card, and takes every prop Collapsible takes, plus:

Prop	Type	Default
`state`	`'input-streaming' \| 'input-available' \| 'output-available' \| 'output-error'`	required

It sets data-slot="tool-call-card" and data-state to its state.

Renders shadcn's CollapsibleTrigger, as a full-width, left-justified, link Button, and takes every prop CollapsibleTrigger takes. Appends a chevron that turns over while the sections are open, drawing the same open or closed, and plays - along with any ToolCallCardStatus icon inside it - while the trigger is hovered or focused; a caller's own pointer and focus handlers still run. It sets data-slot="tool-call-card-trigger".

ToolCallCardTitle

Renders a span and takes every prop a span takes. The tool's name, kept whole while ToolCallCardDescription beside it truncates. It sets data-slot="tool-call-card-title".

ToolCallCardDescription

Renders a span and takes every prop a span takes. A one-line summary of the call, truncated to the row. It sets data-slot="tool-call-card-description".

ToolCallCardStatus

Renders shadcn's Badge, as a span, and takes every prop a span takes. Its icon - a circle for input-streaming, a clock for input-available, a check for output-available, a cross for output-error - follows the root's state, and children are the status word. Inside a ToolCallCardTrigger its clock and check play while the trigger is hovered or focused; anywhere else they hold still. It sets data-slot="tool-call-card-status".