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

SmartBox.aiAssistantSettings.service

configuration

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.

smartBox.aiAssistantSettings.service

String|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"
    }
  }
});
</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.service.data

Object|Function

The data to send with the AI service request. Can be an object or a function that returns the data.

<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: {
        url: "https://your-ai-service.com/api/query",
        data: (prompt) => ({
          prompt: prompt,
          model: "gpt-4",
          temperature: 0.7
        })
      }
    }
  }
});
</script>

smartBox.aiAssistantSettings.service.headers

Object

The headers to send with the AI service 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: {
        url: "https://your-ai-service.com/api/query",
        headers: {
          "Authorization": "Bearer your-api-key"
        }
      }
    }
  }
});
</script>

smartBox.aiAssistantSettings.service.url

String

The URL of the AI service to send requests to.

<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: {
        url: "https://your-ai-service.com/api/query"
      }
    }
  }
});
</script>