In this post, we will explore what the Telerik Blazor AI Prompt component is and how you can integrate it into your own Blazor-based projects, with the aim of providing intelligent experiences to your users for quickly generating and improving content.
The Blazor AIPrompt component from Progress Telerik is a fabulous component that allows users to interact with an LLM through a prompt to generate output. Similarly, the component allows reusing that output to execute predefined commands that modify it, thereby optimizing the content generation times.
Some use cases for the AIPrompt component could be:
The list above is just a small sample of ideas you could implement, but undoubtedly the limit is your imagination.
To make the demonstrations in this post more realistic, let’s assume we are working on an ecommerce product editing page.
This type of content usually requires a significant amount of time to create good product descriptions, which leads creators to opt for superficial descriptions that do not convey trust. The goal is to help users quickly enhance these descriptions through the use of the AIPrompt component.
The initial demo page is as follows:
@page "/product-editor"
@using Microsoft.AspNetCore.Components.Forms
@using Telerik.Blazor.Components
<style>
.product-editor-card {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: #fff;
}
.product-form {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.image-section {
flex: 1 1 200px;
text-align: center;
}
.image-preview {
width: 100%;
max-width: 250px;
height: 250px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #ddd;
margin-bottom: 0.5rem;
}
.fields-section {
flex: 2 1 300px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 1rem;
}
.ai-prompt-wrapper {
margin-top: 1rem;
background: #f9f9f9;
padding: 1rem;
border-radius: 4px;
}
</style>
<TelerikCard Class="product-editor-card">
<CardHeader>
<h2>Edit Product</h2>
</CardHeader>
<CardBody>
<div class="product-form">
<div class="image-section">
@if (!string.IsNullOrEmpty(Product.ImageURL))
{
<img src="@Product.ImageURL" alt="Preview" class="image-preview" />
}
else
{
<div class="image-preview d-flex align-items-center justify-content-center text-muted">
No image
</div>
}
<InputFile OnChange="@OnInputFileChange" accept="image/*" />
</div>
<div class="fields-section">
<TelerikTextBox @bind-Value="Product.Name" Placeholder="Product name" />
<TelerikNumericTextBox @bind-Value="Product.Price" Format="C" Placeholder="Price" />
<TelerikTextArea @bind-Value="Product.Description" Placeholder="Description" Rows="4" />
</div>
</div>
<div class="actions">
<TelerikButton OnClick="@OnCancel" ThemeColor="Light">Cancel</TelerikButton>
<TelerikButton OnClick="@OnSave" ThemeColor="Primary">Save</TelerikButton>
</div>
</CardBody>
</TelerikCard>
@code {
private ProductModel Product = new()
{
Name = "Cotton T-Shirt",
Price = 29.99m,
Description = "Comfortable cotton t-shirt in various colors.",
ImageURL = "https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
};
private IBrowserFile UploadedFile;
private string UploadedImageDataUrl;
private async Task OnInputFileChange(InputFileChangeEventArgs e)
{
UploadedFile = e.File;
var buffer = new byte[UploadedFile.Size];
await UploadedFile.OpenReadStream(maxAllowedSize: 10_000_000).ReadAsync(buffer);
UploadedImageDataUrl = $"data:{UploadedFile.ContentType};base64,{Convert.ToBase64String(buffer)}";
}
private void OnCancel()
{
Product = new ProductModel { Name = string.Empty, Price = 0, Description = string.Empty };
UploadedImageDataUrl = null;
}
private async Task OnSave()
{
// Save Logic
}
class ProductModel
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Description { get; set; }
public string ImageURL { get; set; }
}
}
When running the application, the result is as follows:
Indeed, editing hundreds or thousands of product descriptions in an online store can be a titanic task, so we will implement the AIPrompt component to help generate them more quickly.
The first step you need to follow to integrate the AI Prompt component into your Blazor application is to follow the Blazor component installation guide to incorporate them into your app.
Next, you need to add the usage of the TelerikAIPrompt component to the page where you want to implement the AI functionality. In our case, we can add a button to show and hide it as follows:
@page "/product-editor"
@using Microsoft.AspNetCore.Components.Forms
@using Telerik.Blazor.Components
...
<TelerikCard Class="product-editor-card">
<CardHeader>
<h2>Edit Product</h2>
</CardHeader>
<CardBody>
<div class="product-form">
...
<div class="fields-section">
<TelerikTextBox @bind-Value="Product.Name" Placeholder="Product name" />
<TelerikNumericTextBox @bind-Value="Product.Price" Format="C" Placeholder="Price" />
<TelerikTextArea @bind-Value="Product.Description" Placeholder="Description" Rows="4" />
<TelerikButton OnClick="@ToggleAIPrompt" Icon="SvgIcon.Globe" Class="mt-2" ThemeColor="Info">
Improve description
</TelerikButton>
@if (ShowAIPrompt)
{
<div class="ai-prompt-wrapper">
<TelerikAIPrompt Width="100%">
</TelerikAIPrompt>
</div>
}
</div>
</div>
<div class="actions">
<TelerikButton OnClick="@OnCancel" ThemeColor="Light">Cancel</TelerikButton>
<TelerikButton OnClick="@OnSave" ThemeColor="Primary">Save</TelerikButton>
</div>
</CardBody>
</TelerikCard>
@code {
private bool ShowAIPrompt;
void ToggleAIPrompt()
{
ShowAIPrompt = !ShowAIPrompt;
}
...
}
The above code allows the user to show and hide the AI Prompt component as seen below:
As you can see in the image above, the component is shown and hidden at will in the UI. However, the implementation is not yet functional because we need to add an AI model that generates responses within the component, which we will see next.
Once we have added the component that will allow us to generate descriptions in the application, it is time to connect it with an AI model to enhance the descriptions.
In this example, I will use the OpenAI service, so we need to install the following NuGet packages:
Microsoft.Extensions.AIMicrosoft.Extensions.AI.OpenAINext, I will go to the Program.cs file to add a Chat service that we can inject into any component:
...
builder.Services.AddTelerikBlazor();
var key = Environment.GetEnvironmentVariable("OpenAIKey");
var model = "o4-mini-2025-04-16";
IChatClient chatClient =
new OpenAIClient(key).GetChatClient(model).AsIChatClient();
builder.Services.AddChatClient(chatClient);
var app = builder.Build();
Finally, we return to the page-type component and inject a reference that will allow us to connect to the OpenAI service:
"/product-editor"
@inject IChatClient OpenAIClient
...
With the reference to the OpenAI service ready, we can start improving the product description.
A significant advantage of the Blazor AI Prompt component is that if you have registered a service of type IChatClient using Microsoft.Extensions.AI, as in our case, the AIPrompt component will automatically use it. If you do not use the Microsoft.Extensions.AI package, you can use the OnPromptRequest event to make requests, as indicated in the documentation.
Knowing the above, what we will do is create a property that contains the System Prompt—in other words, how the response we obtain from the AI service should be. This will be linked to the component through the SystemPrompt parameter as follows:
...
@if (ShowAIPrompt)
{
<div class="ai-prompt-wrapper">
<TelerikAIPrompt Width="100%"
SystemPrompt="@SystemPrompt">
</TelerikAIPrompt>
</div>
}
...
@code {
...
public string SystemPrompt { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
SystemPrompt = $@"""
Based on the following product details, please improve the product description to make it more appealing and engaging for potential customers:
Product Name: {Product.Name}
Product Price: {Product.Price:C}
Product Description: {Product.Description}
""";
}
}
In the above code, you can see how we are using the product information to give instructions to the model about the response that should be generated.
On the other hand, the text input of the AIPrompt component will serve so that the user can enter additional details about how the generated response should be. For example, they can make it have a formal or informal tone, or add additional information that is not in the original description. The result of the execution is as follows:
As you can see, the response has been improved by taking all the provided information and following the user’s instructions.
You may want to set predefined suggestions in your application so that users do not have to keep typing a repetitive prompt over and over. This can be done thanks to the PromptSuggestions parameter, which should be linked to a generic list of strings as in the following example:
...
<TelerikAIPrompt Width="100%"
SystemPrompt="@SystemPrompt"
PromptSuggestions="@PromptSuggestions">
</TelerikAIPrompt>
@code {
private List<string> PromptSuggestions { get; set; } = new List<string>()
{
"Act as a fashion marketing expert and copywriter and craft a persuasive product description for this clothing item that resonates with my [ideal customer persona] and motivates them to buy on my [website/store].",
"Write a detailed, emotionally engaging description for this garment that highlights its key features, benefits, and unique selling points, aimed at appealing to [ideal customer persona] and increasing conversions.",
"I need a powerful product description for this apparel piece that clearly explains the material, fit, and styling options, while creating a sense of urgency for [ideal customer persona] to make a purchase.",
"Create a compelling product listing for this clothing item that emphasizes its versatility and quality, designed to connect with [ideal customer persona] and drive immediate action.",
"Act as a brand storyteller and craft a product description for this fashion item that builds brand trust, evokes desire, and inspires [ideal customer persona] to click 'add to cart.'"
};
}
This list of suggestions will allow users to generate responses even faster, as shown below:
Once we know how to improve the product description, let’s see how we can reuse it for a subsequent action.
You may want to perform an action with the initially generated output, such as applying a different format, translating it to another language or converting it into a post for social media, etc. We can easily achieve this through the Commands View section, which will be enabled by assigning a list of commands of type AIPromptCommandDescriptor to the Commands parameter. Each of these commands must contain the following information:
Id: The Id of the commandTitle: The title that will be shown for the user to execute the commandIcon: An icon to show what the command doesPrompt: The prompt that the command will use to transform the output into new textChildren: Nested commands of the command (if any)In our example, we will add commands to enhance and make basic adjustments, create social media posts, generate long-form content formats and, finally, create variations of the initial description, as shown below:
...
<TelerikAIPrompt Width="100%"
SystemPrompt="@SystemPrompt"
Commands="@PromptCommands">
</TelerikAIPrompt>
...
@code {
...
private List<AIPromptCommandDescriptor> PromptCommands { get; set; } = new List<AIPromptCommandDescriptor>()
{
new AIPromptCommandDescriptor
{
Id = "1",
Title = "Correct Spelling and Grammar",
Icon = SvgIcon.SpellChecker,
Prompt = "Correct the spelling and grammar of the following product description."
},
new AIPromptCommandDescriptor
{
Id = "2",
Title = "Generate Catchy Title",
Icon = SvgIcon.Categorize,
Prompt = "Create a catchy title for the following product description."
},
new AIPromptCommandDescriptor
{
Id = "3",
Title = "SEO Meta Description",
Icon = SvgIcon.Search,
Prompt = "Write an SEO-friendly meta description (max 160 characters) for the following product description."
},
new AIPromptCommandDescriptor
{
Id = "4",
Title = "Social Media Posts",
Icon = SvgIcon.Share,
Children = new List<AIPromptCommandDescriptor>
{
new AIPromptCommandDescriptor
{
Id = "4.1",
Title = "Twitter",
Icon = SvgIcon.Twitter,
Prompt = "Write a concise tweet (max 280 characters) based on the following product description."
},
new AIPromptCommandDescriptor
{
Id = "4.2",
Title = "Facebook",
Icon = SvgIcon.Facebook,
Prompt = "Write an engaging Facebook post based on the following product description."
},
new AIPromptCommandDescriptor
{
Id = "4.3",
Title = "Instagram",
Icon = SvgIcon.Instagram,
Prompt = "Write an Instagram caption (including relevant hashtags) for the following product description."
},
new AIPromptCommandDescriptor
{
Id = "4.4",
Title = "LinkedIn",
Icon = SvgIcon.Linkedin,
Prompt = "Write a professional LinkedIn post for the following product description."
},
new AIPromptCommandDescriptor
{
Id = "4.5",
Title = "Pinterest",
Icon = SvgIcon.Pinterest,
Prompt = "Write a Pinterest Pin description (including keywords) for the following product description."
}
}
},
new AIPromptCommandDescriptor
{
Id = "5",
Title = "Generate Blog Post",
Icon = SvgIcon.Blogger,
Prompt = "Write a blog post outline based on the following product description."
},
new AIPromptCommandDescriptor
{
Id = "6",
Title = "Email Newsletter",
Icon = SvgIcon.FileWord,
Prompt = "Draft an email newsletter introducing the following product."
},
new AIPromptCommandDescriptor
{
Id = "7",
Title = "Simplify Description",
Icon = SvgIcon.ApplyFormat,
Prompt = "Simplify the following product description."
},
new AIPromptCommandDescriptor
{
Id = "8",
Title = "Expand Description",
Icon = SvgIcon.CaretAltExpand,
Prompt = "Expand the following product description with more details and benefits."
}
};
...
}
The execution of the above implementation looks as follows:
In this way, it is possible to simplify the process of correction and improvement of an output according to your needs.
Throughout this post, you have learned how to get started with the Telerik AI Prompt component, understanding what it is for, how to configure it and integrate it with an AI model and, finally, the steps to add suggestions and additional commands. It’s your time to accelerate your users’ productivity by creating applications that integrate the use of artificial intelligence.
Héctor Pérez is a Microsoft MVP with more than 10 years of experience in software development. He is an independent consultant, working with business and government clients to achieve their goals. Additionally, he is an author of books and an instructor at El Camino Dev and Devs School.