Skip to main content
All docs
V25.1
  • BaseAIToolbarItem Class

    Implements the base functionality of AI-powered toolbar items.

    Namespace: DevExpress.AIIntegration.Blazor.HtmlEditor

    Assembly: DevExpress.AIIntegration.Blazor.HtmlEditor.v25.1.dll

    NuGet Package: DevExpress.AIIntegration.Blazor.HtmlEditor

    Declaration

    public abstract class BaseAIToolbarItem :
        BasePopupItem

    Remarks

    Use the BaseAIToolbarItem class to implement a custom AI-powered toolbar item.

    1. Create the BaseAIToolbarItem class successor. Specify its text and provide a custom prompt.

      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));
          }
      }
      
    2. Add the new item to the AdditionalItems collection.

      @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 />
              ...
          </AdditionalItems>
      </DxHtmlEditor>
      

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

    See Also