# Tool

A collapsible input/output inspector for a single agent tool call — shows the call type, state badge, and the full input and output when expanded.

<p class="kai-tag-sub">kai-tool</p>

A collapsible panel for a single agent tool call — colour-coded state badge, expandable input/output inspector. Drop one after each tool invocation to give users transparency into what the agent did.

## Preview

> **tip:** 
Place `<kai-tool>` inside an assistant message row — one element per tool call, below the text content. In SolidJS, compose the `Tool` primitive from `@kitn.ai/ui` directly; for every other framework, use this web component.

## Usage

Set the call via the `tool` property — it's an object, so assign it in JavaScript.

```html
<kai-tool id="tool" open></kai-tool>

<script type="module">

  document.getElementById('tool').tool = {
    type: 'database_query',
    state: 'output-available',
    input: { table: 'users', limit: 10 },
    output: { rows: 10, ms: 42 },
  };
</script>
```

- **`state`** drives the badge colour: `input-streaming` (blue) → `input-available` (amber) → `output-available` (green) / `output-error` (red).
- **`open`** is a boolean attribute; set it to start the panel expanded.
- The element renders nothing until `tool` is set and emits no events.

## Examples

### Completed Call

### Running Call

Amber badge — input sent, awaiting response.

### Error State

### Input Streaming

Blue badge while the agent assembles arguments.

## Props

## Methods

## Composed from