ASP.NET MVC Smart Grid AI Assistant Tools Setup
The Smart Grid provides an AI Toolbar Assistant that enables you to apply Grid operations through natural language prompts. The Grid supports three main approaches for connecting this tool to your backend AI service, allowing you to choose the level of control that best fits your application requirements.
The AI Assistant tools that support these approaches for integrating with your AI service are:
Choose an integration approach based on how much control you need over the AI communication:
- Automatic Integration—The quickest approach where the Grid handles the communication with your AI service automatically.
- Controlled Integration—Automatic AI service communication with request/response customization through event handlers.
- Manual Integration—Full control over AI service communication while using the built-in toolbar tool UI.
Each integration approach requires a backend AI service to process natural language prompts and return structured Grid commands. For guidance on implementing your backend service, see the AI Service Setup article.
Automatic Integration
The automatic approach is the quickest way to integrate AI Assistant functionality with your Grid. The AI Assistant tool handles all communication with your AI service internally through HTTP requests.
To configure automatic integration, configure the Grid's Ai.Service property to point to your AI service endpoint where the natural language prompts will be processed.
For runnable examples of automatic integration, see the AI Smart Box and AI Toolbar Assistant articles.
@(
Html.Kendo().Grid<EcommerceProduct>()
.Name("grid")
.ToolBar(toolbar =>
{
toolbar.SmartBox();
})
.SmartBox(sb => sb.Events(ev => ev.SemanticSearch("onSemanticSearch"))
.SearchSettings(s => s.Enabled(true).History(true))
.SemanticSearchSettings(ss => ss.Enabled(true))
.AiAssistantSettings(ai => ai.Service(s => s.Url("https://demos.telerik.com/service/v2/ai/grid/smart-state"))
)
)
)When using automatic integration, the Grid sends HTTP requests to your AI service endpoint. The Grid generates the request body in the appropriate format and expects a GridAIResponse object in return from your backend service.
For more details about the expected request/response structure and available command types, refer to the AI Service Setup article.
Controlled Integration
In the controlled approach, you maintain full control over the AI Assistant tool's state and behavior while leveraging built-in AI service communication. This allows you to validate AI responses and apply custom business logic before executing operations.
The controlled integration allows you to provide a service Url for automatic request handling while intercepting appropriate events to modify request options or customize response handling.
You can customize the AI request before it is sent to your backend service by handling the aiPromptRequest event. This allows you to add custom headers, modify request data, or add authentication tokens.
The following example demonstrates controlled integration where the AI Toolbar Assistant still handles the HTTP request automatically, but the interaction is customized through request and response event handlers.
@(
Html.Kendo().Grid<EcommerceProduct>()
.Name("grid")
.ToolBar(toolbar => { toolbar.SmartBox(); })
.SmartBox(sb => sb
.ActiveMode("AIAssistant")
.AiAssistantSettings(a => a.Enabled(true)
.Service(s => s.Url("https://demos.telerik.com/service/v2/ai/grid/smart-state")))
.Events(ev => ev
.AiAssistantPromptRequest("aiAssistantPromptRequest")
.AiAssistantResponseSuccess("aiAssistantResponseSuccess"))
)
)
<script>
function aiAssistantPromptRequest(e) {
// Customize request before sending
e.request.columns.forEach(function(col) {
if (col.field === "Status") {
col.values = ["Active", "Pending", "Completed"];
}
});
}
function aiAssistantResponseSuccess(e) {
// Handle response after receiving
console.log("AI response:", e.response);
}
</script>Manual Integration
For full control over the AI interaction, implement custom HTTP communication with your AI service by handling the AiPromptRequest and AiPromptResponse events.
This approach gives you complete control over how requests are sent and responses are processed, making it suitable for complex scenarios or proprietary AI systems.
When implementing manual integration, use the Grid's built-in helper methods to simplify request generation and response processing while maintaining full control over the HTTP communication.
The following example demonstrates manual integration using the helper methods:
@(
Html.Kendo().Grid<EcommerceProduct>()
.Name("grid")
.ToolBar(toolbar => { toolbar.SmartBox(); })
.SmartBox(sb => sb
.ActiveMode("AIAssistant")
.AiAssistantSettings(a => a.Enabled(true)
.Service(s => s.Url("https://demos.telerik.com/service/v2/ai/grid/smart-state")))
.Events(ev => ev
.AiAssistantPromptRequest("aiAssistantPromptRequest")
.AiAssistantResponseSuccess("aiAssistantResponseSuccess"))
)
)
<script>
function aiAssistantPromptRequest(e) {
e.preventDefault(); // Prevent default request
// Send custom AJAX request
$.ajax({
url: "https://your-ai-service.com/api/grid",
method: "POST",
contentType: "application/json",
data: JSON.stringify(e.request),
success: function(response) {
// Process the response
var grid = $('#grid').data('kendoGrid');
grid.trigger("aiPromptResponse", { response: response });
},
error: function(xhr, status, error) {
console.error("AI request failed:", error);
}
});
}
function aiAssistantResponseSuccess(e) {
// Handle response after receiving
console.log("AI response:", e.response);
}
</script>Helper Methods
The Grid provides built-in helper methods that simplify working with AI service requests and responses when implementing manual integration. These methods handle the complexities of request formatting and response processing, allowing you to focus on the HTTP communication logic specific to your application.
| Method | Description |
|---|---|
getAIRequest() | Generates the request body for your AI service based on the user's prompt. Returns a GridAIRequest object containing the role (defaults to "user"), contents array with the prompt text, and columns array with Grid column information. |
handleAIResponse() | Processes the GridAIResponse returned by your AI service and automatically applies all supported Grid operations including data operations, column management, selection, highlighting, and export. |
If you implement your backend AI service with the help of the Smart Extensions library, these helper methods generate requests and process responses in the compatible format. For fully custom backend implementations, you can control how to define the request/response structure as needed for your specific AI service.
Event Handling
The AI Assistant tools provide events for enhanced control over the AI interaction process and comprehensive request lifecycle management:
AiAssistantPromptRequest—Emits before the SmartBox tool sends the AI request in AI Assistant mode.AiAssistantCancelRequest—Emits when the user clicks the cancel button in AI Assistant mode.AiAssistantResponseSuccess—Emits when the SmartBox tool completes the AI request successfully.AiAssistantResponseError—Emits when the SmartBox tool completes the AI request with an error.Open—Emits when the SmartBox tool opens.Close—Emits when the SmartBox tool closes.
PromptRequest—Triggered when the prompt view Generate output button is clicked.PromptResponse—Triggered when the AI service response is received.PromptRequestCancel—Emits when a prompt request is cancelled.CommandExecute—Emits when a command item from the Commands view is clicked.