Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

AI-powered Extension for Blazor Rich Text Editor

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

AI-powered Extension for RichEdit

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

cs
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));
    }
}
razor
<DxRichEdit DocumentContent="DocumentContent" CssClass="my-editor">
    <AdditionalItems>
        <ShakespeareAIContextMenuItem />
        ...
    </AdditionalItems>
</DxRichEdit>