Tool

kai-tool

Takes its badge colour from the call’s state, so a running call reads at a glance.

• Shadow DOM
• 4 states
• Collapsible inspector
• Colour-coded badge
• Property-driven API

Preview

When to use

Inside an assistant message row, one element per tool call, below the text. For the plan behind the calls, use Chain of thought.

Usage

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

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

<script type="module">
  import '@kitn.ai/ui/web-components';

  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

Code

Running Call

Amber badge — input sent, awaiting response.

Code

Error State

Code

Input Streaming

Blue badge while the agent assembles arguments.

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
tool	ToolPart	—	The tool-call to display. Set as a JS property.
open	boolean	—	Drive/observe the open state: `el.open = true` or the bare `open` attribute. Listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
disabled	boolean	—	Gate the disclosure trigger: programmatic `show()/hide()/toggle()` still work, but the trigger click no longer toggles.

Methods

Method	Signature	Notes
show	(): void	Open it programmatically (no-op while disabled).
hide	(): void	Close it programmatically.
toggle	(): void	Flip the open state (closes while disabled).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Tool

---

Need a hand? Report a bug Ask for help