AI-powered Extension for Blazor Rich Text Editor

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

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

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

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

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