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

SmartBox.aiAssistantSettings

configuration

Configures the initial settings for the AI Assistant mode.

smartBox.aiAssistantSettings

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
      promptSuggestions: ["Show top products", "Calculate average price"]
    }
  }
});
</script>

smartBox.aiAssistantSettings.enabled

Boolean

Enables or disables the AI Assistant mode in the SmartBox.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

smartBox.aiAssistantSettings.history

Boolean|Object

Sets the settings for the history queries in AI Assistant mode. Overrides the global smartBox.history setting for this mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      history: {
        size: 15
      },
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

smartBox.aiAssistantSettings.placeholder

String

The placeholder of the input in AI Assistant mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    aiAssistantSettings: {
      enabled: true,
      activeMode: "AIAssistant",
      placeholder: "Ask me anything about your data...",
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

smartBox.aiAssistantSettings.promptSuggestions

Array

A list of prompts to be suggested to the user in AI Assistant mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      promptSuggestions: [
        "Show me the most expensive products",
        "Which products have low stock?",
        "Calculate the average unit price"
      ],
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

smartBox.aiAssistantSettings.service

String|Object

String value represents the URL to which the SmartBox tool sends the AI request. When you set this property, the SmartBox tool sends and handles an HTTP request to the provided URL. You can handle the smartBoxAIAssistantPromptRequest event to modify the request options before the tool sends it.

The object configuration enables the user to set specific headers configuration and send additional data with the AI request.

When service is not configured, the SmartBox tool does not send an HTTP request. You should handle the smartBoxAIAssistantPromptRequest event to send and handle a custom HTTP request.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    aiAssistantSettings: {
      enabled: true,
      activeMode: "AIAssistant",
      service: {
        url: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
        headers: {
          "Authorization": "Bearer your-api-key",
          "Content-Type": "application/json"
        },
      }
    }
  }
});
</script>

smartBox.aiAssistantSettings.speechToTextButton

Boolean|Object

Sets the settings for the Speech to Text button in AI Assistant mode. When set to true, enables speech-to-text with default settings.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      speechToTextButton: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      speechToTextButton: {
        integrationMode: "webSpeech",
        lang: "en-US",
        continuous: false,
        interimResults: true,
        maxAlternatives: 1
      },
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

Related Members