Add LLM Kit documentation

ai/agentic-ui-generator/overview.md

@@ -62,6 +62,11 @@ The Telerik Blazor MCP server uses an orchestration-first model, centered on the
         <ComponentTitle>Validator Assistant</ComponentTitle>
         </Component>
     </Column>
+    <Column count={[24,12,8]}>
+      <Component className="tile card-icon" href="#upgrade-assistant">
+        <ComponentTitle>Upgrade Assistant</ComponentTitle>
+        </Component>
+    </Column>
 </Row>
 
 The Agentic UI Generator orchestrates all assistants so you can build pages and components, apply styling and theming, and stay aligned with the design system in one seamless process. You can use the full end-to-end flow when you need complete page generation, or call a specific assistant directly when you need a focused change.
@@ -123,6 +128,10 @@ It is especially useful for interactive templates, complex component flows, and
 
 Not designed to be invoked manually. It is called automatically by the UI Generator Orchestrator and ensures the generated code follows Telerik UI for Blazor best practices and standards.
 
+### Upgrade Assistant
+
+The Upgrade Assistant helps you migrate existing Blazor applications to newer versions of `Telerik.UI.for.Blazor`. It automates the detection and fixing of breaking API changes, NuGet version bumps, and CDN reference updates.
+
 ### When to Use Orchestrated vs Targeted Mode
 
 Use `#telerik_ui_generator` for a complete orchestration-first workflow from a single prompt. When you need finer control or want to adjust just one aspect (such as layout, theme, or a component), you can call a specialized assistant directly by its dedicated handle. For details, see [Target the Assistants (Advanced)](slug:agentic-ui-generator-prompt-library#assistant-specific-prompts).

components/llmkit/chain-of-thought.md

@@ -0,0 +1,77 @@
+---
+title: ChainOfThought
+page_title: LLM Kit ChainOfThought
+description: Use the ChainOfThought component from the Telerik UI for Blazor LLM Kit to visualize sequential agent reasoning steps with icons, connectors, and chip tags.
+slug: llmkit-chain-of-thought
+tags: telerik,blazor,llmkit,chain of thought,agent,ai,reasoning
+published: True
+position: 1
+---
+
+# Blazor LLM Kit ChainOfThought
+
+The ChainOfThought component renders a sequential list of agent reasoning steps. Each step can include an icon, label text, optional chip tags, and a visual connector to the next step. Use the component to show how the agent searches for tools, evaluates options, and plans its next action.
+
+The component accepts a strongly typed data collection through the `Data` parameter and uses a `ThoughtTemplate` to control how each step renders.
+
+## Creating the ChainOfThought
+
+To use the ChainOfThought component:
+
+1. Add the `<TelerikChainOfThought>` tag.
+1. Set `TItem` to your step model type.
+1. Set the `Data` parameter to a `List<TItem>`.
+1. Define a `<ThoughtTemplate>` with a `Context` parameter to render each step.
+1. (optional) Set `Label` and `SecondaryLabel` for the header text.
+1. (optional) Set `Expandable` and `Expanded` to control collapsibility.
+1. (optional) Set `Completed` to mark the block as finished.
+
+>caption ChainOfThought showing agent tool discovery steps
+
+````RAZOR
+<TelerikChainOfThought TItem="ResearchStep"
+                       Label="Thinking through request"
+                       Icon="@SvgIcon.Brain"
+                       Expandable="true"
+                       Expanded="true"
+                       Data="@Steps">
+    <ThoughtTemplate Context="step">
+        <div style="display: flex; align-items: flex-start; gap: 8px; padding: 2px 0;">
+            <TelerikSvgIcon Icon="@step.Icon" Size="@ThemeConstants.SvgIcon.Size.Small" />
+            <span>@step.Text</span>
+        </div>
+    </ThoughtTemplate>
+</TelerikChainOfThought>
+
+@code {
+    private List<ResearchStep> Steps { get; set; } = new()
+    {
+        new ResearchStep { Icon = SvgIcon.Search, Text = "Searched for analytics tools" },
+        new ResearchStep { Icon = SvgIcon.DataSql, Text = "Found query_database — supports GROUP BY, date filters, and aggregation" },
+        new ResearchStep { Icon = SvgIcon.Search, Text = "Searching for related work..." },
+        new ResearchStep { Icon = SvgIcon.DataSql, Text = "Found 3 related queries — revenue by month, top customers by order value, and invoice reconciliation report" }
+    };
+
+    public class ResearchStep
+    {
+        public ISvgIcon Icon { get; set; } = SvgIcon.Search;
+        public string Text { get; set; } = string.Empty;
+    }
+}
+````
+
+## ChainOfThought API
+
+Get familiar with all ChainOfThought parameters, templates, and events in the [ChainOfThought API Reference](slug:Telerik.Blazor.Components.TelerikChainOfThought-1).
+
+## Next Steps
+
+* [Checkpoint](slug:llmkit-checkpoint)
+* [Citation](slug:llmkit-citation)
+* [ToolCall](slug:llmkit-tool-call)
+* [Reasoning](slug:llmkit-reasoning)
+
+## See Also
+
+* [LLM Kit Overview](slug:llmkit-overview)
+* [ChainOfThought API Reference](slug:Telerik.Blazor.Components.TelerikChainOfThought-1)

components/llmkit/checkpoint.md

@@ -0,0 +1,58 @@
+---
+title: Checkpoint
+page_title: LLM Kit Checkpoint
+description: Use the Checkpoint component from the Telerik UI for Blazor LLM Kit to mark recoverable points in an agent conversation and let users restart the workflow.
+slug: llmkit-checkpoint
+tags: telerik,blazor,llmkit,checkpoint,agent,ai,restart
+published: True
+position: 2
+---
+
+# Blazor LLM Kit Checkpoint
+
+The Checkpoint component marks a recoverable point in an agent conversation. It lets users restart the workflow from that point without losing prior context. Use the component alongside AI-generated responses to give users a clear way to go back and try a different path.
+
+## Creating the Checkpoint
+
+To use the Checkpoint component:
+
+1. Add the `<TelerikCheckpoint>` tag.
+1. Set the `State` parameter to a `CheckpointState` value.
+1. Subscribe to the `StateChanged` event to handle the user action, for example resetting the workflow.
+
+>caption Checkpoint placed above an AI-generated response
+
+````RAZOR
+<TelerikCheckpoint State="CheckpointState.StartOver"
+                   StateChanged="@OnStartOver" />
+
+<div>
+    <p>Your top 5 customers by revenue in Q1 2025:</p>
+    <ol>
+        <li>Acme Corp — $142,000</li>
+        <li>TechStart Inc — $98,500</li>
+        <li>Meridian Labs — $87,200</li>
+        <li>Nova Systems — $76,400</li>
+        <li>Brightpath Co — $61,100</li>
+    </ol>
+</div>
+
+@code {
+    private void OnStartOver(CheckpointState _) { }
+}
+````
+
+## Checkpoint API
+
+Get familiar with all Checkpoint parameters and events in the [Checkpoint API Reference](slug:Telerik.Blazor.Components.TelerikCheckpoint).
+
+## Next Steps
+
+* [Citation](slug:llmkit-citation)
+* [ToolCall](slug:llmkit-tool-call)
+* [Reasoning](slug:llmkit-reasoning)
+
+## See Also
+
+* [LLM Kit Overview](slug:llmkit-overview)
+* [Checkpoint API Reference](slug:Telerik.Blazor.Components.TelerikCheckpoint)

components/llmkit/citation.md

@@ -0,0 +1,61 @@
+---
+title: Citation
+page_title: LLM Kit Citation
+description: Use the Citation component from the Telerik UI for Blazor LLM Kit to display inline source references attached to AI-generated content.
+slug: llmkit-citation
+tags: telerik,blazor,llmkit,citation,ai,sources,references
+published: True
+position: 3
+---
+
+# Blazor LLM Kit Citation
+
+The Citation component displays an inline source reference attached to AI-generated content. Users can expand the citation to review the list of underlying sources. Use the component to provide transparency and auditability for AI responses.
+
+The component accepts a strongly typed data collection through the `Data` parameter and renders a clickable label that expands to show each source.
+
+## Creating the Citation
+
+To use the Citation component:
+
+1. Add the `<TelerikCitation>` tag inline within text content.
+1. Set `TItem` to your source model type.
+1. Set the `Data` parameter to a `List<TItem>` of source objects.
+1. Set the `Label` parameter to the display text shown for the citation marker.
+
+>caption Inline citation attached to an AI-generated response
+
+````RAZOR
+<p>
+    Together the top five customers account for $465,200 — approximately 67% of total quarterly revenue.
+    <TelerikCitation Data="@Sources" TItem="RevenueSource" Label="acme-corp.com" />
+</p>
+
+@code {
+    private List<RevenueSource> Sources { get; set; } = new()
+    {
+        new RevenueSource { Title = "Acme Corp Q1 2025 Revenue Report", Url = "https://acme-corp.com/reports/q1-2025" },
+        new RevenueSource { Title = "Analytics DB Export", Url = "https://analytics.internal/export/revenue-q1-2025" }
+    };
+
+    public class RevenueSource
+    {
+        public string Title { get; set; } = string.Empty;
+        public string Url { get; set; } = string.Empty;
+    }
+}
+````
+
+## Citation API
+
+Get familiar with all Citation parameters, templates, and events in the [Citation API Reference](slug:Telerik.Blazor.Components.TelerikCitation-1).
+
+## Next Steps
+
+* [ToolCall](slug:llmkit-tool-call)
+* [Reasoning](slug:llmkit-reasoning)
+
+## See Also
+
+* [LLM Kit Overview](slug:llmkit-overview)
+* [Citation API Reference](slug:Telerik.Blazor.Components.TelerikCitation-1)

components/llmkit/overview.md

@@ -0,0 +1,132 @@
+---
+title: Overview
+page_title: LLM Kit Overview
+description: Discover the Telerik UI for Blazor LLM Kit — a collection of purpose-built components for building transparent, interactive, and enterprise-ready AI agent experiences.
+slug: llmkit-overview
+tags: telerik,blazor,llmkit,ai,agent,chain of thought,tool call,reasoning,citation,checkpoint
+published: True
+position: 0
+---
+
+# Blazor LLM Kit Overview
+
+The Telerik UI for Blazor LLM Kit is a collection of purpose-built components for building transparent, interactive, and enterprise-ready AI agent experiences.
+
+It provides ready-made building blocks for visualizing agent execution, multi-step workflows, tool invocations, reasoning and decision points, inline citations, approvals, and conversation checkpoints. Designed to work alongside any chat or agentic interface, the kit brings visibility, control, and human oversight to AI-powered workflows.
+
+## LLM Kit Components
+
+| Component | Description |
+| --- | --- |
+| [ChainOfThought](slug:llmkit-chain-of-thought) | Renders a sequential list of agent reasoning steps with icons, connectors, and optional chip tags. Use it to visualize how the agent searches for tools, evaluates options, and arrives at a decision. |
+| [Checkpoint](slug:llmkit-checkpoint) | Marks a recoverable point in an agent conversation. Lets users restart the workflow from that point without losing context. |
+| [Citation](slug:llmkit-citation) | Displays inline source references attached to AI-generated content. Users can expand the citation to review the underlying sources. |
+| [ToolCall](slug:llmkit-tool-call) | Shows a tool invocation made by the agent, including its parameters and result. Supports an approval flow that lets users approve or reject the tool execution before it runs. |
+| [Reasoning](slug:llmkit-reasoning) | Renders a collapsible block of agent inner monologue or scratchpad content. Use it to expose the agent's raw thinking process. |
+
+## Example
+
+The following example demonstrates all LLM Kit components together. It shows a completed agent workflow — reasoning, chain of thought, a tool call, and a response with an inline citation and a checkpoint.
+
+````RAZOR
+<div style="max-width: 680px; display: flex; flex-direction: column; gap: 12px; padding-top: 8px;">
+
+    <TelerikReasoning Label="Thought"
+                      SecondaryLabel="for 5s"
+                      Icon="@SvgIcon.Brain"
+                      Expandable="true"
+                      Expanded="false"
+                      Completed="true">
+        <ContentTemplate>
+            <p>I need to sum revenue per customer for Q1 2025 and return the top 5 results ordered descending.</p>
+        </ContentTemplate>
+    </TelerikReasoning>
+
+    <TelerikChainOfThought TItem="CotStep"
+                           Label="Thought"
+                           SecondaryLabel="for 3s"
+                           Icon="@SvgIcon.Brain"
+                           Expandable="true"
+                           Expanded="false"
+                           Completed="true"
+                           Data="@Steps">
+        <ThoughtTemplate Context="step">
+            <div style="display: flex; align-items: flex-start; gap: 8px; padding: 2px 0;">
+                <TelerikSvgIcon Icon="@step.Icon" Size="@ThemeConstants.SvgIcon.Size.Small" />
+                <span>@step.Text</span>
+            </div>
+        </ThoughtTemplate>
+    </TelerikChainOfThought>
+
+    <TelerikToolCall Label="query_database"
+                     SecondaryLabel="analytics · db · 120ms"
+                     State="ToolCallState.Completed"
+                     Expandable="true"
+                     Expanded="false"
+                     Parameters="@ToolParameters" />
+
+    <TelerikCheckpoint State="CheckpointState.StartOver"
+                       StateChanged="@OnStartOver" />
+
+    <div>
+        <p>Your top 5 customers by revenue in Q1 2025:</p>
+        <ol>
+            <li>Acme Corp — $142,000</li>
+            <li>TechStart Inc — $98,500</li>
+            <li>Meridian Labs — $87,200</li>
+            <li>Nova Systems — $76,400</li>
+            <li>Brightpath Co — $61,100</li>
+        </ol>
+        <p>Together they account for $465,200 — approximately 67% of total quarterly revenue.
+            <TelerikCitation Data="@Sources" TItem="RevenueSource" Label="acme-corp.com" />
+        </p>
+    </div>
+
+</div>
+
+@code {
+    private List<CotStep> Steps { get; set; } = new()
+    {
+        new CotStep { Icon = SvgIcon.Search, Text = "Searched for analytics tools" },
+        new CotStep { Icon = SvgIcon.DataSql, Text = "Found query_database — supports GROUP BY and aggregation" }
+    };
+
+    private object ToolParameters { get; } = new
+    {
+        database = "analytics",
+        query = "SELECT customer_name, SUM(revenue) AS total FROM orders WHERE quarter = 'Q1 2025' GROUP BY customer_name ORDER BY total DESC LIMIT 5"
+    };
+
+    private List<RevenueSource> Sources { get; } = new()
+    {
+        new RevenueSource { Title = "Acme Corp Q1 2025 Revenue Report", Url = "https://acme-corp.com/reports/q1-2025" },
+        new RevenueSource { Title = "Analytics DB Export", Url = "https://analytics.internal/export/revenue-q1-2025" }
+    };
+
+    private void OnStartOver(CheckpointState _) { }
+
+    public class CotStep
+    {
+        public ISvgIcon Icon { get; set; } = SvgIcon.Search;
+        public string Text { get; set; } = string.Empty;
+    }
+
+    public class RevenueSource
+    {
+        public string Title { get; set; } = string.Empty;
+        public string Url { get; set; } = string.Empty;
+    }
+}
+````
+
+## Next Steps
+
+* [ChainOfThought](slug:llmkit-chain-of-thought)
+* [Checkpoint](slug:llmkit-checkpoint)
+* [Citation](slug:llmkit-citation)
+* [ToolCall](slug:llmkit-tool-call)
+* [Reasoning](slug:llmkit-reasoning)
+
+## See Also
+
+* [Live Demo: LLM Kit](https://demos.telerik.com/blazor-ui/llmkit/overview)