Angular LLM Kit Reasoning
AI agents can take time to work through complex requests before the final answer appears. Use the Reasoning component to show that progress and give users visibility into the model's work.
The Reasoning component surfaces the model's internal thinking trace in real time as a collapsible disclosure block, giving users confirmation that work is in progress and providing the transparency they need to trust the output.
The following example demonstrates the Reasoning component animating through a streaming sequence.
Streaming the Content
The content property holds the model's thinking trace. Update this value as the response stream arrives to give users the sense of watching the model reason in real time and provide visibility into the work behind the final answer.
When the model finishes, set the completed property to true. The Reasoning will then replace its shimmering effect, which indicates an in-progress state, with the completed presentation of the component.
<kendo-reasoning
[content]="reasoningContent"
[completed]="!isStreaming"
></kendo-reasoning>To replace the default Reasoning body rendered from the content property, use the kendoReasoningContentTemplate directive. The template lets you present the reasoning trace with custom markup, formatting, or supporting content.
<kendo-reasoning>
<ng-template kendoReasoningContentTemplate>
<p>Analyzing the available data sources before generating a response.</p>
</ng-template>
</kendo-reasoning>Customizing the Header
Use the label property to display a short description of the current activity. The secondaryLabel property can show supporting context, such as elapsed time or a model status.
Set the icon or svgIcon input when you want the header to reflect your application's visual language.
<kendo-reasoning
[svgIcon]="brainIcon"
[label]="isStreaming ? 'Thinking' : 'Thought'"
[secondaryLabel]="isStreaming ? '' : elapsedTime"
></kendo-reasoning>Controlling the Expanded State
Set the expandable input to true when users need to show or hide the Reasoning trace interactively. The expanded property can be used to conditionally open or close the Reasoning block in response to a streaming process or another workflow.
The expandedChange event emits the current state of the Reasoning when the user expands or collapses the reasoning body through the header. Use the emitted value to keep the application's disclosure state in sync.
<kendo-reasoning
[expandable]="true"
[expanded]="isStreaming"
(expandedChange)="onExpandedChange($event)"
></kendo-reasoning>