# Angular Data Grid AI Toolbar Assistant

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid) provides a built-in AI Toolbar Assistant that allows users to interact with the Grid using natural language prompts. Use this feature to enable your end users to perform complex operations like filtering data, reordering columns, and highlighting rows without having to use the specific UI controls.

> tip For an enhanced user experience with additional search capabilities, prompt suggestions, and streamlined UI, we recommend using the [AI Smart Box](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool). The AI Smart Box combines traditional search, semantic search, and AI-powered operations in a single, unified interface.

The AI Toolbar Assistant interprets user requests and automatically applies the corresponding Grid operations, making data exploration more intuitive and accessible. The toolbar tool consists of a [Window](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window) component and an [AIPrompt](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/aiprompt) component that work together to enable natural language interaction with your custom AI service.

> The demo in this article use a Telerik-hosted AI service for demonstration purposes only. For production applications, you should [implement your own AI service](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) that understands your specific domain, data, and business requirements.

The following example demonstrates a Smart Grid that processes natural language requests for performing data operations, column management, selection, highlighting, and export operations.

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

## Implementation Steps

To configure the Grid's AI Toolbar Assistant:

1. Enable the desired data operations of the Grid that the AI Toolbar Assistant should control:
   ```html
   <kendo-grid 
       [kendoGridBinding]="customers"
       [groupable]="true"
       [sortable]="true"
       filterable="menu">
   </kendo-grid>
   ```

2. Apply the [`kendoGridAIAssistantTool`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective) directive to a [`<kendo-toolbar-button>`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarbuttoncomponent) component, nested within the [`<kendo-toolbar>`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarcomponent) tag:

   ```html
   <kendo-grid ...>
       <kendo-toolbar>
           <kendo-toolbar-button kendoGridAIAssistantTool>
           </kendo-toolbar-button>
       </kendo-toolbar>
   </kendo-grid>
   ```

3. Configure the [`requestUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#requesturl) property to point to your custom AI service endpoint:

   ```html
   <kendo-toolbar-button 
       kendoGridAIAssistantTool
       requestUrl="https://your-ai-service.com/api/grid">
   </kendo-toolbar-button>
   ```

   > 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.

## AI Service Communication

The AI Toolbar Assistant supports three main integration approaches for connecting to your AI service:

* [Automatic Integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#automatic-integration)—The quickest approach where the Grid handles the communication with your AI service automatically.
* [Controlled Integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#controlled-integration)—Automatic AI service communication with request/response customization through event handlers.
* [Manual Integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#manual-integration)—Full control over AI service communication while using the built-in toolbar tool UI.

For detailed information about each integration approach, including code examples and best practices, see [Smart Grid AI Assistant Tools Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup).

## Customization Options

The AI Toolbar Assistant provides various configuration options to customize the experience based on your application requirements:

* [AIPrompt customization](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-assistant#aiprompt-customization)
* [Window appearance](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-assistant#window-appearance)

### AIPrompt Customization

The AI Toolbar Assistant utilizes the [AIPrompt](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/aiprompt) component internally to provide conversational interface. You can customize the AIPrompt interface and user interaction by using the [`aiPromptSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#aipromptsettings) property of the tool.

This property allows you to add [`promptSuggestions`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridaiassistantpromptsettings#promptsuggestions) tailored to your specific use case that can guide users with examples of what your AI service can understand. Furthermore, the [`speechToTextButton`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridaiassistantpromptsettings#speechtotextbutton) setting provides voice input capabilities for enhancing accessibility in your application.

```html HTML
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    [aiPromptSettings]="aiPromptSettings">
</kendo-toolbar-button>
```

```typescript TypeScript
public aiPromptSettings: GridAIAssistantPromptSettings = {
    promptSuggestions: [
        'Sort by Amount descending',
        'Group by account type', 
        'Show only failed transactions', 
        'Filter where currency is USD',
        'Clear filtering'
    ],
    showOutputRating: true,
    speechToTextButton: true
};
```

### Window Appearance

You can also customize the appearance of the [Window](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window) component, in which the AIPrompt of the toolbar tool is rendered.

To achieve this, use the [`aiWindowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#aiwindowsettings) property of the `kendoGridAIAssistantTool` directive, which allows you to control the positioning and visual appearance of the Window to match your application's design and requirements.

```html HTML
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    [aiWindowSettings]="aiWindowSettings">
</kendo-toolbar-button>
```

```typescript TypeScript
public aiWindowSettings: GridAIAssistantWindowSettings = {
    width: 500,
    height: 400,
    title: 'Data Assistant',
    resizable: true,
    draggable: true
};
```

## Suggested Links

* [Smart Grid 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)
* [Angular Grid Row and Cell Highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting)
* [Kendo UI for Angular AIPrompt Overview](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/aiprompt)
* [API Reference of the AIAssistantToolbarDirective](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective)