Angular Grid Smart Grid AI Toolbar Assistant

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

Updated on Nov 10, 2025

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 operations like filtering data, reordering columns, and highlighting rows 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 Smart Grid that processes natural language requests for performing data operations, column management, selection, highlighting, and export operations.

Change Theme

Theme

Loading ...

Supported Operations

The AI Assistant toolbar tool currently supports applying the following Grid operations through natural language prompts:

Category	Operations
Data Operations	Filtering—Filter data based on specific criteria. Sorting—Sort data by one or multiple columns. Grouping—Group data by specific fields. Paging—Navigate to specific pages and change page size through natural language commands.
Column Operations	Resize—Resize columns to specific widths. Reorder—Change the order of columns. Show/Hide—Show or hide specific columns. Lock/Unlock—Lock or unlock columns to keep them visible while scrolling.
Highlighting and Selection	Row/Cell Highlighting—Highlight specific rows or cells that meet certain conditions. Row/Cell Selection—Select/deselect rows or cells based on criteria, or select/deselect all items.
Export	Excel/PDF Export—Export Grid data to Excel or PDF format.

The AI Assistant works with the Grid's existing configuration and will only perform operations that are properly enabled and configured:

html

<!-- Properties set for data and column operations -->
<kendo-grid 
    [kendoGridBinding]="customers"
    [groupable]="true"
    [reorderable]="true"
    [selectable]="true"
    filterable="menu">
    
    <!-- Export components required for export operations -->
    <kendo-grid-excel></kendo-grid-excel>
    <kendo-grid-pdf></kendo-grid-pdf>
</kendo-grid>

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—The simplest approach where you pass a requestUrl and the Grid handles the communication with your AI service automatically.
Controlled integration—Automatic handling with request/response customization.
Manual integration—Full control over AI service communication while using the built-in AI Assistant UI.

Automatic Integration

The automatic approach is the simplest way to integrate AI functionality with your Grid. The AI Assistant toolbar tool handles all communication with your AI service internally through HTTP requests.

To configure automatic integration, apply the kendoGridAIAssistantTool directive to a <kendo-toolbar-button> component and set 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.

Request and Response Format

When using automatic integration, the AI Assistant sends HTTP requests using Angular's HttpClient to your custom AI service endpoint specified in the requestUrl configuration.

The following types define the request and response structure:

Type	Description
`GridAIRequestData`	Contains the user's prompt, Grid column information, URL, and HTTP request configuration. The body of the HTTP request sent by the AI Assistant is generated from this data.
`GridAIRequest`	The actual HTTP request body structure sent to your AI service. This is the format your backend controller will receive. For detailed information about this type and backend implementation, see Create a Grid Controller.
`GridAIResponse`	Defines the expected response format from your AI service. Contains a `commands` array with Grid operation commands and parameters, and optional `message` about the overall response. For detailed usage patterns, see Working with Grid Responses.

For comprehensive information about implementing your AI service including detailed request/response formats and server-side implementation, see Smart Extensions.

Controlled Integration

In the controlled approach, you maintain full control over the AI assistant's state and behavior while leveraging built-in AI service communication. This allows you to validate AI suggestions and apply custom business logic before executing operations.

The controlled integration allows you to provide a requestUrl for automatic request handling while also intercept suitable events to modify request options or add custom logic before the request is sent.

The following example demonstrates controlled integration where the AI Assistant still handles the HTTP request automatically, but the prompt outputs are customized through request and response event handlers.

Change Theme

Theme

Loading ...

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. This approach gives you complete control over how requests are sent and responses are processed, making it suitable for complex scenarios or proprietary AI systems.

The promptRequest event provides the user's prompt, Grid column information, and request settings, allowing you to implement fully customized AI service communication while maintaining access to the Grid context.

The following example demonstrates how to manually send requests to an AI service and process the AI responses to apply basic data operations (filtering, sorting, grouping, and paging) to the Grid.

Change Theme

Theme

Loading ...

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.

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: 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 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: GridAIAssistantWindowSettings = {
    width: 500,
    height: 400,
    title: 'Data Assistant',
    resizable: true,
    draggable: true
};