AI-powered Document Editing for Blazor HTML Editor

• Mar 10, 2026
• 3 minutes to read

DevExpress AI-powered extension for HTML Editor adds AI-related commands to the editor’s toolbar. The commands are designed to process text/HTML content.

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 HTML 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 Toolbar

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

AskAssistantAIToolbarItemA toolbar item that allows user to process editor text according to a custom prompt.ExpandAIToolbarItemA toolbar item that expands the editor text.ExplainAIToolbarItemA toolbar item that explains the editor text.ProofreadAIToolbarItemA toolbar item that proofreads the editor text.ChangeStyleAIToolbarItemA toolbar item that rewrites text using a specified style.ShortenAIToolbarItemA toolbar item that shortens the editor text.SummarizeAIToolbarItemA toolbar item that summarizes the editor text.ChangeToneAIToolbarItemA toolbar item that rewrites the editor text using a specified tone.TranslateAIToolbarItemA toolbar item that translates editor text into the specified language.

@using DevExpress.AIIntegration.Blazor.HtmlEditor

<DxHtmlEditor @bind-Markup="Value" BindMarkupMode="HtmlEditorBindMarkupMode.OnLostFocus">
    <Extensions>
        <SummarizeAIToolbarItem />
        <ExplainAIToolbarItem />
        <ProofreadAIToolbarItem />
        <ExpandAIToolbarItem />
        <ShortenAIToolbarItem />
        <AskAssistantAIToolbarItem />
        <ChangeStyleAIToolbarItem />
        <ChangeToneAIToolbarItem />
        <TranslateAIToolbarItem Languages="@("English, German, French, Chinese")" />
    </Extensions>
</DxHtmlEditor>

@code {
    public string Value { get; set; }
}

Add a Custom AI-powered Item to the Editor Toolbar

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

public class ShakespeareAIToolbarItem: BaseAIToolbarItem {
    [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));
    }
}

<DxHtmlEditor @bind-Markup="Value" CssClass="my-editor" BindMarkupMode="HtmlEditorBindMarkupMode.OnLostFocus">
    <Extensions>
        <ShakespeareAIToolbarItem />
        ...
    </Extensions>
</DxHtmlEditor>