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

• CustomAISettings allows user to process text according to a custom prompt.
• ExpandAISettings expands the text.
• ExplainAISettings explains the text.
• ProofreadAISettings proofreads the text.
• RewriteAISettings rewrite text using a specified style.
• ShortenAISettings shortens the text.
• SummaryAISettings summarizes the text.
• ToneAISettings rewrite text using a specified tone.
• TranslateAISettings translates the text into the specified language.

Register AI Services

Add the following code to the Program.cs file to register AI services in the application:

using DevExpress.AIIntegration;

string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
...
builder.Services.AddDevExpressAI((config) => {
    var client = new AzureOpenAIClient(
        new Uri(azureOpenAIEndpoint),
        new AzureKeyCredential(azureOpenAIKey));
    config.RegisterChatClientOpenAIService(client, "gpt4o");
    config.RegisterOpenAIAssistants(client, "gpt4o");
});

Enable AI-powered extension for the DevExpress Rich Text Editor

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

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

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

<DxRichEdit DocumentContent="DocumentContent" CssClass="my-editor">
    <AdditionalSettings>
        <SummaryAISettings />
        <ExplainAISettings />
        <ProofreadAISettings />
        <ExpandAISettings />
        <ShortenAISettings />
        <CustomAISettings />
        <RewriteAISettings />
        <ToneAISettings />
        <TranslateAISettings Languages="@("German, French, Chinese")" />
    </AdditionalSettings>
</DxRichEdit>

Enable AI-powered extension for the DevExpress HTML Editor

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

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

@using DevExpress.AIIntegration.Blazor.HtmlEditor

<DxHtmlEditor @bind-Markup="Value" CssClass="my-editor" BindMarkupMode="HtmlEditorBindMarkupMode.OnLostFocus">
    <AdditionalSettings>
        <SummaryAISettings />
        <ExplainAISettings />
        <ProofreadAISettings />
        <ExpandAISettings />
        <ShortenAISettings />
        <CustomAISettings />
        <RewriteAISettings />
        <ToneAISettings />
        <TranslateAISettings Languages="@("German, French, Chinese")" />
    </AdditionalSettings>
</DxHtmlEditor>

Files to Review

• RichEdit.razor
• HtmlEditor.razor
• Program.cs

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)