Tool call

Shows tool input, output, and execution state in a native disclosure with a subtle 1px outline, 4px corners, and a 44px summary.

Preview

Read project briefComplete

Input

project-brief.md

Output

Scope, owners, and sources · 3 sections read

In action

Inspect a tool result

YouComplete

Find the decisions in the project brief.

AssistantComplete

The brief has three matching sections.

Search project briefComplete

Input

{
  "query": "Decisions",
  "document": "project-brief.md"
}

Output

3 matches

Scope, section 1
Owners and next steps, section 2
Supporting sources, section 3

Recorded result · No document search is performed

When to use

Use it for

Showing application-supplied tool activity within a conversation.
Queued, running, complete, or error states with optional input, output, and additional content.

Avoid

Executing a tool or granting permission; the application owns execution and authorization.
Passing raw objects or booleans as display content; serialize them or use your own renderer.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { ToolCall } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/tool-call.

Copy the source

npx @noorddev/vlak-cli add tool-call

Adds the component to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/tool-call.json

Installs the same source through the shadcn CLI.

React

import { ToolCall } from "@noorddev/vlak-react";

<ToolCall title="Search documents" state="complete" input={JSON.stringify({ query: "Renewal terms" }, null, 2)} output="Three matching documents" defaultOpen />

See the integration example to compose these components with your application's model and data.

Props

getToolCallPresentation (function)

Maps supplied tool lifecycle without inferring that ready arguments have started execution.

ToolCall

Displays supplied tool activity. The application owns execution and its state.

Prop	Type	Default	Description
`title`required	`ReactNode`		Name of the application-owned tool operation.
`state`	`ToolCallState`	`"queued"`
`statusLabel`	`string`		More precise supplied progress, for example approval or input preparation.
`input`	`ReactNode`		Strings and numbers are rendered as plain preformatted text. Format objects before passing them.
`output`	`ReactNode`
`error`	`string`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`

Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.

The ref reaches HTMLDetailsElement.

Keyboard

Keys	Does
`Tab`	Focuses the native disclosure summary and any interactive content when expanded.
`Enter, Space`	Requests expansion or collapse through the browser's native summary behavior.

Accessibility

The native details and summary expose expansion state. The summary has a 44px minimum target and visible focus outline.
The decorative 16px chevron points right when closed and down when open. Forced colors retain a system color outline and readable controls.
State is visible text in a polite status; error text has an alert role. No color is needed to distinguish states.
Strings and numbers are rendered as escaped preformatted text. Empty strings and zero are retained; React nodes remain application-rendered content.
open is authoritative when controlled; onOpenChange reports requested changes. defaultOpen sets the initial uncontrolled state. The ref reaches details and native attributes pass through.
The component displays the supplied execution state and never runs a tool itself.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<details class="rs-tool-call" open><summary class="rs-tool-call-summary"><span class="rs-tool-call-title">Search documents</span><span class="rs-tool-call-state" role="status">Complete</span><svg class="rs-tool-call-indicator" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" /></svg></summary><div class="rs-tool-call-body"><div class="rs-tool-call-section"><p class="rs-tool-call-label">Output</p><pre class="rs-tool-call-code">Three matching documents</pre></div></div></details>

Classes

.rs-tool-call.rs-tool-call-summary.rs-tool-call-title.rs-tool-call-state.rs-tool-call-indicator.rs-tool-call-body.rs-tool-call-section.rs-tool-call-label.rs-tool-call-value.rs-tool-call-code.rs-tool-call-error

Use elsewhere

Markdown reference Registry JSON Source AI integration guide