Mischief

13 / Agent UI

Tool Call

A compact record of one tool invocation: name, status, duration, and the input and output behind a disclosure.

Live previewSource
search_filessearch_files queued

Input

{
  "pattern": "nullable email",
  "path": "migrations/",
  "limit": 5
}

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Search() {
  return (
    <ToolCall
      name="web_search"
      status="success"
      input={{ query: "agent ui", limit: 5 }}
      output={<p>Three matches.</p>}
      durationMs={340}
    />
  )
}

API

namestringThe tool name shown in the header.
status"pending" | "running" | "success" | "error"The current phase. Defaults to "pending".
inputunknownRendered as formatted JSON, or as-is when it is a string.
outputReactNodeWhatever the tool returned, rendered by you.
errorstringA failure message shown inside the panel.
startedAtnumberEpoch milliseconds. Drives a live duration while running.
durationMsnumberThe final duration once the call settles.
iconReactNodeReplaces the default tool icon.
open, defaultOpen, onOpenChangeboolean, boolean, (open: boolean) => voidControls the detail disclosure.

Accessibility

Status changes are announced through a polite status region naming the tool. The disclosure is a native button with aria-expanded and aria-controls, and its accessible name says which tool it belongs to. Input is rendered as plain preformatted text in a horizontally scrollable region, with no syntax highlighting and no extra dependency.

Dependencies

lucide-react