HandleAIResponse

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" },
      { field: "city" }
    ],
    dataSource: [
      { name: "Jane Doe", age: 30, city: "New York" },
      { name: "John Doe", age: 33, city: "London" },
      { name: "Sam Smith", age: 25, city: "Paris" },
      { name: "Emily White", age: 28, city: "Berlin" }
    ],
    sortable: true,
    filterable: true,
    toolbar: [{
      template: '<input id="aiPrompt" class="k-input" placeholder="Ask AI to manipulate the grid..." style="width: 300px; margin-right: 10px;" />' +
                '<button id="askAI" class="k-button k-button-primary">Apply</button>'
    }]
  });

  var grid = $("#grid").data("kendoGrid");

  $("#askAI").on("click", function() {
    var prompt = $("#aiPrompt").val();

    if (!prompt) {
      return;
    }

    $.ajax({
      url: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
      method: "POST",
      contentType: "application/json",
      data: JSON.stringify({
        "role": "user",
        "contents": [{
            "$type": "text",
            "text": prompt
        }],
        "columns": grid.columns.map((col, idx) => {
            let colType;

            if (col.selectable) {
                colType = "checkbox";
            } else if (col.command) {
                colType = "command";
            } else if (col.draggable) {
                colType = "draggable";
            }

            const colConfig = { ...col, "id": `${col.uid}` };

            if (colType) {
              colConfig.type = colType;
            }

            return colConfig;
          })
      }),
      success: function(response) {
        grid.handleAIResponse(response);
        $("#aiPrompt").val("");
      },
      error: function(xhr) {
        alert("AI service error: " + xhr.responseText);
      }
    });
  });
</script>