ASP.NET MVC Chain of Thought
When an agent takes several steps to answer a question, such as searching the web, analyzing documents, or querying a database, a single reasoning block hides the structure of the work.
The ChainOfThought component presents each step as a named row beneath one collapsible header, turning an unclear wait into an understandable progress narrative. Each step is a Thought object, and you can provide a custom row template to control its rendering.
Configuration
Bind Thoughts to an array of Thought objects and add items as each step completes. This makes the chain grow in front of the user instead of appearing all at once. Each item requires an id and a label.
@(Html.Kendo().ChainOfThought()
.Name("chainOfThought")
.Label("Thought")
.Expandable(true)
.Expanded(true)
.Thoughts(thoughts =>
{
thoughts.Add().Label("Searching for analytics tools").SvgIcon("search").Completed(true);
thoughts.Add().Label("Checking the revenue table").SvgIcon("table").Completed(true);
thoughts.Add().Label("Preparing the query result").SvgIcon("gear").Completed(true);
})
)Use Label and SecondaryLabel on the component for the overall header. A step count or total elapsed time gives users a quick summary without requiring them to expand every row.
For coding agents, LinesAdded and LinesRemoved show diff counters directly in the header, helping reviewers gauge the scope of a change at a glance.
Set Completed to true after all steps finish so the header changes from its in-progress state to its finished state, confirming that the chain is complete.
Custom Thought Template
If the default row layout does not meet your needs, provide a custom template for each Thought item. The ThoughtTemplate option lets you define how every step is rendered and gives you full control over the reasoning presentation.