Smart Search AI-powered Extension
- 4 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 spelling errors.
Applies To
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.
Activate Smart Search
To activate Smart Search you should install DevExpress AI NuGet packages and register the AI client.
Install DevExpress NuGet Packages
DevExpress.AIIntegration.WpfDevExpress.Wpf.Ribbon/DevExpress.Wpf.AccordionTip
You can also install a unified NuGet package (
DevExpress.Wpf) if you want to use most UI controls that ship as part of the DevExpress WPF UI Library.
See 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
Register AI Client
See the following help topic for information on required NuGet packages and system requirements: Register an AI Client.
The following code snippet registers an Azure OpenAI client at application startup within the AIExtensionsContainerDesktop container:
using Azure.AI.OpenAI;
using DevExpress.AIIntegration;
using DevExpress.Xpf.Core;
using Microsoft.Extensions.AI;
using System;
using System.Windows;
namespace AIAssistantApp {
public partial class App : Application {
static App() {
CompatibilitySettings.UseLightweightThemes = true;
}
protected override void OnStartup(StartupEventArgs e) {
base.OnStartup(e);
ApplicationThemeHelper.ApplicationThemeName = "Win11Light";
// For example, ModelId = "gpt-4o-mini"
IChatClient azureChatClient = new Azure.AI.OpenAI.AzureOpenAIClient(new Uri(AzureOpenAIEndpoint),
new System.ClientModel.ApiKeyCredential(AzureOpenAIKey)).GetChatClient(ModelId).AsIChatClient();
AIExtensionsContainerDesktop.Default.RegisterChatClient(azureChatClient);
}
}
}
Attach Smart Search Behavior
Attach the SmartSearchBehavior to a control (Themed Window, Accordion Control).
Tip
You can also use a control’s smart tag menu to attach the SmartSearchBehavior at design time.
Example: Ribbon Control
The following code snippet attaches the SmartSearchBehavior to a Themed Window with the integrated Ribbon control:
<dx:ThemedWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:dxai="http://schemas.devexpress.com/winfx/2008/xaml/ai"
xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
x:Class="DXSmartSearch.MainWindow"
Title="MainWindow" Height="800" Width="700"
WindowKind="Ribbon" SearchItemDisplayMode="Right" SearchDelay="300">
<dxmvvm:Interaction.Behaviors>
<dxai:SmartSearchBehavior"/>
</dxmvvm:Interaction.Behaviors>
<Grid x:Name="mainGrid">
<dxr:RibbonControl x:Name="ribbonControl" RibbonStyle="Office2019">
<!--Ribbon configuration is omitted for brevity.-->
</dxr:RibbonControl>
</Grid>
</dx:ThemedWindow>
using DevExpress.AIIntegration.Wpf;
using DevExpress.Mvvm.UI.Interactivity;
using DevExpress.Xpf.Bars;
using DevExpress.Xpf.Core;
using System.Windows;
namespace DXSmartSearch {
public partial class MainWindow : ThemedWindow {
public MainWindow() {
InitializeComponent();
this.SearchItemDisplayMode = SearchItemDisplayMode.Right;
this.SearchDelay = 300;
SmartSearchBehavior behavior = new SmartSearchBehavior();
Interaction.GetBehaviors(this).Add(behavior);
}
}
}
Example: Accordion Control
The following code snippet attaches the SmartSearchBehavior to an Accordion control:
<dx:ThemedWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:dxai="http://schemas.devexpress.com/winfx/2008/xaml/ai"
xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion"
x:Class="DXSmartSearch.MainWindow"
Title="MainWindow" Height="800" Width="700">
<Grid x:Name="mainGrid">
<dxa:AccordionControl x:Name="accordionControl"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="180" Height="300"
ShowSearchControl="True">
<dxmvvm:Interaction.Behaviors>
<dxai:SmartSearchBehavior />
</dxmvvm:Interaction.Behaviors>
<!--Accordion configuration is omitted for brevity.-->
</dxa:AccordionControl>
</Grid>
</dx:ThemedWindow>
SmartSearchBehavior APIs
In the context of Smart Search, an item refers to a BarItem when working with a RibbonControl, or an AccordionItem when working with an AccordionControl.
Item Descriptions
Item descriptions are optional if an item’s content or header/caption is specified (for example, BarItem.Content and BarItem.Description properties or accordion UI element’s Header property is set to a non-empty string). Although Smart Search attempts to find items based on their text, we recommend that you also describe items for improved accuracy.
Use the ItemDescription attached property to add descriptions to certain items:
<dxr:RibbonPageGroup Caption="System Protection">
<dxb:BarButtonItem Content="Enable Protection"
dxai:SmartSearchBehavior.ItemDescription="Activates software protection against unauthorized access." />
<dxb:BarButtonItem Content="Login"
dxai:SmartSearchBehavior.ItemDescription="Displays a sign-in or login form." />
<dxb:BarButtonItem Content="Settings"
dxai:SmartSearchBehavior.ItemDescription="Displays settings and options related to security and protection." />
</dxr:RibbonPageGroup>
Excluded Items
Enable the HideFromSearch option for items to exclude them from both regular and smart searches:
<dxb:BarButtonItem Content="Help" dxb:BarItemSearchSettings.HideFromSearch="True" />
ThemedWindow Search Settings
The following table lists additional settings that allow you to customize search experience based on your preferences:
| Property Name | Description |
|---|---|
| SearchItemDisplayMode | Specifies the visibility and position of the search box in a ThemedWindow. |
| SearchDelay | Specifies the delay (in milliseconds) before the search operation starts after the user stops typing in the search box of a ThemedWindow. |
| SearchItemFocusShortcut | Specifies the hotkey that focuses the search box in a ThemedWindow. |