New to Telerik UI for BlazorStart a free 30-day trial

Editor Integration with AIPrompt

Updated on May 20, 2025

The Editor provides a built-in integration with the AIPrompt component to help users apply AI-driven suggestions and completions to their Editor.

The integration with the AIPrompt component covers the following use cases:

  • Standalone prompting - The user can ask the AIPrompt without any context provided by the Editor. This could be useful for idea generation, writing a whole piece of content (blog post), or just random questions.
  • Prompting with context - The user prompt will use additional context from the Editor (the UI allows the user to decide whether to use the selected text, if any, or the whole content).
  • Command with context - The user can select a command that will be applied to the selected content (if any) or the whole content if no text is selected.

Enabling the AIPrompt

To enable the AIPrompt in the Editor:

  1. Set the EnableAIPrompt parameter to true.
  2. Register an IChatClient service to generate the AIPrompt responses. Configure the service according to the model you are using. The AIPrompt is designed to automatically use the registered IChatClient as the component provides a built-in integration with the Microsoft.Extensions.AI library.

Enabling the AIPrompt in the Editor

RAZOR
<TelerikEditor @bind-Value="@EditorValue"
               EnableAIPrompt="true"
               Height="400px">
</TelerikEditor>

@code {

    private string EditorValue { get; set; } = "<p>Sample Editor content</p>";

}

Customizing the AIPrompt

The Editor allows customizing some of the integrated AIPrompt's settings. For that purpose, use the <EditorAIPromptSettings> tag. It provides the following parameters that you can configure:

ParameterType and Default valueDescription
SystemPromptstringThe system prompt that will be passed to the integrated AIPrompt. If not provided, the AIPrompt will use its default SystemPrompt value.
CommandsList<AIPromptCommandDescriptor>The commands displayed within the Commands view. If not set the AIPrompt will use the default predefined commands.

Customizing the AIPrompt in the Editor

RAZOR
<TelerikEditor @bind-Value="@EditorValue"
               EnableAIPrompt="true"
               Height="400px">
    <EditorSettings>
        <EditorAIPromptSettings Commands="@Commands"></EditorAIPromptSettings>
    </EditorSettings>
</TelerikEditor>

@code {
    private string EditorValue { get; set; } = "Sample Editor content";

    private List<AIPromptCommandDescriptor> Commands { get; set; } = new List<AIPromptCommandDescriptor>
    {
        new AIPromptCommandDescriptor() { Id = "1", Title = "Simplify", Icon = SvgIcon.MinWidth, Prompt = "Simplify the text" },
        new AIPromptCommandDescriptor() { Id = "2", Title = "Expand", Icon = SvgIcon.MaxWidth , Prompt = "Expand the text" },
        new AIPromptCommandDescriptor() { Id = "3", Title = "Translate", Icon = SvgIcon.EditTools,
            Children = new List<AIPromptCommandDescriptor>
            {
                new AIPromptCommandDescriptor() { Id = "4", Title = "English", Prompt = "Translate the text to English" },
                new AIPromptCommandDescriptor() { Id = "5", Title = "Bulgarian", Prompt = "Translate the text to Bulgarian" },
                new AIPromptCommandDescriptor() { Id = "6", Title = "Spanish", Prompt = "Translate the text to Spanish" },
            }
        }
    };
}

See Also