AI-powered Extension for Blazor HTML Editor

• Dec 03, 2024
• 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.

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>