New to Telerik UI for Blazor? Start a free 30-day trial

Grid AI Features

Updated on Aug 12, 2025

This article describes the built-in AI-enabled features of the Telerik Grid for Blazor. You can allow users to type prompts, which are sent to an AI service that suggests the appropriate data operations for the Grid to perform. The currently supported data operations include filtering, grouping, sorting, and highlighting of items.

API Reference

The following types and Grid methods are relevant to scenarios when you want to integrate AI functionality with the Telerik Grid.

See Integration with Telerik.AI.SmartComponents.Extensions for more information on how you can implement your server-side AI service to be compatible with the Telerik Grid.

Types

Class Name	Description
`GridAIRequestDescriptor`	Contains information about the Grid column `Field`s and the user's prompt.
`GridAIResponse`	Contains information about the data operations that the Grid must perform. Supported operations include filtering, grouping, highlighting, and sorting. The object also has a `Messages` property that contains the AI string responses. `GridAIResponse` is the type that your AI service must return.
`GridAIResult`	Contains converted objects that are compatible with the Grid State properties. Use this type if you want to modify the Grid state in a more granular fashion, rather then apply all changes suggested by AI at once.

Grid Methods

The following Grid methods work with the above types.

Grid Method	Argument Type	Description
`GetAIRequest()`	`string`	Returns a `GridAIRequestDescriptor` that includes the user prompt if you pass it as a method argument. When using the `GridToolBarAIAssistantTool`, the app can receive the `GridAIRequestDescriptor` automatically from the `Request` property of the `OnPromptRequest` event argument, which is an `AIPromptPromptRequestEventArgs` object.
`ProcessAIResponseAsync()`	`string`	Processes a serialized `GridAIResponse` object that is received as a string method argument. Then, the Grid applies all defined data operations from the `GridAIResponse` to its state, for example, filtering, grouping, highlighting, and sorting. When using the `GridToolBarAIAssistantTool`, you can set the serialized `GridAIResponse` object from the endpoint directly to `Response` property of the `OnPromptRequest` event argument, which is an `AIPromptPromptRequestEventArgs` object.
`GetAIResult()`	`string`	Returns a `GridAIResult` that you can use to update properties from the Grid state. Processes a serialized `GridAIResponse` object that is received as a string method argument. Then, the Grid applies all defined data operations from the `GridAIResponse` to its state, for example, filtering, grouping, highlighting, and sorting. When using the `GridToolBarAIAssistantTool`, you can set the serialized `GridAIResponse` object from the endpoint directly to `Response` property of the `OnPromptRequest` event argument, which is an `AIPromptPromptRequestEventArgs` object.

Tutorial

Use the following steps to implement a scenario with built-in Grid AI integration.

Install NuGet Package

Add the Telerik.AI.SmartComponents.Extensions NuGet package to your Blazor app.
Import the Telerik.AI.SmartComponents.Extensions namespace in your .razor file or globally in _Imports.razor.

RAZOR

@using Telerik.AI.SmartComponents.Extensions

Add GridToolBarAIAssistantTool

Add a GridToolBarAIAssistantTool tool to the Grid ToolBar. Subscribe to the OnPromptRequest event of the nested <GridToolBarAIAssistantToolPromptSettings> component. It is effectively the OnPromptRequest event of a Telerik AIPrompt component. Optionally, define some PromptSuggestions.

RAZOR

<TelerikGrid>
    <GridToolBar>
        <GridToolBarAIAssistantTool>
            <GridToolBarAIAssistantToolSettings>
                <GridToolBarAIAssistantToolPromptSettings OnPromptRequest="@OnAIPromptRequest"
                                                          PromptSuggestions="@AIPromptSuggestions">
                </GridToolBarAIAssistantToolPromptSettings>
            </GridToolBarAIAssistantToolSettings>
        </GridToolBarAIAssistantTool>
    </GridToolBar>
</TelerikGrid>

@code {
    private List<string> AIPromptSuggestions { get; set; } = new();

    private async Task OnAIPromptRequest(AIPromptPromptRequestEventArgs args)
    {
    }
}

Implement OnPromptRequest Handler

Implement the OnPromptRequest event handler of the AIPrompt that is used internally by the GridToolBarAIAssistantTool:

Submit the Request property of the OnPromptRequest event argument to the API endpoint of your AI service.
Return a serialized GridAIResponse from your API endpoint.
Set the Response property of the AIPromptPromptRequestEventArgs event argument to the string response of the API endpoint. Alternatively, execute the Grid ProcessAIResponseAsync() method and provide the API response as a string argument.

private async Task OnAIPromptRequest(AIPromptPromptRequestEventArgs args)
{
    try
    {
        HttpResponseMessage requestResult = await this.HttpClientInstance.PostAsJsonAsync("https://.....", args.Request);
        string resultContent = await requestResult.Content.ReadAsStringAsync();
        GridAIResponse aiResponse = await requestResult.Content.ReadFromJsonAsync<GridAIResponse>();

        args.Output = $"The request was processed. {string.Join(". ", aiResponse.Messages)}.";

        args.Response = resultContent;
    }
    catch (Exception)
    {
        args.Output = "The request returned no results. Try another request.";
    }
}

Examples

The following online demos show complete implementations of the Grid AI smart functionality. These examples use a Telerik-hosted AI service for demonstration purposes only. See Integration with Telerik.AI.SmartComponents.Extensions for more information on how you can implement your own server-side AI service to be compatible with the Telerik Grid.

Next Steps

Use a Grid AI Column Assistant to perform AI operations that target a specific Grid data item