Tool

kai-tool

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.

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

Preview

When to use

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.

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

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

  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
tool	ToolPart	—	The tool-call to display. Set as a JS property.
open	boolean	false	Start expanded.

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