AI-powered Extension for Blazor Rich Text Editor

• Jul 06, 2025
• 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.

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

DevExpress AI-powered extension for Rich Text Editor is compatible with major cloud AI providers and self-hosted language models. Its architecture also allows you to integrate custom AI providers or implement support for proprietary, in-house LLMs.

For a complete list of supported AI providers and detailed integration instructions, see the following help topic: DevExpress AI-powered Extensions for Blazor.

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.

Add Predefined AI-powered Items to the Editor Context Menu

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

AskAssistantAIContextMenuItem

A context menu item that allows user to process editor text according to a custom prompt.

ExpandAIContextMenuItem

A context menu item that expands the editor text.

ExplainAIContextMenuItem

A context menu item that explains the editor text.

ProofreadAIContextMenuItem

A context menu item that proofreads the editor text.

ChangeStyleAIContextMenuItem

A context menu item that rewrites text using a specified style.

ShortenAIContextMenuItem

A context menu item that shortens the editor text.

SummarizeAIContextMenuItem

A context menu item that summarizes the editor text.

ChangeToneAIContextMenuItem

A context menu item that rewrites the editor text using a specified tone.

GenerateDescriptionAIContextMenuItem

A context menu item that generates the description for an image.

TranslateAIContextMenuItem

A context menu item that translates editor text into the specified language.

Razor

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

<DxRichEdit>
    <AdditionalItems>
        <SummarizeAIContextMenuItem />
        <ExplainAIContextMenuItem />
        <ProofreadAIContextMenuItem />
        <ExpandAIContextMenuItem />
        <ShortenAIContextMenuItem />
        <AskAssistantAIContextMenuItem />
        <ChangeStyleAIContextMenuItem />
        <ChangeToneAIContextMenuItem />
        <GenerateDescriptionAIContextMenuItem/>
        <TranslateAIContextMenuItem Languages="@("German, French, Chinese")" />
    </AdditionalItems>
</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:

C#

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));
    }
}

Razor

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