React Data Grid Smart Grid AI Toolbar Assistant

New to KendoReact? Start a free 30-day trial

Updated on Feb 10, 2026

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

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

tsx

<Grid data={data} sortable={true} groupable={true} filterable={true} reorderable={true} resizable={true}>
    {/* Column definitions */}
</Grid>

Add the GridToolbarAIAssistant component within the GridToolbar component:

tsx

import { Grid, GridToolbar, GridToolbarAIAssistant } from '@progress/kendo-react-grid';

<Grid data={data}>
    <GridToolbar>
        <GridToolbarAIAssistant />
    </GridToolbar>
</Grid>;

Configure the requestUrl property to point to your custom AI service endpoint:
tsx
```
<GridToolbarAIAssistant 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 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:

Prompt Suggestions
Placeholder Text
Speech-to-Text

Prompt Suggestions

You can guide users with predefined prompts by using the suggestionsList property. This helps users understand the types of commands your AI service can process and provides quick access to common operations.

tsx

<GridToolbarAIAssistant
    requestUrl="https://your-ai-service.com/api/grid"
    suggestionsList={[
        'Sort by Amount descending',
        'Group by account type',
        'Show only failed transactions',
        'Filter where currency is USD',
        'Clear filtering'
    ]}
/>

Placeholder Text

Use the promptPlaceHolder property to customize the placeholder text that appears in the AI prompt input field:

tsx

<GridToolbarAIAssistant
    requestUrl="https://your-ai-service.com/api/grid"
    promptPlaceHolder="Ask AI to filter, sort, or group your data..."
/>

Speech-to-Text

Enable voice input capabilities using the enableSpeechToText property. This enhances accessibility by allowing users to speak their commands instead of typing:

tsx

<GridToolbarAIAssistant requestUrl="https://your-ai-service.com/api/grid" enableSpeechToText={true} />