# Kendo UI for jQuery Smart Grid AI Assistant Tools Setup The Smart Grid provides an AI Toolbar Assistant that enables you to apply Grid operations through natural language prompts. The Grid supports three main approaches for connecting this tool 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: AI Smart Box Versatile search box that supports the AI service integration approaches when in AI Assistant mode. AI Toolbar Assistant AI Assistant toolbar button for applying AI-powered Grid operations. Choose an integration approach based on how much control you need over the AI communication: * [Automatic Integration](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#automatic-integration)—The quickest approach where the Grid handles the communication with your AI service automatically. * [Controlled Integration](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#controlled-integration)—Automatic AI service communication with request/response customization through event handlers. * [Manual Integration](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#manual-integration)—Full control over AI service communication while using the built-in toolbar tool UI. > tip 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](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/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, configure the Grid's [`ai.service`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/ai#aiservice) 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](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-toolbar-tool) and [AI Toolbar Assistant](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-toolbar-tool) articles. ```javascript AI Smart Box $("#grid").kendoGrid({ toolbar: [ { name: "smartbox" } ], smartBox: { aiAssistantSettings: { enabled: true, service: { url: "https://demos.telerik.com/service/v2/ai/grid/smart-state" } } }, // ...other configuration... }); ``` ```javascript AI Toolbar Assistant $("#grid").kendoGrid({ toolbar: [ { name: "aiAssistant" } ], ai: { service: "https://your-ai-service.com/api/grid" }, // ...other configuration... }); ``` When using automatic integration, the Grid sends HTTP requests to your AI service endpoint. The Grid generates the request body in the appropriate format and expects a `GridAIResponse` object in return from [your backend service](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-service-setup). > For more details about the expected request/response structure and available command types, refer to the [AI Service Setup](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-service-setup#request-and-response-format) 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 `service Url` for [automatic request handling](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#automatic-integration) while intercepting [appropriate events](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#event-handling) to modify request options or customize response handling. You can customize the AI request before it is sent to your backend service by handling the [`aiPromptRequest`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/ai/aiassistant#aiaiassistantpromptrequest) event. This allows you to add custom headers, modify request data, or add authentication tokens. 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. ```javascript AI Smart Box $("#grid").kendoGrid({ toolbar: [{ name: "smartBox" }], smartBox: { activeMode: "AIAssistant", aiAssistantSettings: { enabled: true, service: "https://demos.telerik.com/service/v2/ai/grid/smart-state" }, aiAssistantPromptRequest: function(e) { // Customize request before sending e.request.columns.forEach(function(col) { if (col.field === "Status") { col.values = ["Active", "Pending", "Completed"]; } }); }, aiAssistantResponseSuccess: function(e) { // Handle response after receiving console.log("AI response:", e.response); } } }); ``` ```javascript AI Toolbar Assistant $("#grid").kendoGrid({ toolbar: [{ name: "aiAssistant" }], ai: { service: "https://your-ai-service.com/api/grid" }, aiPromptRequest: function(e) { // Customize request before sending e.request.columns.forEach(function(col) { if (col.field === "Status") { col.values = ["Active", "Pending", "Completed"]; } }); }, aiPromptResponse: function(e) { // Handle response after receiving console.log("AI response:", e.response); } }); ``` ## Manual Integration For full control over the AI interaction, implement custom HTTP communication with your AI service by handling the dedicated prompt request and prompt 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. > tip When implementing manual integration, use the Grid's [built-in helper methods](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#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: ```javascript AI Smart Box $("#grid").kendoGrid({ toolbar: [{ name: "smartBox" }], smartBox: { activeMode: "AIAssistant", aiAssistantSettings: { enabled: true, service: "https://demos.telerik.com/service/v2/ai/grid/smart-state" }, aiAssistantPromptRequest: function(e) { e.preventDefault(); // Prevent default request // Send custom AJAX request $.ajax({ url: "https://your-ai-service.com/api/grid", method: "POST", contentType: "application/json", data: JSON.stringify(e.request), success: function(response) { // Process the response var grid = $('#grid').data('kendoGrid'); grid.trigger("aiPromptResponse", { response: response }); }, error: function(xhr, status, error) { console.error("AI request failed:", error); } }); }, aiAssistantResponseSuccess: function(e) { // Handle response after receiving console.log("AI response:", e.response); } } }); ``` ```javascript AI Toolbar Assistant $("#grid").kendoGrid({ columns: [ { field: "productName" }, { field: "category" } ], dataSource: [ { productName: "Tea", category: "Beverages" }, { productName: "Coffee", category: "Beverages" } ], ai: { aiAssistant: { promptRequest: function(e) { e.preventDefault(); // Prevent default request // Send custom AJAX request $.ajax({ url: "https://your-ai-service.com/api/grid", method: "POST", contentType: "application/json", data: JSON.stringify(e.request), success: function(response) { // Process the response var grid = $('#grid').data('kendoGrid'); grid.trigger("aiPromptResponse", { response: response }); }, error: function(xhr, status, error) { console.error("AI request failed:", error); } }); }, promptResponse: function(e) { // Handle response after receiving console.log("AI response:", e.response); } } } }); ``` ## Helper Methods The Grid provides built-in helper methods that simplify working with AI service requests and responses when implementing [manual integration](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-assistant-tools-setup#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](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid#smart-extensions), these helper methods generate requests and process responses in the compatible format. For fully [custom backend implementations](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid#custom-implementation), 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`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/smartbox#smartboxaiassistantpromptrequest)—Emits before the SmartBox tool sends the AI request in AI Assistant mode. * [`aiAssistantCancelRequest`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/smartbox#smartboxaiassistantcancelrequest)—Emits when the user clicks the cancel button in AI Assistant mode. * [`aiAssistantResponseSuccess`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/smartbox#smartboxaiassistantresponsesuccess)—Emits when the SmartBox tool completes the AI request successfully. * [`aiAssistantResponseError`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/smartbox#smartboxaiassistantresponseerror)—Emits when the SmartBox tool completes the AI request with an error. * [`open`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/smartbox#smartboxopen)—Emits when the SmartBox tool opens. * [`close`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/smartbox#smartboxclose)—Emits when the SmartBox tool closes. * [`promptRequest`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/ai/aiassistant#aiaiassistantpromptrequest)—Triggered when the prompt view Generate output button is clicked. * [`promptResponse`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/ai/aiassistant#aiaiassistantpromptresponse)—Triggered when the AI service response is received. * [`promptRequestCancel`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/ai/aiassistant#aiaiassistantpromptrequestcancel)—Emits when a prompt request is cancelled. * [`commandExecute`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/configuration/ai/aiassistant#aiaiassistantcommandexecute)—Emits when a command item from the Commands view is clicked. ## Suggested Links * [AI Service Setup](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-service-setup) * [Smart Grid Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid) * [AI Toolbar Assistant](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-toolbar-tool) * [Custom AI Column](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/custom-column-ai) * [Smart Extensions](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-service-setup) * [jQuery Grid Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/overview)