KendoReact Smart DataGrid AI Toolbar AssistantPremium
The React Grid Smart functionality enables users to perform complex data operations like filtering, sorting, reordering, and grouping through natural language prompts using the AI Toolbar Assistant. This feature makes data manipulation more intuitive by allowing users to describe what they want instead of manually configuring filters and sort options.
The Smart Grid interprets user requests and automatically applies the corresponding operations, making data exploration accessible to users regardless of their technical expertise.
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.
Supported Operations
The AI Assistant toolbar tool currently supports applying the following Grid operations through natural language prompts:
| Category | Operations |
|---|---|
| Data Operations |
|
| Column Operations |
|
| Highlighting and Selection |
|
| Export |
|
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
requestUrland 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, add a GridToolbarAIAssistant component to the Grid and set its requestUrl property to point to your custom AI service endpoint:
<GridToolbarAIAssistant requestUrl="https://your-ai-service.com/api/grid" />The
requestUrldefines 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 to your custom AI service endpoint specified in the requestUrl configuration.
The following types define the request and response structure:
| Type | Description |
|---|---|
GridToolbarAIAssistantRequestData | 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.
<GridToolbarAIAssistant
requestUrl="https://your-ai-service.com/api/grid"
onPromptRequest={handleBeforeRequest}
onResponseSuccess={onResponseSuccess}
/>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.
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:
<GridToolbarAIAssistant requestUrl="https://your-ai-service.com/api/grid" requestOptions={{ timeout: 5000 }} />The
requestOptionsproperty is only applicable when you have defined arequestUrl. When implementing manual integration, you handle the HTTP request configuration directly in your custom implementation.
Manual Integration
For complete control over the AI interaction, you can manually handle all AI service communication through the onPromptRequest 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.
<GridToolbarAIAssistant onPromptRequest={handleBeforeRequest} />The onPromptRequest 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, and grouping) to the Grid. Because this demo showcases the manual mode of the component, it also demonstrates how to use the outputs prop along with additional logic to display the prompt output history.