Smart Grid AI Assistant Tools Setup
The Smart Grid provides AI Assistant tools that enable you to apply Grid operations through natural language prompts. The Grid supports three main approaches for connecting these tools to your backend AI service, allowing you to choose the level of control that best fits your application requirements.
The AI Assistant tools that support these approaches for integrating with your AI service are:
Choose an integration approach based on how much control you need over the AI communication:
- 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.
Each integration approach requires a backend AI service to process natural language prompts and return structured Grid commands. For guidance on implementing your backend service, see the AI Service Setup article.
Automatic Integration
The automatic approach is the quickest way to integrate AI Assistant functionality with your Grid. The AI Assistant tool handles all communication with your AI service internally through HTTP requests.
To configure automatic integration, add an AI Assistant tool inside a <kendo-toolbar> and set the requestUrl property to point to your AI service endpoint where the natural language prompts will be processed.
For runnable examples of automatic integration, see the AI Smart Box and AI Toolbar Assistant articles.
<kendo-grid>
<kendo-toolbar>
<kendo-grid-smartbox-tool
[aiAssistantMode]="{ enabled: true, requestUrl: 'https://your-ai-service.com/api/grid' }">
</kendo-grid-smartbox-tool>
</kendo-toolbar>
...
</kendo-grid>When using automatic integration, the Grid sends HTTP requests to your AI service endpoint using Angular's HttpClient. The Grid uses GridAIRequestData to generate the request body in the appropriate format and expects a GridAIResponse object in return from your backend service.
For more details about the expected request/response structure and available command types, refer to the AI Service Setup article.
Controlled Integration
In the controlled approach, you maintain full control over the AI Assistant tool's state and behavior while leveraging built-in AI service communication. This allows you to validate AI responses and apply custom business logic before executing operations.
The controlled integration allows you to provide a requestUrl for automatic request handling while intercepting appropriate events to modify request options or customize response handling.
The following example demonstrates controlled integration where the AI Toolbar Assistant still handles the HTTP request automatically, but the interaction is 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:
<kendo-toolbar>
<kendo-grid-smartbox-tool
[aiAssistantMode]="aiAssistantSettings">
</kendo-grid-smartbox-tool>
<kendo-toolbar-button
kendoGridAIAssistantTool
requestUrl="https://your-ai-service.com/api/grid"
[requestOptions]="requestOptions">
</kendo-toolbar-button>
</kendo-toolbar>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 full control over the AI interaction, implement custom HTTP communication with your AI service by handling the AI Assistant tool's appropriate prompt request and response events.
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.
When implementing manual integration, use the Grid's built-in helper methods to simplify request generation and response processing while maintaining full control over the HTTP communication.
The following example demonstrates manual integration using the helper methods:
Helper Methods
The Grid provides built-in helper methods that simplify working with AI service requests and responses when implementing manual integration. These methods handle the complexities of request formatting and response processing, allowing you to focus on the HTTP communication logic specific to your application.
| Method | Description |
|---|---|
getAIRequest() | Generates the request body for your AI service based on the user's prompt. Returns a GridAIRequest object containing the role (defaults to "user"), contents array with the prompt text, and columns array with Grid column information. |
handleAIResponse() | Processes the GridAIResponse returned by your AI service and automatically applies all supported Grid operations including data operations, column management, selection, highlighting, and export. |
If you implement your backend AI service with the help of the Smart Extensions library, these helper methods generate requests and process responses in the compatible format. For fully custom backend implementations, you can control how to define the request/response structure as needed for your specific AI service.
Event Handling
The AI Assistant tools provide events for enhanced control over the AI interaction process and comprehensive request lifecycle management:
aiAssistantPromptRequest—Emits before the SmartBox tool sends the AI request in AI Assistant mode.aiAssistantCancelRequest—Emits when the user clicks the cancel button in AI Assistant mode.aiAssistantResponseSuccess—Emits when the SmartBox tool completes the AI request successfully.aiAssistantResponseError—Emits when the SmartBox tool completes the AI request with an error.open—Emits when the SmartBox tool opens.close—Emits when the SmartBox tool closes.
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.