Tool

Visualization for an agent tool-call. Four states (input-streaming, input-available, output-available, output-error), expandable body with the input args, output, error, and call ID.

Examples

Output available (success)

Most common steady state — the tool returned a result.

Input

city: Zurich

units: metric

Output

{
  "temp_c": 11.4,
  "condition": "Partly cloudy",
  "humidity": 78
}

Call ID: call_8c1e9a4f

<pk-tool [toolPart]="{
  type: 'fetch_weather',
  state: 'output-available',
  input: { city: 'Zurich', units: 'metric' },
  output: { temp_c: 11.4, condition: 'Partly cloudy', humidity: 78 },
  toolCallId: 'call_8c1e9a4f',
}" [defaultOpen]="true" />

Input streaming

The model is still composing the tool's arguments. Spinner icon, blue badge.

Input

query: angular signals best p

Processing tool call...

Call ID: call_2db77ed1

<pk-tool [toolPart]="{
  type: 'web_search',
  state: 'input-streaming',
  input: { query: 'angular signals best p' },
}" />

Input ready, awaiting execution

Args parsed, tool not yet invoked. Orange 'Ready' badge.

Input

path: ./src/app

recursive: true

Call ID: call_44a812bc

<pk-tool [toolPart]="{
  type: 'list_files',
  state: 'input-available',
  input: { path: './src/app', recursive: true },
}" />

Output error

Tool returned an error. Red badge plus a dedicated Error section in the body.

Input

to: invalid@@example

subject: Hello

Error

SMTP rejected: 550 5.1.1 Recipient address invalid.

Call ID: call_e0987c44

<pk-tool [toolPart]="{
  type: 'send_email',
  state: 'output-error',
  input: { to: 'invalid@@example', subject: 'Hello' },
  errorText: 'SMTP rejected: 550 5.1.1 Recipient address invalid.',
}" [defaultOpen]="true" />

Installation

Add the tool component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:tool

Component API

PkTool

Prop	Type	Default	Description
toolPart	`ToolPart`	—	Required. { type, state, input?, output?, toolCallId?, errorText? }
defaultOpen	`boolean`	false	Initial expanded state.
class	`string`	—	Extra classes for the wrapper.

ToolPart

Prop	Type	Default	Description
type	`string`	—	Tool name (e.g. "fetch_weather").
state	`ToolState`	—	"input-streaming" \| "input-available" \| "output-available" \| "output-error"
input	`Record<string, unknown>`	—	Arguments. Pretty-printed in the Input section when present.
output	`Record<string, unknown>`	—	Result. JSON-stringified in the Output section.
errorText	`string`	—	Error message (only shown for state=output-error).
toolCallId	`string`	—	Call ID, displayed at the bottom in monospace.