Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

AI-powered Extension for Blazor HTML Editor

  • 2 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.

AI-powered Extension for HtmlEditor

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

Install NuGet packages and register the AI service to add AI-powered extension to your application.

Note

DevExpress AI-powered extensions follow the “bring your own key” principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered Extensions in your application.

#Add Predefined AI-powered Items to the Editor Toolbar

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

AskAssistantAIToolbarItem
A toolbar item that allows user to process editor text according to a custom prompt.
ExpandAIToolbarItem
A toolbar item that expands the editor text.
ExplainAIToolbarItem
A toolbar item that explains the editor text.
ProofreadAIToolbarItem
A toolbar item that proofreads the editor text.
ChangeStyleAIToolbarItem
A toolbar item that rewrites text using a specified style.
ShortenAIToolbarItem
A toolbar item that shortens the editor text.
SummarizeAIToolbarItem
A toolbar item that summarizes the editor text.
ChangeToneAIToolbarItem
A toolbar item that rewrites the editor text using a specified tone.
TranslateAIToolbarItem
A toolbar item that translates editor text into the specified language.
Razor
@using DevExpress.AIIntegration.Blazor.HtmlEditor

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

cs
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));
    }
}
razor
<DxHtmlEditor @bind-Markup="Value" CssClass="my-editor" BindMarkupMode="HtmlEditorBindMarkupMode.OnLostFocus">
    <AdditionalItems>
        <ShakespeareAIToolbarItem />
        ...
    </AdditionalItems>
</DxHtmlEditor>