# Tool Call

> Shows what an agent did between your question and its answer.

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ToolCall/)

Shows what an agent did between your question and its answer. `ToolCall` is one tool use; `Reasoning` is the agent's plan.

ToolCall props: `name`, `icon`, `status` ("running" | "done" | "error" | "waiting"), `summary` (one line, past tense when done), `duration`, `input`, `output` (string or object, shown as JSON), `defaultOpen`.
Reasoning props: `steps` (string[]) or `text`, `duration`, `streaming` (shimmering "Thinking…"), `defaultOpen`.

- Collapsed by default: the one-line summary is what people read; details are there when they doubt it.
- Status icon colors follow the status map: mint done, sky running, butter waiting, blush error.
- Put them in ChatMessage's `before` slot, reasoning first, tools in the order they ran.

## Example

```tsx
import { Reasoning, ToolCall } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel"
      style={{
        gap: 8,
      }}
    >
      <Reasoning
        steps={[
          "Find the latest thread from Northwind",
          "Check seat pricing and the renewal date",
          "Draft a short reply, ask before sending",
        ]}
        duration="1.4 s"
        defaultOpen
      />
      <ToolCall
        name="Mailbox"
        icon="mail"
        status="done"
        summary="Read 3 messages in “Seat upgrade”"
        duration="0.8 s"
        defaultOpen
        input={{
          query: "from:ida@northwind.io",
          limit: 3,
        }}
        output={{
          messages: 3,
          latest: "We need 40 more seats before May 1.",
        }}
      />
      <ToolCall
        name="Knowledge base"
        icon="book"
        status="running"
        summary="Searching “seat upgrade pricing”"
      />
      <ToolCall
        name="Run checks"
        icon="terminal"
        status="error"
        summary="146 passed · 1 type error"
        duration="4.2 s"
        output="Seats.tsx:42  Type 'string' is not assignable to type 'number'."
      />
      <ToolCall
        name="Deployments"
        icon="zap"
        status="waiting"
        summary="Needs approval to deploy to production"
      />
      <Reasoning streaming />
    </div>
  );
}
```

## Props

### Reasoning

| Prop | Type | Notes |
| --- | --- | --- |
| `steps?` | `string[]` |  |
| `text?` | `ReactNode` |  |
| `duration?` | `string` |  |
| `streaming?` | `boolean` |  |
| `defaultOpen?` | `boolean` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### ToolCall

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `icon?` | `IconName` |  |
| `status?` | `"running" \| "done" \| "error" \| "waiting"` |  |
| `summary?` | `ReactNode` |  |
| `duration?` | `string` |  |
| `input?` | `unknown` |  |
| `output?` | `unknown` |  |
| `defaultOpen?` | `boolean` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |