ASP.NET Web Forms - Integrate AI-powered Extensions into HTML Editor and Rich Text Editor

This example adds AI-powered extensions to our ASP.NET Web Forms HTML Editor and Rich Text Editor. These extensions introduce AI functions designed to process text/HTML content.

Both the HTML Editor (ASPxHtmlEditor) and Rich Text Editor (ASPxRichEdit) contain a custom AI Assistant ribbon tab populated with the following AI-powered commands:

• Change Style: rewrites text using the specified style

• Change Tone: rewrites text using the specified tone

• Expand: expands text

• Explain: explains text

• Proofread: proofreads text

• Shorten: shortens text

• Summarize: summarizes text

• Translate: translates text into the specified language

For a full list of DevExpress AI-powered extensions and corresponding registration methods, refer to the following help topic: AI-powered Extensions.

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.

To register AI Services and activate AI-powered extensions, configure your application as follows:

• Add the following code to the Global.asax.cs file:

  void Application_Start(object sender, EventArgs e) {
      string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
      string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
      var defaultAIContainer = new AIExtensionsContainerDefault();
      var azureOpenAIClient = new AzureOpenAIClient(
          new Uri(azureOpenAIEndpoint),
          new ApiKeyCredential(azureOpenAIKey));
  
      var chatClient = azureOpenAIClient.GetChatClient("gpt-4o-mini").AsIChatClient();
      defaultAIContainer.RegisterChatClient(chatClient);
      Application["AIService"] = defaultAIContainer;
  }

• Add the AIHelper.cs service to your application (copy corresponding files from the Models folder).

Note: We use the following versions of Microsoft.Extensions.AI.* libraries in our source code:

• Microsoft.Extensions.AI | 9.7.1
• Microsoft.Extensions.AI.OpenAI | 9.7.1-preview.1.25365.4

Refer to the following announcement for additional information: DevExpress.AIIntegration moves to a stable version.

Add AI-powered Commands to the DevExpress ASP.NET Web Forms HTML Editor

1. Create a new AI Assistant Ribbon tab and add it to the Ribbon tab collection using the ASPxHtmlEditor.RibbonTabs property. Populate the tab with items as needs dictate (HtmlEditor.aspx.cs).

2. Add an ASPxCallback component to page markup.

3. Handle the ASPxHtmlEditor.CustomCommand event to process custom command clicks (HtmlEditor.aspx). In the handler, obtain the command text and pass it to the ASPxClientCallback.PerformCallback method as a parameter.

   function OnCustomCommand(s, e) {
       if (e.commandName.startsWith('AI')) {
           const command = e.commandName.split(':')[1];
           const selectedText = s.GetSelection().GetText();
           if (selectedText !== '') {
               htmlEditor.ShowLoadingPanel();
               pendingCommand = command.split("-")[0];
               callback.PerformCallback(JSON.stringify({ Command: command, Text: selectedText }));
           }
           else {
               alert('Please select some text');
           }
       }
   }

4. Handle the ASPxCallback.Callback event to pass command text to the AIHelper service and call the corresponding AI-powered method. To access modified data on the client, save the AI service response to ASPxCallBack.JSProperties.

   protected async void ASPxCallback1_Callback(object source, CallbackEventArgs e) {
       ASPxCallback callback = (ASPxCallback)source;
       var aiRequestData = JsonSerializer.Deserialize<AIHelper.AIRequestData>(e.Parameter);
       var aiResponse = await AIHelper.GetResponseAsync(aiRequestData);
   
       callback.JSProperties["cpText"] = aiResponse;
   }

5. Handle the ASPxCallback.CallbackComplete event to display modified text as needs dictate. This example opens a popup window and allows users to apply changes or copy modified text to the clipboard.

   function OnCallbackComplete(s, e) {
       htmlEditor.HideLoadingPanel();
       popup.SetHeaderText(pendingCommand);
       aiTextMemo.SetText(s.cpText);
       popup.Show();
       pendingCommand = "";
   }
   
   function OnCopyClick(s, e) {
       if (navigator.clipboard.writeText) {
           navigator.clipboard.writeText(aiTextMemo.GetText());
       }
       popup.Hide();
   }
   
   function OnReplaceClick(s, e) {
       htmlEditor.GetSelection().SetHtml(aiTextMemo.GetText(), true);
       popup.Hide();
   }

Add AI-powered Commands to the DevExpress ASP.NET Web Forms Rich Text Editor

1. Create a new AI Assistant Ribbon tab and add it to the Ribbon tab collection using the ASPxRichEdit.RibbonTabs property. Populate the tab with items as needs dictate (RichEdit.aspx.cs).

2. Add an ASPxCallback component to page markup.

3. Handle the ASPxRichEdit.CustomCommandExecuted event to process custom command clicks (RichEdit.aspx). In the handler, obtain the command text and pass it to the ASPxClientCallback.PerformCallback method as a parameter.

   function OnCustomCommandExecuted(s, e) {
       if (e.commandName.startsWith('AI')) {
           const command = e.commandName.split(':')[1];
           if (s.selection.intervals.length > 0) {
               const selectedInterval = s.selection.intervals[0];
               if (selectedInterval.length > 0) {
                   const selectedText = s.document.activeSubDocument.getTextByInterval(selectedInterval);
                   richEdit.loadingPanel.show();
                   pendingCommand = command.split("-")[0];
                   callback.PerformCallback(JSON.stringify({ Command: command, Text: selectedText }));
               } else {
                   alert('Please select some text');
               }
           }
       }
   }

4. Handle the ASPxCallback.Callback event to pass command text to the AIHelper service and call the corresponding AI-powered method. To access modified data on the client, save the AI service response to ASPxCallBack.JSProperties.

   protected async void ASPxCallback1_Callback(object source, CallbackEventArgs e) {
       ASPxCallback callback = (ASPxCallback)source;
       var aiRequestData = JsonSerializer.Deserialize<AIHelper.AIRequestData>(e.Parameter);
       var aiResponse = await AIHelper.GetResponseAsync(aiRequestData);
   
       callback.JSProperties["cpText"] = aiResponse;
   }

5. Handle the ASPxCallback.CallbackComplete event to display modified text as needs dictate. This example opens a popup window and allows users to apply changes or copy modified text to the clipboard.

   function OnCallbackComplete(s, e) {
       richEdit.loadingPanel.hide();
       popup.SetHeaderText(pendingCommand);
       aiTextMemo.SetText(s.cpText);
       popup.Show();
       pendingCommand = "";
   }
   
   function OnCopyClick(s, e) {
       if (navigator.clipboard.writeText) {
           navigator.clipboard.writeText(aiTextMemo.GetText());
       }
       popup.Hide();
   }
   
   function OnReplaceClick(s, e) {
       richEdit.commands.beginUpdate();
       richEdit.commands.delete.execute();
       richEdit.commands.insertText.execute(aiTextMemo.GetText());
       richEdit.commands.endUpdate();
       popup.Hide();
   }

Files to Review

• HtmlEditor.aspx / HtmlEditor.aspx.cs
• RichEdit.aspx / RichEdit.aspx.cs
• AIHelper.cs
• Global.asax.cs

Documentation

• AI Integration
• ASP.NET Web Forms HTML Editor
• ASP.NET Web Forms Rich Text Editor

More Examples

• Integrate DevExpress AI-powered Text Extensions into Console, WinForms, and WPF Apps
• Blazor Rich Text Editor and HTML Editor - Integrate AI-powered extensions

Does This Example Address Your Development Requirements/Objectives?

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