Skip to content

The tool_call segment — a human-in-the-loop tool call UI

Tool call segment - rendered while waiting for a tool handler to resolve

A segment is data, not an element — it has no tag and dispatches nothing. This one is AparteToolCallSegment, and it is the object you push into a bubble; something else draws it.

Width Open in a tab
Core's own renderer, drawing the example printed below inside a real viewport. A segment is data — this is what the library makes of it, and it looks the same in every framework.
{
id: 's1',
type: 'tool_call',
status: 'resolved',
toolCall: { id: 'call_1', name: 'get_weather', input: { city: 'Lille' } },
result: '11°C, overcast.',
}

Discriminated by type: 'tool_call'.

FieldTypeRequiredDescription
toolCallimport('./tools.js').AparteToolCallyes
status'pending' | 'resolved' | 'aborted' | 'awaiting-approval' | 'rejected' | 'failed'yesawaiting-approval — paused for a human decision; rejected — the human (or a policy) declined to run it; aborted — stopped, timed out, or nothing could run it; failed — the handler threw, and result carries the crash’s one line. More
resultstring
structuredResultunknownThe handler’s structuredContent, when it returned one — the value behind result’s prose.

From AparteSegmentBase, which is also what a segment type of your own extends.

FieldTypeRequiredDescription
idstringyesUnique segment identifier
typestringyesSegment type discriminator
isStreamingbooleanWhether segment is currently being streamed
messageIdstringId of the message this segment belongs to. Stamped on insertion.
indexnumberPosition in the owning message’s segments[], maintained across insertions and removals.
metaRecord<string, unknown> & { aparte?: AparteSegmentTiming }Extras the producer of the segment knows — token counts, cost, compute device — plus aparte, the one sub-object core writes. More

awaiting-approval — paused for a human decision; rejected — the human (or a policy) declined to run it; aborted — stopped, timed out, or nothing could run it; failed — the handler threw, and result carries the crash’s one line.

Extras the producer of the segment knows — token counts, cost, compute device — plus aparte, the one sub-object core writes.

Everything except meta.aparte is yours: fill it with updateSegment(segmentId, { meta }), which MERGES rather than replaces. Mirrors AparteMessage.metadata.

An app pushes one with addSegment() on the viewport, or a parser produces it while a reply streams. Core stamps its identity and timing on insert, so an emitted segment does not have to carry them.

A built-in renderer draws this one, from packages/core/src/renderers/segments/tool-call.ts. It installs itself the first time a segment of this type needs it, so a chat renders it with no setup.

Replace it with your own for this config only:

import { registerSegmentRenderer } from '@aparte/core';
import type { AparteToolCallSegment } from '@aparte/core';
registerSegmentRenderer({
type: 'tool_call',
render: (segment: AparteToolCallSegment) => {
const el = document.createElement('div');
el.textContent = JSON.stringify(segment);
return el;
},
});

See Customization for the whole renderer seam, and bring your own loop for emitting segments yourself.