# Tool
Source: https://ui.spencerwueste.com/docs/components/tool
Markdown: https://ui.spencerwueste.com/llm/components/tool.md

> Tool call card with a status badge and collapsible input and output payloads.

> Live preview: https://ui.spencerwueste.com/docs/components/tool (demo source: `src/demos/tool-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/tool.json
```

Manual install dependencies: `shiki @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/tool.json

## Usage

```tsx
import {
  Tool,
  ToolContent,
  ToolInput,
  ToolOutput,
  ToolTrigger,
} from "@/components/pandacoderz-ui/tool";
```

```tsx
<Tool status="completed">
  <ToolTrigger name="web_search" />
  <ToolContent>
    <ToolInput payload={{ query: "astro islands" }} />
    <ToolOutput payload={result} />
  </ToolContent>
</Tool>
```

Payloads are stringified as JSON and highlighted with Shiki on the client.

## API Reference

### Tool

| Prop | Type | Description |
| --- | --- | --- |
| `status` | `"pending" \| "ready" \| "running" \| "completed" \| "error"` | Drives the icon, badge, and colors. |
| `defaultOpen` | `boolean` | Initial expanded state. |

### ToolTrigger

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `string` | Tool name shown in the header. |

### ToolOutput

| Prop | Type | Description |
| --- | --- | --- |
| `payload` | `unknown` | Output to display. |
| `showWhen` | `ToolStatus[]` | Statuses that render output. Default `["completed"]`. |
| `errorText` | `string` | Message shown when status is `error`. |