# Tool Call

> Queued, running, successful, and failed tool activity with input and output.

- Category: AI
- Kind: component
- Page: https://uaiblocks.dev/components/tool-call
- Registry item: https://uaiblocks.dev/r/tool-call.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/tool-call.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/tool-call.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  ToolCall,
  ToolCallContent,
  ToolCallError,
  ToolCallHeader,
  ToolCallInput,
  ToolCallName,
  ToolCallOutput,
  ToolCallStatus,
  type ToolCallStatus as ToolCallStatusValue,
  ToolCallSummary,
  ToolCallTrigger,
  type ToolCallVariant,
} from "@/components/ui/uai/tool-call";

export function ToolCallPreview({ variant = "card" }: { variant?: ToolCallVariant }) {
  const [status, setStatus] = useState<ToolCallStatusValue>("running");
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <ToolCall variant={variant} status="success" defaultOpen>
        <ToolCallHeader>
          <ToolCallTrigger>
            <ToolCallName>search_docs</ToolCallName>
            <ToolCallSummary>“refund window for annual plans”</ToolCallSummary>
          </ToolCallTrigger>
          <ToolCallStatus>0.8s</ToolCallStatus>
        </ToolCallHeader>
        <ToolCallContent>
          <ToolCallInput>{`{ "query": "refund window for annual plans", "limit": 3 }`}</ToolCallInput>
          <ToolCallOutput>{`3 results
1. Billing › Refunds — "Annual plans are refundable within 30 days."
2. Billing › Downgrades
3. Legal › Terms of service §7`}</ToolCallOutput>
        </ToolCallContent>
      </ToolCall>
      <ToolCall variant={variant} status={status}>
        <ToolCallHeader>
          <ToolCallTrigger>
            <ToolCallName>create_refund</ToolCallName>
            <ToolCallSummary>INV-20931 · $1,188.00</ToolCallSummary>
          </ToolCallTrigger>
          <ToolCallStatus />
        </ToolCallHeader>
        <ToolCallContent>
          <ToolCallInput>{`{ "invoice": "INV-20931", "amount": 118800, "currency": "usd" }`}</ToolCallInput>
          <ToolCallOutput>
            {status === "success"
              ? `{ "refund": "re_3PqL", "status": "pending" }`
              : "Waiting for Stripe…"}
          </ToolCallOutput>
          <ToolCallError>
            Stripe rejected the request: the charge was already refunded.
          </ToolCallError>
        </ToolCallContent>
      </ToolCall>
      <ToolCall variant={variant} status="queued">
        <ToolCallHeader>
          <ToolCallTrigger>
            <ToolCallName>send_email</ToolCallName>
            <ToolCallSummary>Refund confirmation to maya@northwind.co</ToolCallSummary>
          </ToolCallTrigger>
          <ToolCallStatus />
        </ToolCallHeader>
        <ToolCallContent>
          <ToolCallInput>{`{ "template": "refund_confirmation", "to": "maya@northwind.co" }`}</ToolCallInput>
        </ToolCallContent>
      </ToolCall>
      <label
        style={{
          display: "flex",
          gap: 10,
          alignItems: "center",
          marginTop: 8,
          fontSize: 12,
          color: "var(--uai-muted)",
        }}
      >
        Refund result
        <select
          value={status}
          onChange={(event) => setStatus(event.target.value as ToolCallStatusValue)}
        >
          <option value="queued">Queued</option>
          <option value="running">Running</option>
          <option value="success">Succeeded</option>
          <option value="error">Failed</option>
        </select>
      </label>
    </div>
  );
}
```

## Anatomy

- `ToolCall`
  - `ToolCallHeader`
    - `ToolCallTrigger`
      - `ToolCallName`
      - `ToolCallSummary`
    - `ToolCallStatus`
  - `ToolCallContent`
    - `ToolCallInput`
    - `ToolCallOutput`
    - `ToolCallError`

## Accessibility

- The header is a disclosure button with aria-expanded and aria-controls for the input and output panel.
- Status text sits outside the button in a polite status region, so changes are announced without renaming the control.
- Status is conveyed by text as well as icon and color; the running spinner stops under reduced motion.