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
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 open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages on trigger click). Set `el.open = true`, or `<kai-tool open>`; 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