Angular Grid Smart Grid AI Toolbar Assistant

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

The Angular Grid provides a built-in AI Assistant toolbar tool that allows users to interact with the Grid using natural language prompts. Use this feature to enable your end users to perform complex data operations like sorting, filtering, grouping, and highlighting without having to use the specific UI controls.

The AI 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 component and an AIPrompt component that work together to enable natural language interaction with your custom AI service.

The demos in this article use a Telerik-hosted AI service for demonstration purposes only. For production applications, you should implement your own AI service that understands your specific domain, data, and business requirements.

The following example demonstrates a Grid with AI Assistant functionality that processes natural language requests for data operations:

Change Theme

Theme

Loading ...

To configure the Grid's AI Assistant toolbar tool:

Enable the desired data operations of the Grid that the AI Assistant should control:

The AI Assistant tool can perform sorting, filtering, and grouping in the Grid out of the box. Enable the corresponding Grid properties (filterable, sortable, groupable) depending on the operations that you want to support in your application.
html
```
<kendo-grid 
    [kendoGridBinding]="customers"
    [groupable]="true"
    [sortable]="true"
    filterable="menu">
</kendo-grid>
```

Apply the kendoGridAIAssistantTool directive to a <kendo-toolbar-button> component, nested within the <kendo-toolbar> tag:

html

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

Configure the 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 that can understand your domain-specific data and business logic.

AI Service Integration

The AI Assistant toolbar tool supports three main integration approaches depending on how you want to handle AI service communication:

Automatic integration
Controlled integration
Manual integration

Automatic Integration

In the automatic approach, the AI Assistant toolbar tool handles all communication with your AI service internally through HTTP requests. You simply need to configure the 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>

Request Format

When using automatic integration, the AI Assistant sends HTTP requests using Angular's HttpClient.request method with the following default configuration:

method—"POST"
url—The configured requestUrl
options—Default request options of type GridToolbarAIRequestOptions

The request body contains the following information:

role—The user role (by default, "user").
contents—An array containing the user's prompt text.
columns—An array of Grid column information with the respective field names.

Your AI service must be designed to accept this specific request structure and process the user's natural language queries accordingly.

Response Format

The format of the responses returned by your AI service must be of type GridToolbarAIRequestResponse. The GridToolbarAIRequestResponse object contains properties for the following Grid functionalities:

sort—Accepts an array of SortDescriptor objects specifying field names and sort directions.
filter—Accepts a CompositeFilterDescriptor object with filter conditions and logic operators.
group—Accepts an array of GroupDescriptor objects defining the fields to group by.

Use these properties when your AI service determines that a user's natural language request should trigger the corresponding data operation in the Grid.

For example, if the user enters a question that states "Sort by amount descending and group by account type", the returned response from the service can look as follows:

typescript

{
    messages: [
        'Sorted by the field "Amount" in desc order.',
        'Grouped by the field “AccountType” in desc order.',
    ],
    sort: [{ field: 'Amount', dir: 'desc' }],
    group: [{ field: 'AccountType', dir: 'desc' }]
}

The messages array is required and should contain human-readable descriptions of the operations performed. All other properties are optional and will only be applied if present in the response.

Controlled Integration

The controlled integration approach combines the convenience of automatic HTTP handling with the flexibility to customize requests and responses. In this approach, you can provide a requestUrl for automatic request handling while also implementing the promptRequest event to modify request options or add custom logic before the request is sent.

This approach is ideal when you want to:

Use the built-in HTTP request handling but customize headers, authentication, or request body.
Add custom validation or preprocessing logic before sending requests.
Implement custom error handling or response processing while maintaining automatic Grid operations.

html
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    requestUrl="https://your-ai-service.com/api/grid"
    (promptRequest)="onPromptRequest($event)"
    (responseSuccess)="onResponseSuccess($event)"
    (responseError)="onResponseError($event)">
</kendo-toolbar-button>
typescript
public onPromptRequest(event: { requestData: GridToolbarAIRequestData, isRetry: boolean }): void {
    // Customize the request before it's sent
}

public onResponseSuccess(response: HttpResponse<GridToolbarAIRequestResponse>): void {
    // Handle successful responses with custom logic
}

public onResponseError(error: HttpErrorResponse): void {
    // Implement custom error handling
}

In this approach, the AI Assistant still handles the HTTP request automatically using your configured requestUrl, but you maintain control over request customization and response handling through the event handlers.

Request Options

When using requestUrl, you can also customize the settings of the internally sent HTTP request through the requestOptions property. This allows you to add authentication headers, configure request parameters, and set other HTTP options without having to implement custom request logic:

html
<kendo-toolbar-button 
   kendoGridAIAssistantTool
   requestUrl="https://your-ai-service.com/api/grid"
   [requestOptions]="requestOptions">
</kendo-toolbar-button>
typescript
public requestOptions = {
    headers: new HttpHeaders({
        'Authorization': 'Bearer your-api-key',
        'Content-Type': 'application/json'
    }),
    withCredentials: true,
};

The requestOptions property is only applicable when you have defined a requestUrl. When implementing manual integration, you handle the HTTP request configuration directly in your custom implementation.

Manual Integration

For full control over the AI interaction, you can manually integrate your AI service by handling the promptRequest event of the tool. This allows you to perform entirely custom requests to your AI service while using the UI that the kendoGridAIAssistantTool provides.

The promptRequest event provides useful information that you can use in your custom AI service integration. The requestData field of the event contains the user's prompt, Grid column information and HTTP request settings, while isRetry indicates whether this is a retry attempt.

This comprehensive data allows you to implement fully customized AI service communication while maintaining access to the Grid context and user input.

html
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    (promptRequest)="onPromptRequest($event)">
</kendo-toolbar-button>
typescript
public onPromptRequest(event: { requestData: GridToolbarAIRequestData, isRetry: boolean }): void {
    // Access the user's prompt
    console.log('User prompt:', event.requestData.promptMessage);
    
    // Access Grid columns information
    console.log('Available columns:', event.requestData.columns);
    
    // Check if this is a retry request
    console.log('Is retry:', event.isRetry);
    
    // Perform custom AI service request here
}

In the manual approach, you have full control over how requests are sent to your AI service and how responses are processed, making it suitable for complex scenarios or when integrating with proprietary AI systems.

Event Handling

The AI Assistant toolbar tool provides events for enhanced control over the AI interaction process and comprehensive request lifecycle management:

promptRequest—Emits before the AI request is sent.
cancelRequest—Emits when the user cancels an ongoing AI request through the Stop Generation button.
responseSuccess—Emits when the AI service request is successful, providing information about the returned response.
responseError—Emits when the AI service request has completed with an error, providing information about the returned response.
open—Emits when the AI Assistant tool is opened, providing access to the Window and AIPrompt component instances.
close—Emits when the AI Assistant tool is closed.

Prompt-Based Row Highlighting

You can implement intelligent row highlighting functionality by manually handling the AI service integration through the promptRequest event. This approach allows users to visually identify specific data patterns without applying filters.

This feature requires a manual integration that interprets AI service responses with highlighting instructions and applies them through the Grid's existing row highlighting capabilities.

The following example demonstrates how to implement AI-powered row highlighting to identify data patterns:

Change Theme

Theme

Loading ...

Customization Options

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

AIPrompt customization
Window appearance

AIPrompt Customization

The AI Assistant toolbar tool utilizes the AIPrompt component internally to provide conversational interface. You can customize the AIPrompt interface and user interaction by using the aiPromptSettings property of the tool.

This property allows you to add promptSuggestions tailored to your specific use case that can guide users with examples of what your AI service can understand. Furthermore, the speechToTextButton setting provides voice input capabilities for enhancing accessibility in your application.

html
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    [aiPromptSettings]="aiPromptSettings">
</kendo-toolbar-button>
typescript
public aiPromptSettings: GridToolbarAIPromptSettings = {
    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 component, in which the AIPrompt of the toolbar tool is rendered.

To achieve this, use the 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
<kendo-toolbar-button 
    kendoGridAIAssistantTool
    [aiWindowSettings]="aiWindowSettings">
</kendo-toolbar-button>
typescript
public aiWindowSettings: GridToolbarAIWindowSettings = {
    width: 500,
    height: 400,
    title: 'Data Assistant',
    resizable: true,
    draggable: true
};