AI-powered Document Editing for Blazor Rich Text Editor

• Mar 10, 2026
• 3 minutes to read

DevExpress AI-powered extension for Rich Text Editor adds AI-related commands to the editor’s context menu. The commands are designed to process text content.

Note

AI context menu commands are available only when you select text in the editor.

Run DemoView Example: Rich Text Editor and HTML Editor for Blazor - How to integrate AI-powered extensions

Register AI Services

To build an AI-powered application, choose the approach that best fits your needs:

• Use the DevExpress Template Kit: Create a new project with pre-configured AI services and NuGet packages. This approach implements our recommended patterns for AI service integration.
• Add AI capabilities to your current application. The DevExpress AI-powered extension for Rich Text Editor supports major cloud providers, self-hosted models, and proprietary in-house LLMs.

Note

DevExpress AI-powered extensions operate on a “bring your own key” (BYOK) model. We do not provide a proprietary REST API or bundled language models (LLMs/SLMs).

You can either deploy a self-hosted model or connect to a cloud AI provider and obtain necessary connection parameters (endpoint, API key, language model identifier, and so on). These parameters must be configured at application startup to register an AI client and enable extension functionality.

Important

Never hardcode AI provider access keys, credentials, or API endpoints directly in your source code. Refer to the following help topic for additional information: Secret Management for Blazor AI Components.

Add Predefined AI-powered Items to the Editor Context Menu

Populate the DxRichEdit.Extensions property with commands and allow users to process editor text with AI. Available commands include:

AskAssistantAIContextMenuItemA context menu item that allows user to process editor text according to a custom prompt.ExpandAIContextMenuItemA context menu item that expands the editor text.ExplainAIContextMenuItemA context menu item that explains the editor text.ProofreadAIContextMenuItemA context menu item that proofreads the editor text.ChangeStyleAIContextMenuItemA context menu item that rewrites text using a specified style.ShortenAIContextMenuItemA context menu item that shortens the editor text.SummarizeAIContextMenuItemA context menu item that summarizes the editor text.ChangeToneAIContextMenuItemA context menu item that rewrites the editor text using a specified tone.GenerateDescriptionAIContextMenuItemA context menu item that generates the description for an image.TranslateAIContextMenuItemA context menu item that translates editor text into the specified language.

@using DevExpress.AIIntegration.Blazor.RichEdit
@using DevExpress.Blazor.RichEdit

<DxRichEdit>
    <Extensions>
        <SummarizeAIContextMenuItem />
        <ExplainAIContextMenuItem />
        <ProofreadAIContextMenuItem />
        <ExpandAIContextMenuItem />
        <ShortenAIContextMenuItem />
        <AskAssistantAIContextMenuItem />
        <ChangeStyleAIContextMenuItem />
        <ChangeToneAIContextMenuItem />
        <GenerateDescriptionAIContextMenuItem/>
        <TranslateAIContextMenuItem Languages="@("German, French, Chinese")" />
    </Extensions>
</DxRichEdit>

Add a Custom AI-powered Item to the Editor Context Menu

To add a custom item, create a BaseAIContextMenuItem class successor and specify its settings as follows:

public class ShakespeareAIContextMenuItem : BaseAIContextMenuItem {
    [Inject] IAIExtensionsContainer? aIExtensionsContainer { get; set; }

    protected override string DefaultItemText => "Rewrite like Shakespeare";

    protected override Task<TextResponse> GetCommandTextResult(string text) {
        var customExtension = aIExtensionsContainer.CreateCustomPromptExtension();
        return customExtension.ExecuteAsync(new CustomPromptRequest("Rewrite the following text in William Shakespeare style.", text));
    }
}

<DxRichEdit DocumentContent="DocumentContent" CssClass="my-editor">
    <Extensions>
        <ShakespeareAIContextMenuItem />
        ...
    </Extensions>
</DxRichEdit>