Rich Text Editor and HTML Editor for Blazor - How to integrate AI-powered extensions

This example enables AI-powered extensions for both the DevExpress Blazor Rich Text Editor and HTML Editor. These extensions supply AI functions designed to process text/HTML content.

Implementation Details

Both the DevExpress Blazor Rich Text Editor (DxRichEdit) and Blazor HTML Editor (DxHtmlEditor) ship with an AdditionalItems property. You can populate this property with commands and allow users to process editor text as needs dictate. Available commands for both editors are as follows:

• Ask AI Assistant allows user to process text based on a custom prompt.
• Change Style rewrite text using a specified style.
• Change Tone rewrite text using a specified tone.
• Describe Picture generates the description for an image (for Rich Text Editor only).
• Expand expands text.
• Explain explains text.
• Proofread proofreads text.
• Shorten shortens text.
• Summarize summarizes text.
• Translate translates text into the specified language.

Register AI Services

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 the following code to the Program.cs file to register AI services in the application:

using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = string.Empty;

IChatClient chatClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new AzureKeyCredential(azureOpenAIKey)).AsChatClient(deploymentName);
    
builder.Services.AddDevExpressBlazor();
builder.Services.AddChatClient(config => config.Use(chatClient));
builder.Services.AddDevExpressAI();

Enable AI-powered extension for the DevExpress Blazor Rich Text Editor

AI-powered extension for our Blazor Rich Text Editor adds AI-related commands to the editor's context menu.

You can add predefined commands or implement custom commands as necessary. This example introduces a Rewrite like Shakespeare context menu item.

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

Declare DxRichEdit's AdditionalItems and populate it with commands in the following manner:

@using DevExpress.AIIntegration.Blazor.RichEdit
@using DevExpress.Blazor.RichEdit

<DxRichEdit DocumentContent="DocumentContent" CssClass="my-editor">
    <AdditionalItems>
        <ShakespeareAIContextMenuItem />
        <SummarizeAIContextMenuItem />
        <ExplainAIContextMenuItem />
        <ProofreadAIContextMenuItem />
        <ExpandAIContextMenuItem />
        <ShortenAIContextMenuItem />
        <AskAssistantAIContextMenuItem />
        <ChangeStyleAIContextMenuItem />
        <ChangeToneAIContextMenuItem />
        <TranslateAIContextMenuItem Languages="@("German, French, Chinese")" />
    </AdditionalItems>
</DxRichEdit>

Enable AI-powered extension for the DevExpress Blazor HTML Editor

The AI-powered extension for our Blazor HTML Editor adds AI-related commands to the editor's toolbar.

You can add predefined commands or implement custom commands as necessary. This example introduces a Rewrite like Shakespeare toolbar item.

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

Declare DxHtmlEditor's AdditionalItems and populate it with commands in the following manner:

@using DevExpress.AI.Samples.Blazor.Editors.Components.AdditionalItems
@using DevExpress.AIIntegration.Blazor.HtmlEditor

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

Files to Review

• RichEdit.razor
• HtmlEditor.razor
• ShakespeareAIContextMenuItem.cs
• ShakespeareAIToolbarItem.cs
• Program.cs

Documentation

• DevExpress AI-powered Extensions for Blazor
• AI-powered Extension for Blazor Rich Text Editor
• AI-powered Extension for Blazor HTML Editor

More Examples

• AI Chat for Blazor - How to add DxAIChat component in Blazor, MAUI, WPF, and WinForms applications

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)