New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid AI Smart Box

Updated on Feb 6, 2026

The Angular Grid AI Smart Box is a versatile toolbar tool that unifies search and AI capabilities in a single interface. It offers three distinct modes that you can enable independently or in combination to provide flexible data exploration for your users.

The AI Smart Box allows users to explore Grid data through traditional keyword search, semantic search that understands meaning and context, or AI-powered natural language commands.

The demo below uses a Telerik-hosted AI service for AI-powered Grid control and a third-party transformer model for semantic search, both for demonstration purposes. For production applications, implement your own AI service and semantic matching techniques suited to your data and requirements.

In the following example, you can switch between modes in the AI Smart Box to explore each way of interaction. Use the keyword search for exact matches, try semantic search with queries like "home entertainment" to find related items like "Board Game Set", or ask the AI Assistant to apply Grid operations in natural language.

Change Theme

Theme

Loading ...

Implementation Steps

To configure the Grid's AI Smart Box:

Add the <kendo-grid-smartbox-tool> component nested within the <kendo-toolbar> tag:

html

<kendo-grid [kendoGridBinding]="customers">
    <kendo-toolbar>
        <kendo-grid-smartbox-tool>
        </kendo-grid-smartbox-tool>
    </kendo-toolbar>
</kendo-grid>

Enable the modes you want to show in the AI Smart Box using the searchMode, semanticSearchMode, and aiAssistantMode properties:

HTML
<kendo-grid [kendoGridBinding]="customers">
    <kendo-toolbar>
        <kendo-grid-smartbox-tool
            [searchMode]="true"
            [semanticSearchMode]="true"
            [aiAssistantMode]="aiAssistantSettings">
        </kendo-grid-smartbox-tool>
    </kendo-toolbar>
</kendo-grid>
TypeScript
public aiAssistantSettings: GridSmartBoxAIAssistantSettings = {
    enabled: true,
    promptSuggestions: [
        'Show top customers by revenue',
        'Filter active accounts',
        'Group by region'
    ]
};

Search mode applies filters automatically when the kendoGridBinding directive is used. You can optionally handle the search event to customize the default search behavior.

Configure the requestUrl property for AI Assistant mode to point to your AI service endpoint:
typescript
```
public aiAssistantSettings: GridSmartBoxAIAssistantSettings = {
    enabled: true,
    promptSuggestions: [
        'Show top customers by revenue',
        'Filter active accounts',
        'Group by region'
    ],
    requestUrl: 'https://your-ai-service.com/api/grid'
};
```
The requestUrl defines the endpoint where your natural language queries will be processed. It should point to your custom AI service that can understand your domain-specific data and business logic. To explore the available integration scenarios, see AI Assistant Tools Setup.

Handle the semanticSearch event to implement your semantic search logic:

HTML
<kendo-grid [kendoGridBinding]="customers">
    <kendo-toolbar>
        <kendo-grid-smartbox-tool
            [searchMode]="true"
            [semanticSearchMode]="true"
            [aiAssistantMode]="aiAssistantSettings"
            (semanticSearch)="onSemanticSearch($event)">
        </kendo-grid-smartbox-tool>
    </kendo-toolbar>
</kendo-grid>
TypeScript
public async onSemanticSearch(event: GridSmartBoxSemanticSearchEvent): Promise<void> {
    const query = event.searchValue;
    
    // Generate embedding for the search query
    const queryEmbedding = await this.semanticService.embed(query);
    
    // Compare query embedding with pre-computed Grid data embeddings
    const results = this.embeddedData
        .map(item => ({
            ...item,
            similarity: this.semanticService.cosineSimilarity(queryEmbedding, item.embedding)
        }))
        .filter(x => x.similarity > 0.35)  // Apply similarity threshold
        .sort((a, b) => b.similarity - a.similarity);
    
    // Update Grid data with semantically similar results
    this.gridData = results;
}

Encapsulate your semantic matching mechanism in a separate service. The demo uses the SemanticSearchService to load a transformer model, generate vector embeddings, and calculate similarity scores.

Available Modes

The AI Smart Box provides three modes that you can enable independently or in combination. Each mode serves different use cases and offers specific configuration options.

Search Mode Semantic Search Mode AI Assistant Mode

The Search mode is enabled by default in the AI Smart Box and provides traditional keyword-based filtering across Grid columns. As users type, the AI Smart Box generates filter expressions that match the search value against the Grid columns. Use the searchMode property to further tailor the Search mode to your specific needs.

By default, the Grid automatically applies the search filter when the kendoGridBinding directive is used. You can optionally handle the search event to customize the search behavior.

HTML
<kendo-grid-smartbox-tool [searchMode]="searchSettings">
</kendo-grid-smartbox-tool>
TypeScript
public searchSettings: GridSmartBoxSearchSettings = {
    enabled: true,
    placeholder: 'Search customers...',
    fields: ['name', 'email', 'company']
};

For more details about Search mode configuration, see the Angular Data Grid Searching article.

Configure the semanticSearchMode property of the AI Smart Box to enable semantic search functionality that interprets user intent and matches related terms, synonyms, and contextual meanings. This intelligent matching is particularly valuable when users might not know the exact terminology used in your Grid data.

When users enter a search term, handle the semanticSearch event to implement your semantic matching logic using vector embeddings or other techniques to find conceptually related content.

HTML
<kendo-grid-smartbox-tool 
    [semanticSearchMode]="semanticSearchSettings"
    (semanticSearch)="onSemanticSearch($event)">
</kendo-grid-smartbox-tool>
TypeScript
public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
    enabled: true,
    placeholder: 'Describe what you need...'
};

public async onSemanticSearch(event: GridSmartBoxSemanticSearchEvent): Promise<void> {
    // Implement your semantic search logic here
    // Use a desired semantic matching technique to filter and update the Grid data
    // based on the search value
}

For more information about implementing semantic search in the AI Smart Box, see the Semantic Search article.

Use the aiAssistantMode property to enable AI Assistant mode, which allows users to interact with the Grid data through natural language commands. Users can apply any supported Grid operation—including filtering, sorting, column management, data export, and row highlighting.

Configure the AI Assistant mode behavior through the GridSmartBoxAIAssistantSettings object. You can guide users with predefined prompts using the promptSuggestions property and enable automatic communication with your custom AI service by setting the requestUrl property.

HTML
<kendo-grid-smartbox-tool [aiAssistantMode]="aiAssistantSettings">
</kendo-grid-smartbox-tool>
TypeScript
public aiAssistantSettings: GridSmartBoxAIAssistantSettings = {
    enabled: true,
    requestUrl: 'https://your-ai-service.com/api/grid',
    promptSuggestions: [
        'Show top customers by revenue',
        'Filter active accounts',
        'Group by region'
    ]
};

For more information about configuring AI Assistant mode and available integration options, see the AI Assistant Tools Setup article. To understand how to set up your custom AI service, see the AI Service Setup article.

Setting the Active Mode

When you enable multiple modes in the AI Smart Box, users can choose their preferred interaction method by using the seamless mode-switching interface of the tool.

By default, the Search mode is initially selected when users open the AI Smart Box tool. You can customize this behavior and manually specify the mode that should be initially selected by using the activeMode property:

html

<kendo-grid-smartbox-tool
    [searchMode]="searchSettings"
    [semanticSearchMode]="semanticSearchSettings"
    [aiAssistantMode]="aiAssistantSettings"
    activeMode="aiAssistant">
</kendo-grid-smartbox-tool>

Customization Options

The AI Smart Box provides several customization options to tailor the appearance and behavior of the tool to your application's needs. You can configure placeholder text, query history settings, and customize the appearance of suggestions and history items using template directives.

Placeholder Text

The AI Smart Box allows you to customize the placeholder text that appears in the input field for each mode.

You can define a global placeholder for all modes through the placeholder property of the AI Smart Box tool:

HTML

<kendo-grid-smartbox-tool 
    [searchMode]="searchSettings"
    [semanticSearchMode]="semanticSearchSettings"
    placeholder="Search or ask...">
</kendo-grid-smartbox-tool>

To override the global placeholder for individual modes, set the placeholder property within the settings object of the respective AI Smart Box mode. For example, to customize the placeholder for the Semantic Search mode, see Semantic Search Placeholder Text.

Query History

The AI Smart Box maintains a history of recent queries for each enabled mode, allowing users to quickly reuse previous searches or commands.

You can configure global history behavior through the history property of the AI Smart Box tool, which applies to all modes unless a mode provides its own history settings. The default global history size is 5 queries, and the default timestamp format is 'HH:mm:ss'.

HTML
<kendo-grid-smartbox-tool 
    [searchMode]="searchSettings"
    [history]="historySettings">
</kendo-grid-smartbox-tool>
TypeScript
public historySettings: GridSmartBoxHistorySettings = {
    size: 5,
    timestampFormat: 'h:mm a'
};

For mode-specific history configuration, set the history property within the settings object of the respective AI Smart Box mode. For example, to configure the history settings for the Semantic Search mode, see Semantic Search Query History.

Suggestion Template

The AI Smart Box provides a GridSmartBoxPromptSuggestionTemplateDirective to customize the appearance of prompt suggestions in AI Assistant mode. The template provides access to the current suggestion through the implicit context, allowing you to add icons, styling, or additional markup.

html

<kendo-grid-smartbox-tool [aiAssistantMode]="aiAssistantSettings">
    <ng-template kendoGridSmartBoxPromptSuggestionTemplate let-suggestion>
        <li class="k-list-item custom-suggestion">
            <kendo-svgicon [icon]="sparklesIcon"></kendo-svgicon>
            <span>{{ suggestion }}</span>
        </li>
    </ng-template>
</kendo-grid-smartbox-tool>

History Item Template

You can use the GridSmartBoxHistoryItemTemplateDirective to customize the content of history items and format how previous queries are displayed. This template applies to all modes that have history enabled. The template receives a history item object with text, timestamp, and format properties.

html

<kendo-grid-smartbox-tool [semanticSearchMode]="semanticSearchSettings">
    <ng-template kendoGridSmartBoxHistoryItemTemplate let-item>
        <li class="k-list-item custom-history-item">
            <span class="history-text">{{ item.text }}</span>
            <span class="history-time">{{ item.timestamp | date: item.format }}</span>
        </li>
    </ng-template>
</kendo-grid-smartbox-tool>