# Angular Data Grid AI Smart Box

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) and [semantic matching techniques](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/semantic-search#semantic-search-implementation) 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/ai/ai-smart-box/source.txt)

## Implementation Steps

To configure the Grid's AI Smart Box:

1. Add the [`<kendo-grid-smartbox-tool>`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent) component nested within the [`<kendo-toolbar>`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarcomponent) tag:

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

2. Enable the modes you want to show in the AI Smart Box using the [`searchMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#searchmode), [`semanticSearchMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#semanticsearchmode), and [`aiAssistantMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/databindingdirective) directive is used. You can optionally handle the [`search`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#search) event to customize the default search behavior.

3. Configure the [`requestUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxaiassistantsettings#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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) that can understand your domain-specific data and business logic. To explore the available integration scenarios, see [AI Assistant Tools Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup).

4. Handle the [`semanticSearch`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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)  // Exclude weak semantic matches below the 0.35 threshold.
           .sort((a, b) => b.similarity - a.similarity);

       // Update Grid data with semantically similar results
       this.gridData = results;
   }
   ```

5. If you enabled Semantic Search mode, 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.

<TabStrip>
<TabStripTab title="Search 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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#searchmode) property to further tailor the Search mode to your specific needs.

By default, the Grid automatically applies the search filter when the [`kendoGridBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/databindingdirective) directive is used. You can optionally handle the [`search`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching) article.

</TabStripTab>
<TabStripTab title="Semantic Search Mode">

Configure the [`semanticSearchMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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> {
    // TODO: filter and update Grid data with your semantic matching service.
}
```

> For more information about implementing semantic search in the AI Smart Box, see the [Semantic Search](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/semantic-search) article.

</TabStripTab>
<TabStripTab title="AI Assistant Mode">

Use the [`aiAssistantMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid#supported-operations)—including filtering, sorting, column management, data export, and row highlighting.

Configure the AI Assistant mode behavior through the [`GridSmartBoxAIAssistantSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxaiassistantsettings) object. You can guide users with predefined prompts using the [`promptSuggestions`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxaiassistantsettings#promptsuggestions) property and enable automatic communication with your custom AI service by setting the [`requestUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridsmartboxaiassistantsettings#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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup) article. To understand how to set up your custom AI service, see the [AI Service Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) article.

</TabStripTab>
</TabStrip>

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool#placeholder-text), [query history settings](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool#query-history), and the appearance of [suggestions](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool#suggestion-template) and [history items](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool#history-item-template) through 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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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>
```

> tip 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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#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'
};
```

> tip 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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/semantic-search#query-history).

### Suggestion Template

The AI Smart Box provides a [`GridSmartBoxPromptSuggestionTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/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>
```

## Suggested Links

* [Semantic Search Mode](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/semantic-search)
* [Angular Data Grid Searching](https://www.telerik.com/kendo-angular-ui-develop/components/grid/searching)
* [AI Assistant Tools Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup)
* [AI Service Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup)
* [Smart Grid Overview](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid)
* [Angular Grid Configuring the ToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/grid/toolbar/grid-toolbar)
* [Grid Data Operations](https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-operations)
* [API Reference of the GridSmartBoxToolComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent)