Angular Data Grid AI Toolbar Assistant

Updated on Feb 6, 2026

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

For an enhanced user experience with additional search capabilities, prompt suggestions, and streamlined UI, we recommend using the AI Smart Box. 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 component and an 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 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 ...

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

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

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

• Automatic Integration—The quickest approach where the Grid handles the communication with your AI service automatically.
• Controlled Integration—Automatic AI service communication with request/response customization through event handlers.
• 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.

Customization Options

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

• AIPrompt customization
• Window appearance

AIPrompt Customization

The AI Toolbar Assistant 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
};

Suggested Links

• Smart Grid AI Assistant Tools Setup
• AI Service Setup
• Smart Grid Overview
• Angular Grid Configuring the ToolBar
• Grid Data Operations
• Angular Grid Row and Cell Highlighting
• Kendo UI for Angular AIPrompt Overview
• API Reference of the AIAssistantToolbarDirective