Angular LLM Kit Chain of Thought
When an agent takes multiple steps to answer a question—searching the web, analyzing documents, querying a database—a single reasoning block cannot show how the work is structured in detail. Use the ChainOfThought component to make each operation visible in sequence.
The ChainOfThought component renders each operation step as a named row under one collapsible header. This format helps users follow the sequence of the agent's work and gives you control over how each step appears.
The following example demonstrates the ChainOfThought component displaying a step-by-step sequence of operations.
Rendering Thought Rows
The thoughts property accepts an ordered array of Thought objects. Add a new thought to the array when its operation starts and update its label and completed properties dynamically as the operation progresses.
Each thought can include supporting context in its secondaryLabel property, detailed output in its content property, and an operation icon through its icon or svgIcon inputs.
The following snippets show how to configure the ChainOfThought header and its thought rows.
<kendo-chainofthought
[svgIcon]="brainIcon"
label="Thought"
secondaryLabel="for 6.0s"
[thoughts]="thoughts"
[expandable]="true"
></kendo-chainofthought>The component-level label and secondaryLabel properties describe the chain as a whole. Use them for a concise summary that remains visible when the thought rows are collapsed.
Showing Chain Progress
After the final operation completes, set the completed property of the ChainOfThought to true. The header will then communicate that the chain has finished by replacing its in-progress shimmering effect with a completed rendering of the header.
For coding workflows, linesAdded and linesRemoved expose diff counters directly in the header so reviewers can see the scope of a change at a glance. Leave these properties unset for workflows that do not report line changes.
Use the expanded property when you need to control the disclosure of the chain through the application state. Use the expandedChange event when your application needs to respond to changes in the chain's disclosure state.
<kendo-chainofthought
[thoughts]="thoughts"
[completed]="isComplete"
[linesAdded]="linesAdded"
[linesRemoved]="linesRemoved"
[expanded]="isExpanded"
(expandedChange)="isExpanded = $event"
></kendo-chainofthought>Customizing the Thoughts
The default row layout covers common thought data elements. For richer step content, provide a custom template through the kendoThoughtTemplate directive and render the current Thought item as needed. The template allows you to define how each step is rendered, giving you full control over the presentation of the thinking process.
<kendo-chainofthought [thoughts]="thoughts">
<ng-template kendoThoughtTemplate let-thought>
<kendo-svgicon [icon]="thought.svgIcon" size="small"></kendo-svgicon>
<span>{{ thought.label }}</span>
<span>{{ thought.secondaryLabel }}</span>
<span>{{ thought.content }}</span>
</ng-template>
</kendo-chainofthought>The following example demonstrates a custom template that adds step categories, tool details, and durations while preserving the standard thought icons.