diff --git a/ai/agentic-ui-generator/overview.md b/ai/agentic-ui-generator/overview.md index 9424c99f1..cc7e378b3 100644 --- a/ai/agentic-ui-generator/overview.md +++ b/ai/agentic-ui-generator/overview.md @@ -62,6 +62,11 @@ The Telerik Blazor MCP server uses an orchestration-first model, centered on the Validator Assistant + + + Upgrade Assistant + + 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). diff --git a/components/llmkit/chain-of-thought.md b/components/llmkit/chain-of-thought.md new file mode 100644 index 000000000..c6ce336b0 --- /dev/null +++ b/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 `` tag. +1. Set `TItem` to your step model type. +1. Set the `Data` parameter to a `List`. +1. Define a `` 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 + + +
+ + @step.Text +
+ + + +@code { + private List 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) diff --git a/components/llmkit/checkpoint.md b/components/llmkit/checkpoint.md new file mode 100644 index 000000000..19b578481 --- /dev/null +++ b/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 `` 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 + + +
+

Your top 5 customers by revenue in Q1 2025:

+
    +
  1. Acme Corp — $142,000
    2. +
  2. TechStart Inc — $98,500
    3. +
  3. Meridian Labs — $87,200
    4. +
  4. Nova Systems — $76,400
    5. +
  5. Brightpath Co — $61,100
    6. +
+
+ +@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) diff --git a/components/llmkit/citation.md b/components/llmkit/citation.md new file mode 100644 index 000000000..44b26419d --- /dev/null +++ b/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 `` tag inline within text content. +1. Set `TItem` to your source model type. +1. Set the `Data` parameter to a `List` 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 +

+ Together the top five customers account for $465,200 — approximately 67% of total quarterly revenue. + +

+ +@code { + private List 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) diff --git a/components/llmkit/overview.md b/components/llmkit/overview.md new file mode 100644 index 000000000..191778250 --- /dev/null +++ b/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 +
+ + + +

I need to sum revenue per customer for Q1 2025 and return the top 5 results ordered descending.

+ + + + + +
+ + @step.Text +
+ + + + + + + +
+

Your top 5 customers by revenue in Q1 2025:

+
    +
  1. Acme Corp — $142,000
    2. +
  2. TechStart Inc — $98,500
    3. +
  3. Meridian Labs — $87,200
    4. +
  4. Nova Systems — $76,400
    5. +
  5. Brightpath Co — $61,100
    6. +
+

Together they account for $465,200 — approximately 67% of total quarterly revenue. + +

+
+ +
+ +@code { + private List 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 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) diff --git a/components/llmkit/reasoning.md b/components/llmkit/reasoning.md new file mode 100644 index 000000000..411170d84 --- /dev/null +++ b/components/llmkit/reasoning.md @@ -0,0 +1,56 @@ +--- +title: Reasoning +page_title: LLM Kit Reasoning +description: Use the Reasoning component from the Telerik UI for Blazor LLM Kit to display a collapsible block of agent inner monologue or scratchpad content. +slug: llmkit-reasoning +tags: telerik,blazor,llmkit,reasoning,agent,ai,thinking,scratchpad +published: True +position: 5 +--- + +# Blazor LLM Kit Reasoning + +The Reasoning component renders a collapsible block that exposes the agent's raw thinking process — its inner monologue or scratchpad content. Use the component to give users visibility into how the agent approaches a problem before it takes action. + +Content inside the Reasoning block streams in progressively as the agent thinks, and the block can be marked as completed once the reasoning phase finishes. + +## Creating the Reasoning Component + +To use the Reasoning component: + +1. Add the `` tag. +1. Set `Label` to a string such as `"Thinking"` or `"Thought"`. +1. Define a `` child template with the agent's reasoning text. +1. (optional) Set `Expandable` and `Expanded` to control collapsibility. +1. (optional) Set `Completed` to mark the reasoning phase as finished. +1. (optional) Set `SecondaryLabel` to display metadata such as duration. + +>caption Completed Reasoning block showing agent scratchpad content + +````RAZOR + + +

I need to sum revenue per customer for Q1 2025 and return the top 5 results ordered descending.

+

I'll use query_database with a GROUP BY on customer_name and limit to 5 results.

+ + +```` + +## Reasoning API + +Get familiar with all Reasoning parameters, templates, and events in the [Reasoning API Reference](slug:Telerik.Blazor.Components.TelerikReasoning). + +## Next Steps + +* [ChainOfThought](slug:llmkit-chain-of-thought) +* [ToolCall](slug:llmkit-tool-call) + +## See Also + +* [LLM Kit Overview](slug:llmkit-overview) +* [Reasoning API Reference](slug:Telerik.Blazor.Components.TelerikReasoning) diff --git a/components/llmkit/tool-call.md b/components/llmkit/tool-call.md new file mode 100644 index 000000000..7f497f03c --- /dev/null +++ b/components/llmkit/tool-call.md @@ -0,0 +1,61 @@ +--- +title: ToolCall +page_title: LLM Kit ToolCall +description: Use the ToolCall component from the Telerik UI for Blazor LLM Kit to display agent tool invocations with parameters, results, and an approval workflow. +slug: llmkit-tool-call +tags: telerik,blazor,llmkit,tool call,agent,ai,approval,human in the loop +published: True +position: 4 +--- + +# Blazor LLM Kit ToolCall + +The ToolCall component shows a tool invocation made by the agent, including the tool name, its input parameters, and the result. It also supports a human-in-the-loop approval flow where users can approve or reject the tool execution before it runs. + +Use the component when an agent requests access to an external system such as a database, API, or file store, and you want to give users visibility and control over that action. + +## Creating the ToolCall + +To use the ToolCall component: + +1. Add the `` tag. +1. Set the `Label` parameter to the tool name. +1. Set the `State` parameter to a `ToolCallState` value that reflects the current execution state. +1. Set the `Parameters` parameter to an object representing the tool inputs. +1. (optional) Set `ApprovalText` to describe what the tool will do. This text appears when `State` is `ToolCallState.AwaitingApproval`. +1. (optional) Subscribe to `OnAction` to handle approve and reject actions. +1. (optional) Set `Result` to display the tool output after execution. +1. (optional) Set `ErrorText` to display an error message when `State` is `ToolCallState.Error`. + +>caption Completed ToolCall showing tool name, parameters, and execution metadata + +````RAZOR + + +@code { + 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" + }; +} +```` + +## ToolCall API + +Get familiar with all ToolCall parameters, states, and events in the [ToolCall API Reference](slug:Telerik.Blazor.Components.TelerikToolCall). + +## Next Steps + +* [Reasoning](slug:llmkit-reasoning) +* [ChainOfThought](slug:llmkit-chain-of-thought) + +## See Also + +* [LLM Kit Overview](slug:llmkit-overview) +* [ToolCall API Reference](slug:Telerik.Blazor.Components.TelerikToolCall)