New to Kendo UI for jQuery? Download free 30-day trial

jQuery LLM Kit Tool Call

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
meridian
Meridian Theme

Main

Main Dark
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

tool-call.html

Also available for:

Scenario:

.tool-call-demo { width: 100%; min-height: 550px; } .tool-call-demo #tool-call { margin-top: 1.5em; } kendo-toolcall pre, .k-pre { overflow: visible !important; white-space: pre-wrap !important; word-wrap: break-word !important; word-break: break-word !important; max-width: 100% !important; } kendo-toolcall code, .k-code { word-break: break-word !important; display: inline-block !important; width: 100% !important; overflow-wrap: break-word !important; font-size: var(--kendo-font-size-sm) !important; } $(function() { var parameters = { database: "analytics", query: "SELECT customer_name,\n SUM(revenue) AS total\nFROM orders\nWHERE quarter = 'Q1 2025'\nGROUP BY customer_name\nORDER BY total DESC\nLIMIT 5" }; var result = "| Customer | Revenue |\n" + "|----------------|----------|\n" + "| Acme Corp | $142,000 |\n" + "| TechStart Inc | $98,500 |\n" + "| Meridian Labs | $87,200 |\n" + "| Nova Systems | $76,400 |\n" + "| Brightpath Co | $61,100 |"; var approvalText = "This will run a SELECT query on the analytics database. No data will be modified."; var errorTexts = { error: "Connection timeout: Unable to reach database server", awaitingApproval: "Request rejected \u2014 using last quarter's cached snapshot instead." }; var toolCallResultTemplate = function(data) { return '<pre class="k-pre"><code class="k-code">' + kendo.htmlEncode(data.result) + '</code></pre>'; }; var toolCallElement = $("#tool-call"); var toolCall; var currentScenario = "success"; var isStreaming = false; var sequenceTimeout; var sequenceStep = 0; var sequenceStartedAt = 0; function statusIcon(state) { switch (state) { case "error": return "x-circle"; case "awaitingApproval": return "clock"; default: return "check-circle"; } } function stopStreaming() { isStreaming = false; replayButton.enable(true); replayButton.element.find(".k-button-text").text("Start"); } function onAction(e) { if (currentScenario !== "awaitingApproval") { return; } if (e.action === "approve") { renderToolCall({ state: "completed", expanded: true, secondaryLabel: "analytics \u00b7 db \u00b7 " + formatExecutionTime(Date.now() - sequenceStartedAt) }); } else if (e.action === "reject") { renderToolCall({ state: "error", expanded: true, secondaryLabel: null }); } stopStreaming(); } function renderToolCall(state) { kendo.destroy(toolCallElement); toolCallElement.empty(); toolCall = toolCallElement.kendoToolCall({ label: "query_database", secondaryLabel: state.secondaryLabel, state: state.state, statusSVGIcon: statusIcon(state.state), expandable: true, expanded: state.expanded, parameters: parameters, result: state.state === "completed" ? result : null, approvalText: approvalText, errorText: state.state === "error" ? errorTexts[currentScenario] : null, resultTemplate: toolCallResultTemplate, action: onAction }).data("kendoToolCall"); } function formatExecutionTime(elapsedMilliseconds) { return Math.max(0.1, elapsedMilliseconds / 1000).toFixed(1) + "s"; } function clearSequenceTimeout() { if (sequenceTimeout) { clearTimeout(sequenceTimeout); sequenceTimeout = null; } } function restState(scenario) { if (scenario === "error") { return { state: "error", expanded: false, secondaryLabel: null }; } return { state: "completed", expanded: false, secondaryLabel: "analytics \u00b7 db \u00b7 1.0s" }; } function updateSuccessSequence() { if (sequenceStep === 1) { renderToolCall({ state: "active", expanded: true, secondaryLabel: null }); } else if (sequenceStep === 2) { renderToolCall({ state: "completed", expanded: true, secondaryLabel: "analytics \u00b7 db \u00b7 " + formatExecutionTime(Date.now() - sequenceStartedAt) }); stopStreaming(); } } function playSequence() { clearSequenceTimeout(); isStreaming = true; replayButton.enable(false); replayButton.element.find(".k-button-text").text("Streaming..."); sequenceStartedAt = Date.now(); renderToolCall({ state: "active", expanded: false, secondaryLabel: null }); if (currentScenario === "success") { sequenceStep = 0; sequenceTimeout = setTimeout(function loop() { sequenceStep++; updateSuccessSequence(); if (sequenceStep < 2) { sequenceTimeout = setTimeout(loop, 1000); } }, 1000); } else if (currentScenario === "awaitingApproval") { sequenceTimeout = setTimeout(function() { renderToolCall({ state: "awaitingApproval", expanded: true, secondaryLabel: null }); }, 1000); } else if (currentScenario === "error") { sequenceTimeout = setTimeout(function() { renderToolCall({ state: "error", expanded: true, secondaryLabel: null }); stopStreaming(); }, 1000); } } var replayButton = $("#replay").kendoButton({ icon: "play", fillMode: "outline", size: "small", click: function() { if (!isStreaming) { playSequence(); } } }).data("kendoButton"); $("#scenarioOptions").kendoRadioGroup({ items: [ { value: "success", label: "Success" }, { value: "awaitingApproval", label: "Awaiting Approval" }, { value: "error", label: "Error" } ], layout: "horizontal", value: currentScenario, change: function(e) { clearSequenceTimeout(); currentScenario = e.newValue; stopStreaming(); renderToolCall(restState(currentScenario)); } }); renderToolCall(restState(currentScenario)); });

Description

The Kendo UI for jQuery ToolCall component visualizes an AI agent's tool executions so users can see what is being done on their behalf. 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.

This demo shows the ToolCall component animating through three different scenarios. Use the Scenario selector to switch between a successful execution, a tool call awaiting user approval, and a failed execution, then press Start to replay the selected scenario.

This ToolCall example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

jQuery LLM Kit Tool Call

Description

Support & Learning Resources

Additional Resources