Skip to main content
All docs
V24.2

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.
@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:

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">
    <AdditionalItems>
        <ShakespeareAIToolbarItem />
        ...
    </AdditionalItems>
</DxHtmlEditor>