Smart Search AI-powered Extension

• Nov 20, 2024
• 5 minutes to read

Smart Search works alongside traditional search algorithms to offer a more powerful and user-friendly search experience. It offers results that are more aligned with what the user is seeking, even if the input contains misspellings.

Run Demo

Applies To

• Ribbon Control
• Accordion Control

How It Works

When the user pauses typing in the search field within the Ribbon or Accordion control, the control sends the current search query to an AI service that understands context, synonyms, and user intent beyond exact keyword matches. Once the AI service returns its results, the control filters items accordingly.

Play the following animation to see how AI-powered smart search works in the DevExpress WinForms Ribbon control:

Activate Smart Search

1. Install DevExpress NuGet Packages

1. DevExpress.AIIntegration.WinForms
2. DevExpress.Win.Design (enables design-time features for DevExpress UI controls)

Read the following help topics for information on how to obtain the DevExpress NuGet Feed and install DevExpress NuGet packages:

• Choose Between Offline and Online DevExpress NuGet Feeds
• Install NuGet Packages in Visual Studio, VS Code, and Rider

2. Register AI Client

The following code snippet registers the Azure OpenAI client:

C#

using Microsoft.Extensions.AI;
using DevExpress.AIIntegration;

internal static class Program {
    [STAThread]
    static void Main() {
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        IChatClient asChatClient = new Azure.AI.OpenAI.AzureOpenAIClient(new Uri(AzureOpenAIEndpoint),
            new System.ClientModel.ApiKeyCredential(AzureOpenAIKey))
            .AsChatClient("GPT4o");
        AIExtensionsContainerDesktop.Default.RegisterChatClient(asChatClient);
        Application.Run(new Form1());
    }
    static string AzureOpenAIEndpoint { get { return Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT"); } }
    static string AzureOpenAIKey { get { return Environment.GetEnvironmentVariable("AZURE_OPENAI_APIKEY"); } }
}

VB.NET

Imports Microsoft.Extensions.AI
Imports DevExpress.AIIntegration

Friend Module Program
    <STAThread>
    Sub Main()
        Application.EnableVisualStyles()
        Application.SetCompatibleTextRenderingDefault(False)
        ' Register Azure.OpenAI
        Dim asChatClient As IChatClient = (New Azure.AI.OpenAI.AzureOpenAIClient(New Uri(AzureOpenAIEndpoint), New System.ClientModel.ApiKeyCredential(AzureOpenAIKey))).AsChatClient("GPT4o")
        AIExtensionsContainerDesktop.Default.RegisterChatClient(asChatClient)
        Application.Run(New Form1())
    End Sub
    Private ReadOnly Property AzureOpenAIEndpoint() As String
        Get
            Return Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT")
        End Get
    End Property
    Private ReadOnly Property AzureOpenAIKey() As String
        Get
            Return Environment.GetEnvironmentVariable("AZURE_OPENAI_APIKEY")
        End Get
    End Property
End Module

Tip

Read the following help topic for additional information: How to Register an AI Client.

3. Create and Configure Smart Search Behavior

1. Drop the BehaviorManager component from the Toolbox onto a Form. The Form should contain the DevExpress Ribbon and/or Accordion.

2. Add a SmartSearchBehavior, configure its settings, and attach the behavior to a DevExpress UI control (RibbonControl, AccordionControl). You can do this at design time or in code:

   

   C#

   using DevExpress.AIIntegration.WinForms;
   using DevExpress.XtraBars.Ribbon;
   
   public Form1() {
       InitializeComponent();
       // Displays a search box in the Ribbon control's caption.
       ribbon.OptionsSearchMenu.SearchItemPosition = SearchItemPosition.Caption;
   
       behaviorManager1.Attach<SmartSearchBehavior>(ribbon, behavior => {
           behavior.Properties.ItemDescriptions.AddRange(new AIItemDescription[]{
               new AIItemDescription(itemEnableSystemProtection, "Activates software protection against unauthorized access."),
               new AIItemDescription(itemLogin, "Displays a sign-in or login form."),
               new AIItemDescription(itemSettings, "Displays settings and options related to security and protection."),
               new AIItemDescription(itemRBAC, "Manages user access permissions and role-based access control (RBAC)."),
               new AIItemDescription(itemBackup, "Backs up (creates a copy of) sensitive data (information)."),
               new AIItemDescription(itemRestore, "Restores data from a backup database."),
           });
       });
   }
   

   VB.NET

   Imports DevExpress.AIIntegration.WinForms
   Imports DevExpress.XtraBars.Ribbon
   
   Public Sub New()
       InitializeComponent()
       ' Displays a search box in the Ribbon control's caption.
       ribbon.OptionsSearchMenu.SearchItemPosition = SearchItemPosition.Caption
   
       behaviorManager1.Attach(Of SmartSearchBehavior)(ribbon, Sub(behavior)
           behavior.Properties.ItemDescriptions.AddRange(New AIItemDescription(){
               New AIItemDescription(itemEnableSystemProtection, "Activates software protection against unauthorized access."),
               New AIItemDescription(itemLogin, "Displays a sign-in or login form."),
               New AIItemDescription(itemSettings, "Displays settings and options related to security and protection."),
               New AIItemDescription(itemRBAC, "Manages user access permissions and role-based access control (RBAC)."),
               New AIItemDescription(itemBackup, "Backs up (creates a copy of) sensitive data (information)."),
               New AIItemDescription(itemRestore, "Restores data from a backup database.")
           })
       End Sub)
   End Sub
   

SmartSearchBehavior APIs

Once you attach the SmartSearchBehavior to a control, you should describe items so that Smart Search can find appropriate items. In the context of Smart Search, an item refers to a BarItem when working with a RibbonControl, or an AccordionControlElement when working with an AccordionControl.

Item Descriptions

Note

Item descriptions are optional if an item’s text or caption is specified (for example, a bar item’s Caption property or accordion UI element’s Text property is set to a non-empty string). Although Smart Search attempts to find items based on their text/caption, we recommend that you also describe items for improved accuracy.

Use the SmartSearchBehavior.Properties.ItemDescriptions collection property to add descriptions (AIItemDescription) for certain items. Each AIItemDescription object in the collection has two properties:

1. AIItemDescription.Item: An item (BarItem or AccordionControlElement).
2. AIItemDescription.Description: A string that describes the item.

Excluded Items

If you want to exclude a specific item from Smart Search, you can add this item to the SmartSearchBehavior.Properties.ExcludedItems collection. This allows you to exclude Ribbon commands (items) or Accordion UI elements from being affected by Smart Search.

Ribbon and Accordion Control Specifics

Smart Search in Ribbon

• The bar item must be visible. The bar items’s Visibility property must be set to BarItemVisibility.Always or BarItemVisibility.OnlyInRuntime.
• The bar item’s Caption property should be set to a non-empty string if the item’s description is not specified in SmartSearch behavior properties.
• BarHeaderItem and BarStaticItem do not support Smart Paste.

Smart Search in Accordion

• The UI element must be visible. Its Visible property must be set to true.
• The UI element’s Text property should be set to a non-empty string if the item’s description is not specified in SmartSearch behavior properties.