Tool Steps

ngx-prompt-kit original — not part of ibelick/prompt-kit

Renders an assistant's tool trace from a { name, input, output }[] array — a chain-of-thought disclosure per step, input and output as code blocks. Pass the same array while streaming and after committing; a null output reads as 'Running …' and flips to 'Ran …' once it arrives.

Examples

Completed steps

Each step has an output, so every trigger reads 'Ran …'. Click a step to expand its input and output.

{ "query": "angular signals" }

3 results found

const total = items.reduce((a, b) => a + b, 0);
return total;

<pk-tool-steps [steps]="steps" />

// steps: PkToolStep[]
[
  { name: 'search', input: '{ "query": "angular signals" }', output: '3 results found' },
  { name: 'execute_javascript', input: 'return total;', output: '42' },
]

Streaming (a step still running)

The last step has a null output, so it reads 'Running …' and omits the output block until it arrives.

{ "query": "weather in Zurich" }

18°C, partly cloudy

{ "maxWords": 40 }

// A null output renders as "Running …" with no output block yet.
[
  { name: 'search', input: '{ "query": "weather" }', output: '18°C' },
  { name: 'summarize', input: '{ "maxWords": 40 }', output: null },
]

Installation

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

ng generate ngx-prompt-kit:tool-steps

Component API

PkToolSteps

Prop	Type	Default	Description
steps	`PkToolStep[]`	—	Required. Each: { name, input, output: string \| null }.
inputLanguage	`string`	'javascript'	Shiki language for the input code block.
outputLanguage	`string`	'text'	Shiki language for the output code block.
runningLabel	`string`	'Running'	Trigger prefix while a step is running (output is null).
ranLabel	`string`	'Ran'	Trigger prefix once a step has finished.
class	`string`	—	Extra classes for the wrapper.