Angular LLM Kit Tool Call
AI agents can make decisions that trigger tool invocations for querying databases, calling APIs, browsing the web, etc. Use the ToolCall component to show users what action the agent takes and what result it receives.
The ToolCall component makes the side effects from such tool invocations visible: it displays the tool name, input parameters, and output result in a collapsible block, and supports approval and error states so users can stay in control.
The following example demonstrates the ToolCall component animating through a complete execution sequence.
Configuring the Tool Header
To set the name of the tool or function, use the label property of the ToolCall component. Additional context such as a target, resource, or execution duration can be included by using the secondaryLabel property.
Set the icon or svgIcon property to identify the tool being invoked. Set statusSVGIcon separately to show the current status or outcome of that invocation, such as success or failure, in the dedicated status badge.
<kendo-toolcall
label="query_database"
secondaryLabel="analytics · db · 1.0s"
[state]="toolState"
[svgIcon]="dataSqlIcon"
[statusSVGIcon]="checkCircleIcon"
></kendo-toolcall>Controlling the State
Use the state input to show the current lifecycle stage of the tool invocation. The component supports four states:
active—The tool invocation is in progress. The component displays the tool header and any provided parameters with its in-progress presentation, but does not display a status badge. See Displaying Parameters and Results.completed—The tool invocation finished successfully. The component displays a completed badge and the result, when provided. See Displaying Parameters and Results.awaitingApproval—The tool invocation needs user confirmation. The component displays an awaiting approval badge and the default approval content, when provided, with Approve and Reject actions. See Showing Approval Actions.error—The tool invocation failed. The component displays an error badge and the error content, when provided. See Handling Errors.
<kendo-toolcall
label="query_database"
[state]="toolState"
></kendo-toolcall>Displaying Parameters and Results
Use the parameters input to show the data sent to the tool, such as a query or filter. The component displays the parameters in the expanded panel whenever you provide an object value, including while the invocation is active or awaiting approval. The ToolCall component formats the parameters as JSON by default.
Set the result input to an object value in order to show the response returned by the tool. The component displays the result when the state is completed and formats it as JSON by default.
<kendo-toolcall
label="query_database"
state="completed"
[parameters]="parameters"
[result]="result"
></kendo-toolcall>When either value needs a richer presentation, replace its default JSON block with the kendoToolCallParametersTemplate or kendoToolCallResultTemplate directive. The parameter template replaces the formatted parameters block, and the result template replaces the formatted result block.
<kendo-toolcall
state="completed"
[parameters]="parameters"
[result]="result"
>
<ng-template kendoToolCallParametersTemplate>
<p>Query: {{ parameters.query }}</p>
</ng-template>
<ng-template kendoToolCallResultTemplate>
<p>Records returned: {{ result.count }}</p>
</ng-template>
</kendo-toolcall>Showing Approval Actions
For actions that require user confirmation, set the state input to awaitingApproval. The component then displays a default approval block inside the expanded panel.
When you set the approvalText property, the block renders the defined message with Approve and Reject buttons. The provided parameters remain visible above the approval content.
When a user selects Approve or Reject, the component emits the action event. Handle this event to conditionally start the approved tool operation, cancel the rejected operation, and update the ToolCall state with the outcome.
The following example demonstrates the full approval lifecycle from pending through to an approved or a denied outcome.
For a custom approval layout, use the kendoToolCallApprovalTemplate directive to replace the default approval message block and actions with the desired custom content.
<kendo-toolcall
label="query_database"
state="awaitingApproval"
[parameters]="parameters"
>
<ng-template kendoToolCallApprovalTemplate>
<p>Review this query before it runs:</p>
<pre>{{ parameters.query }}</pre>
</ng-template>
</kendo-toolcall>Handling Errors
When the tool invocation fails, set the state input to error. The component then displays an error status badge and, when you provide errorText, a message inside a default error block in the expanded panel. The provided parameters remain visible above the error content.
The following example demonstrates the ToolCall component transitioning from active execution to an error state.
For a custom error layout, use the kendoToolCallErrorTemplate directive to replace the default errorText block with the desired rendering.
<kendo-toolcall
label="query_database"
state="error"
[parameters]="parameters"
>
<ng-template kendoToolCallErrorTemplate>
<p>The database did not respond. Retry the query or contact support.</p>
</ng-template>
</kendo-toolcall>