New to Kendo UI for jQuery? Start a free 30-day trial

Ai.aiAssistant

configuration

Defines the configuration options for the AI Assistant tool in the Grid.

ai.aiAssistant

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "ProductName" },
     { field: "UnitPrice" },
     { field: "UnitsInStock" }
   ],
   dataSource: {
     transport: {
       read: {
         url: "https://demos.telerik.com/service/v2/core/detailproducts",
       },
     },
     pageSize: 5
   },
   sortable: true,
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptSuggestions: ["Show me the most expensive products",],
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.commandExecute

Triggered when a command item from the Commands view is clicked. The panel bar dataItem of the selected item is available through the event argument.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      commandExecute: function(e) {
        console.log("Command executed:", e.item.text);
      }
    }
  }
});
</script>

ai.aiAssistant.encodedPromptOutputs

Boolean

Specifies whether the prompt outputs are HTML-encoded before being displayed. When set to false, ensure output is properly sanitized to prevent XSS attacks.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       encodedPromptOutputs: false
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.messages

Object

The text messages displayed in the AI Assistant. Use this option to customize or localize the messages.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       messages: {
         promptPlaceholder: "Ask AI about your grid data...",
         generateOutput: "Analyze",
         outputTitle: "Grid Analysis Result",
         promptView: "Ask Grid AI",
         outputView: "Analysis Results"
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.outputAction

Triggered when an action button on an output card is clicked. This event is fired for both built-in and custom actions.

Event Data

e.command `String`

The command identifier of the clicked action.

e.outputId `String`

The unique identifier of the output associated with the action.

e.output `String`

The output text content associated with the action.

e.prompt `String`

The prompt text that was used to generate the output.

e.button `jQuery`

The jQuery element of the clicked button.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "product" }, { field: "category" }],
   dataSource: [{ product: "Tea", category: "Beverages" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       outputAction: (e) => {
        console.log("outputAction:", e);
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.outputActions

Array

An array of action configurations for the output cards in the AI Assistant.

Default: ["copy", "retry"]

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       outputActions: [
         "copy",
         "retry",
         "rating",
         { command: "export", text: "Export", icon: "download" },
         { command: "share", text: "Share", icon: "share" }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.outputTemplate

Function

A template function for customizing the display of output content in the AI Assistant.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       outputTemplate: function({ output, content }) {
         return `<div class="custom-grid-output">
           <h4>Grid Analysis</h4>
           <div class="content">${content}</div>
         </div>`;
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.promptOutputs

Array

An array of prompt outputs to display in the AI Assistant output view.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }, { field: "age" }],
   dataSource: [{ name: "Jane Doe", age: 30 }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptOutputs: [
         {
           prompt: "Analyze the grid data",
           output: "This grid contains user information with 1 record showing Jane Doe, age 30."
         }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

Triggered when the prompt view Generate output button is clicked. The prompt text is available through the event argument. Suitable to make a request to the AI service to receive an output. Use the addPromptOutput method to add the generated output to the promptOutputs collection.

The prompt, output, history, isRetry and response properties are available in the event argument. When the output is generated after clicking the retry button of an output, the isRetry property is true and the output property is the output content of the output card. The history property is an array of prompt outputs generated before the current output.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptRequest: function(e) {
        console.log("Prompt request:", e.prompt);
        // Simulate AI response
        e.sender.addPromptOutput(e.prompt, "AI analysis result for: " + e.prompt);
      }
    }
  }
});
</script>

ai.aiAssistant.promptRequestCancel

Triggered when a prompt request is cancelled, typically by clicking the stop generation button during streaming operations.

Event Data

e.output `Object` (optional)

The output object being generated when the cancellation occurred.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptRequestCancel: function(e) {
        console.log("AI request cancelled");
        if (e.output) {
          console.log("Partial output was:", e.output);
        }
      }
    }
  }
});
</script>

ai.aiAssistant.promptResponse

Triggered when the AI service response is received. The response data is available through the event argument. Triggered only when the serviceUrl option is set.

Event Data

e.output `Object`

The output object containing the AI service response data with the following properties:

output - The generated text content from the AI service
prompt - The original prompt text that was sent to the AI service
id - The unique identifier for the output
isRetry - Whether this is a retry operation
activeView - The index of the view to activate after adding the output
isLoading - Whether the output is in loading state
isStreaming - Whether the output is being streamed

e.prompt `String`

The original prompt text that was sent to the AI service.

e.outputId `String`

The unique identifier for the output.

e.response `Object`

The original response object.

e.isRetry `Boolean`

Whether this is a retry operation.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "product" }, { field: "category" }],
   dataSource: [{ product: "Tea", category: "Beverages" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptResponse: (e) => {
          console.log("Prompt respones:", e);
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.promptSuggestionItemTemplate

String|Function

The template of the prompt suggestion item in the AI Assistant.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptSuggestions: [
         "Analyze grid data",
         "Find patterns"
       ],
       promptSuggestionItemTemplate: function({ suggestion }) {
         return `<div class="k-prompt-suggestion custom-grid-suggestion">
           <i class="k-icon k-i-chart-line"></i>
           ${suggestion}
         </div>`;
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.promptSuggestions

Array

Defines the suggestions for the AI Assistant tool. The suggestions are displayed in the AI Assistant tool.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "product" }, { field: "category" }],
   dataSource: [{ product: "Tea", category: "Beverages" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptSuggestions: [
         "Show me the top selling products",
         "Which category has the highest revenue?",
         "Identify products with low stock",
         "Compare sales across regions"
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.promptTextArea

Object

Configuration options for the TextArea component used in the AI Assistant prompt view.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptTextArea: {
         resize: "vertical",
         rows: 4,
         placeholder: "Ask AI about your grid data...",
         fillMode: "outline",
         rounded: "medium",
         size: "large",
         maxLength: 1000,
         label: {
           content: "Grid AI Prompt",
         }
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.showOutputSubtitleTooltip

Boolean

Controls whether the subtitle of the card in the output view displays a tooltip containing the full content of the subtitle.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       showOutputSubtitleTooltip: true
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.speechToText

Boolean|Object

Configures speech-to-text functionality for the AI Assistant prompt input.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       speechToText: {
         integrationMode: "webSpeech",
         lang: "en-US",
         continuous: false
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.toolbarItems

Array

An array of toolbar items to display in the AI Assistant header toolbar.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       toolbarItems: [
         { type: "spacer" },
         {
           type: "button",
           icon: "gear",
           fillMode: "flat",
           rounded: "full",
           click: function(e) {
             console.log("Settings clicked");
           }
         },
         {
           type: "button",
           icon: "x",
           fillMode: "flat",
           rounded: "full",
           themeColor: "primary",
           click: function(e) {
             console.log("X clicked");
           }
         }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.views

Array

An array of view configurations for the AI Assistant.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       views: [
         {
           type: "prompt",
           name: "ask",
           buttonText: "Ask AI",
           buttonIcon: "comment"
         },
         {
           type: "output",
           name: "results",
           buttonText: "Results",
           buttonIcon: "chart-line"
         },
         {
           type: "custom",
           name: "insights",
           buttonText: "Insights",
           buttonIcon: "light-bulb",
           viewTemplate: "<div>Custom insights view for grid data</div>"
         }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

Related Members