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

Editor Integration with Inline Prompt

Updated on May 21, 2025

The Editor provides a built-in integration with an inline prompt component to help users add AI-driven suggestions and completions to their Editor.

The inline prompt displays inside a Popup which appears when the user selects text in the Editor. Once enabled, each command prompt will work only with this selected context. The result appears in the card and can be replaced or appended directly inside the Editor, or discarded if the result is not good.

The Inline prompt will automatically appear and it will align its top left corner with the bottom left corner of the selection.

The integration with the Inline Prompt covers the following use cases:

  • Prompting with context - The user prompt will use the selected text in the Editor as additional context.
  • Command with context - The user will run a command that will be applied to the selected content.

Enabling the Inline Prompt

To enable the Inline Prompt in the Editor:

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

Enabling the Inline Prompt in the Editor

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

@code {

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

}

Customizing the Inline Prompt

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

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

Customizing the Inline Prompt in the Editor

RAZOR
<TelerikEditor @bind-Value="@EditorValue"
               EnableInlineAIPrompt="true"
               Height="400px">
    <EditorSettings>
        <EditorInlineAIPromptSettings Commands="@Commands"></EditorInlineAIPromptSettings>
    </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