Kendo UI for jQuery Reasoning
When users interact with AI agents, much of the process remains hidden: the model works through a problem, but nothing appears until the response arrives.
The Reasoning component reveals the model's internal thinking trace in real time through a collapsible disclosure block, confirming that work is underway and giving power users the transparency needed to trust the output.
Configuration
Bind content to the model's thinking trace and push incremental token updates as the stream arrives. This lets users watch the model reason in real time.
Use label to describe the current activity and secondaryLabel to display elapsed time after the model finishes. Changing between "Thinking" and "Thought" with elapsed time immediately shows whether work is still underway. Pair icon or svgIcon with your application's design language to make the header easy to recognize.
<div id="reasoning"></div>
<script>
$("#reasoning").kendoReasoning({
label: "Thinking",
secondaryLabel: "in progress",
svgIcon: "sparkles",
expandable: true,
expanded: true,
content: "Selecting the relevant data source and validating the request.",
completed: false
});
</script>Set completed to true when the stream ends so the header changes from its in-progress spinner to a completed state, indicating that the trace is finished and the answer is ready.
Expanded State
The expanded state shows the complete reasoning trace, helping users follow the model's thought process step by step. After reviewing the reasoning, users can collapse the block to hide its details.
Leave expandable enabled so users who do not need the trace can collapse it without losing context. Use expanded to control whether the block opens while the model works, and respond to user-driven changes with the expand, collapse, or toggle methods.
$("#reasoning").kendoReasoning({
expandable: true,
expanded: true
});Templates
Use contentTemplate when the trace needs structured markup instead of plain text. Return only trusted or properly encoded HTML from the template.
<div id="reasoning"></div>
<script>
$("#reasoning").kendoReasoning({
expandable: true,
expanded: true,
contentTemplate: function() {
return "<p>Checked the request and compared the available data sources.</p>";
}
});
</script>