# Kendo UI for jQuery Data Grid AI Chat Assistant

The Kendo UI for jQuery Grid can be enhanced with an AI-powered chat assistant that allows users to interact with Grid data using natural language commands.

By integrating the Kendo UI `Chat` component with the Grid's AI helpers (for example `getAIRequest()` and `handleAIResponse()`), you can create an intuitive conversational interface where users perform [supported Smart Grid operations](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-toolbar-tool#supported-operations) through simple text commands instead of navigating multiple UI controls.

The following example demonstrates how to implement an AI Chat Assistant that enables users to manage Grid data through natural language commands. Click the **AI Grid** button in the Grid toolbar to open the Chat panel and enter a prompt to interact with the data.

For a full runnable example demonstrating integration between the Kendo UI for jQuery Grid and Chat, refer to the [AI Chat Assistant demo](https://demos.telerik.com/kendo-ui/grid/ai-chat-integration).

## Implementation Steps

To implement an AI Chat Assistant for your Grid, follow the steps below:

1. Include Kendo UI for jQuery and the required scripts/styles, and add a placeholder for the Grid and Chat:

   ```html
   
   <link href="https://cdn.jsdelivr.net/npm/@progress/kendo-theme-default@12.3.0/dist/all.css" rel="stylesheet" />
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="js/kendo.all.min.js"></script>

   
   <div id="grid"></div>
   <div id="chat"></div>
   ```

2. Initialize the Grid with the features you want to expose to the AI (sortable, filterable, groupable, pageable) and add an AI toolbar button that opens the Chat drawer:

   ```javascript
   $(document).ready(function() {
     $("#grid").kendoGrid({
       dataSource: {
         data: customerOrders,
         pageSize: 20
       },
       toolbar: [
         { template: '<button id="ai-grid-button" class="ai-chat-button">AI Grid</button>' }
       ],
       sortable: true,
       filterable: true,
       groupable: true,
       pageable: true,
       columns: [ /* ...columns... */ ]
     });
   });
   ```

3. Handle user input in the Chat by generating an AI request with the Grid helper `getAIRequest()` and sending it to your AI endpoint. When the response arrives, apply changes with `handleAIResponse()` and render messages into the Chat:

   ```javascript
   function handleSendMessage(e) {
     var grid = $("#grid").data("kendoGrid");
     var prompt = e.message.text.toLowerCase().trim();
     var aiRequest = grid.getAIRequest(prompt);

     $.ajax({
       url: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
       method: "POST",
       contentType: "application/json",
       data: JSON.stringify(aiRequest),
       success: function(response) {
         // Post AI messages into the chat UI (demo concatenates command messages)
         grid.handleAIResponse(response);
       },
       error: function() {
         // TODO: show an error message in the Chat when the AI request fails.
       }
     });
   }
   ```

4. Initialize `kendoChat` with `sendMessage` wired to your handler and optional `suggestions` to guide users:

   ```javascript
   var chat = $("#chat").kendoChat({
     authorId: "123",
     height: 630,
     suggestions: [
       { id: "sort_bookings", text: "Sort by Bookings descending" },
       { id: "group_sales_person", text: "Group by Sales Person" }
     ],
     sendMessage: handleSendMessage
   }).data("kendoChat");
   ```

5. When your AI response includes user-facing messages or command descriptions, render them in the Chat and use `handleAIResponse()` to apply the returned commands (sorting, filtering, grouping, paging, column management, selection, highlighting, export).

   ```javascript
   // Example: show AI reply and apply grid changes
   chat.postMessage({ authorId: "ai-assistant", text: "Processing..." });
   // after AJAX success:
   chat.updateMessage(message, { isTyping: false, text: allMessages });
   grid.handleAIResponse(response);
   ```

## Suggested Links

* [Smart Grid AI Toolbar Assistant](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-toolbar-tool)
* [AI Service Manual Integration](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-toolbar-tool#manual-integration)
* [Smart Extensions](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid/ai-service-setup)
* [Chat Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/chat/overview)
* [Grid Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/overview)
* [JavaScript API Reference of the Chat](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/chat)