From 78dbf69c282255ca30b07a5c1c88d6cbdf485f93 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 11 Aug 2025 19:15:40 +0300
Subject: [PATCH 01/14] docs(Grid): Add documentation about AI features
---
.../smart-ai-features/ai-column-assistant.md | 138 ++++++++++++++++++
components/grid/smart-ai-features/overview.md | 123 ++++++++++++++++
components/grid/toolbar.md | 1 +
docs-builder.yml | 3 +
4 files changed, 265 insertions(+)
create mode 100644 components/grid/smart-ai-features/ai-column-assistant.md
create mode 100644 components/grid/smart-ai-features/overview.md
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
new file mode 100644
index 0000000000..57b00c6510
--- /dev/null
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -0,0 +1,138 @@
+---
+title: AI Column Assistant
+page_title: Grid - AI Column Assistant
+description: Learn how to use the Telerik Grid for Blazor together with an InlineAIPrompt component to generate AI content and update the Grid data items.
+slug: grid-ai-column
+tags: telerik,blazor,grid,ai
+published: True
+position: 30
+---
+
+# Grid AI Column Assistant
+
+This article shows how to integrate the Grid with the Inline AI Prompt component in order to allow users to use AI with regard to a specific Grid data item. Depending on the business requirements, the AI model can analyze the Grid data item and suggest additions or modifications.
+
+The suggested algorithm for implementation is the following:
+
+1. [Configure an InlineAIPrompt component that receives and provides the user prompt](#define-inlineaiprompt-component).
+1. [Add a Grid column with a button that displays the InlineAIPrompt component](#add-grid-column-with-button).
+1. (optional) [Implement an additional property of the Grid model class for AI content](#add-grid-column-for-ai-content).
+1. [Update the Grid data or perform another action, based on the AI response](#update-grid-data).
+
+## Define InlineAIPrompt Component
+
+Follow the [InlineAIPrompt component documentation](slug:inlineaiprompt-overview) to configure an Inline AI Prompt component. Users can type an arbitrary prompt or optionally, pick from a predefined list of suggestions.
+
+````RAZOR.skip-repl
+
+
+@code {
+ private TelerikInlineAIPrompt? InlineAIPromptRef { get; set; }
+
+ private string UserPrompt { get; set; } = string.Empty;
+
+ // List optional predefined prompt suggestions.
+ private List PredefinedPromptSuggestions { get; set; } = new();
+
+ // Define possible actions over the AI response.
+ private List ActionsOverAIResponse { get; set; } = new();
+
+ private void OnPredefinedPromptSuggestionSelect(InlineAIPromptCommandExecuteEventArgs args)
+ {
+ // This handler executes when the user selects a predefined prompt.
+
+ Prompt = args.Command.Prompt;
+ }
+
+ private async Task SendAIRequestAndGetResponse(InlineAIPromptPromptRequestEventArgs args)
+ {
+ // This handler executes when the user submits their AI prompt.
+ // Set the AI service response to args.Output.
+
+ args.Output = "The AI response to the user prompt.";
+ }
+
+ private async Task OnAIResponseActionClick(InlineAIPromptOutputActionClickEventArgs args)
+ {
+ // This handler executes when the user clicks on an action from ActionsOverAIResponse.
+ // You can modify the Grid data source here.
+ }
+}
+````
+
+## Add Grid Column with Button
+
+Add a Grid column with no `Field`. The column must have a `` to render a button that saves the current Grid data item and displays the InlineAIPrompt component.
+
+````RAZOR.skip-repl
+
+
+ @{
+ var dataItem = (GridModel)context;
+
+
+ }
+
+
+
+@code {
+ // GridModel is the Grid data item type
+ private GridModel? DataItemForAI { get; set; }
+
+ private async Task OnAIButtonClick(GridModel dataItem, MouseEventArgs args)
+ {
+ // Get the clicked Grid data item for later use.
+ DataItemForAI = dataItem;
+
+ // Show the InlineAIPrompt.
+ await InlineAIPromptRef.ShowAsync(args.ClientX, args.ClientY);
+ }
+}
+````
+
+## Add Grid Column for AI Content
+
+You can save the AI response in a separate model property in the Grid data. To display that AI content, define its dedicated column:
+
+````RAZOR.skip-repl
+
+````
+
+## Update Grid Data
+
+Update the Grid data in the `OnOutputActionClick` event of the InlineAIPrompt. Theoretically, you can also update the Grid data in the `OnPromptRequest` event of the InlineAIPrompt. However, this approach skips the user review and approval, which is normaly not recommended.
+
+````C#.skip-repl
+// DataItemForAI is populated in the OnClick handler of the Button (OnAIButtonClick method)
+private GridModel? DataItemForAI { get; set; }
+
+// This is the OnOutputActionClick event handler of the InlineAIPrompt
+private async Task OnAIResponseActionClick(InlineAIPromptOutputActionClickEventArgs args)
+{
+ // Is the user approves the AI response, update the Grid data
+ // args.Action is a member of the ActionsOverAIResponse collection.
+ if (args.Action.Name == "Insert")
+ {
+ DataItemForAI.AIGenerated = args.Output;
+
+ await InlineAIPromptRef.HideAsync();
+ }
+}
+````
+
+## Example
+
+See the [Grid AI Column Assistant live demo](https://demos.telerik.com/blazor-ui/grid/ai-data-operations) for a complete runnable example. The demos uses a Telerik-hosted AI service for demonstration purposes only. You need to implement your own AI service that understands your specific data and business requirements.
+
+## See Also
+
+* [InlineAIPrompt Overview](slug:inlineaiprompt-overview)
+* [Grid Live Demo](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
+* [Grid API](slug:Telerik.Blazor.Components.TelerikGrid-1)
diff --git a/components/grid/smart-ai-features/overview.md b/components/grid/smart-ai-features/overview.md
new file mode 100644
index 0000000000..577111aa0e
--- /dev/null
+++ b/components/grid/smart-ai-features/overview.md
@@ -0,0 +1,123 @@
+---
+title: Overview
+page_title: Grid - Smart AI Features Overview
+description: Learn how to enable smart AI-powered operations with the Blazor Grid data.
+slug: grid-ai-overview
+tags: telerik,blazor,grid,ai
+published: True
+position: 1
+---
+
+# Grid AI Features
+
+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.
+
+### Types
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| 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 iclude 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](slug:grid-state#information-in-the-grid-state). Use this type if you want to [modify the Grid state](slug:grid-state#methods) 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](slug:grid-state#methods). 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
+
+Install the `Telerik.AI.SmartComponents.Extensions` NuGet package in your Blazor app.
+
+Then, import the `Telerik.AI.SmartComponents.Extensions` namespace in your `.razor` file or globally in `_Imports.razor`.
+
+````RAZOR.skip-repl
+@using Telerik.AI.SmartComponents.Extensions
+````
+
+### Add GridToolBarAIAssistantTool
+
+Add a `GridToolBarAIAssistantTool` tool to the [Grid ToolBar](slug:components/grid/features/toolbar). Subscribe to the `OnPromptRequest` event of the nested `` component. It is effectively the `OnPromptRequest` event of a [Telerik AIPrompt component](slug:aiprompt-events). Optionally, define some [`PromptSuggestions`](slug:aiprompt-views-prompt).
+
+````RAZOR.skip-repl
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List 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`:
+
+1. Submit the `Request` property of the `OnPromptRequest` event argument to the API endpoint of your AI service.
+1. Return a serialized `GridAIResponse` from your API endpoint.
+1. 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.
+
+````C#.skip-repl
+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();
+
+ 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
+
+See full examples of the Grid AI smart functionality in the following online demos:
+
+* [Grid AI Data Operations](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
+* [Grid AI Data Highlight](https://demos.telerik.com/blazor-ui/grid/ai-highlight)
+
+## Next Steps
+
+* [Use a Grid AI Column Assistant to perform AI operations that target a specific Grid data item](slug:grid-ai-column)
+
+## See Also
+
+* [InlineAIPrompt Overview](slug:inlineaiprompt-overview)
+* [Live Demo: Grid AI Data Operations](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
+* [Live Demo: Grid AI Data Highlight](https://demos.telerik.com/blazor-ui/grid/ai-highlight)
+* [Grid API](slug:Telerik.Blazor.Components.TelerikGrid-1)
diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md
index 718d1ca8b2..7cf783c8cf 100644
--- a/components/grid/toolbar.md
+++ b/components/grid/toolbar.md
@@ -23,6 +23,7 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
| Tool Name | Tool Tag | Description |
| --- | --- | --- |
| Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:grid-editing-overview#events). |
+| AI Assistant | `GridToolBarAIAssistantTool` | An tool that shows an [AI Prompt component](slug:aiprompt-overview) for AI-enabled data operations on the Grid data. See [Grid AI Features](slug:grid-ai-overview) for details and examples. |
| Cancel | `GridToolBarCancelEditTool` | Cancels the changes for the selected row. [Row selection](slug:grid-selection-row) and [`Inline`](slug:grid-editing-inline) or [`Popup`](slug:grid-editing-popup) editing mode are required. |
| CsvExport | `GridToolBarCsvExportTool` | An export command for CSV files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
| Delete | `GridToolBarDeleteTool` | Deletes the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
diff --git a/docs-builder.yml b/docs-builder.yml
index b29b20f0d6..b1564ce140 100644
--- a/docs-builder.yml
+++ b/docs-builder.yml
@@ -529,6 +529,9 @@ meta:
"*components/grid/columns":
title: Columns
position: 5
+ "*components/grid/smart-ai-features":
+ title: Smart AI Features
+ position: 8
"*components/gantt/timeline/templates":
title: Templates
position: 15
From 4424ee67a004ccc3cd44fcffb45751f8ca6815c8 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 10:38:41 +0300
Subject: [PATCH 02/14] Add Telerik AI Extensions docs
---
...h-telerik-ai-smartcomponents-extensions.md | 309 ++++++++++++++++++
.../smart-ai-features/ai-column-assistant.md | 3 +-
components/grid/smart-ai-features/overview.md | 7 +-
3 files changed, 316 insertions(+), 3 deletions(-)
create mode 100644 common-features/integration-with-telerik-ai-smartcomponents-extensions.md
diff --git a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
new file mode 100644
index 0000000000..d07f3a5ba2
--- /dev/null
+++ b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
@@ -0,0 +1,309 @@
+---
+title: Integration with Telerik.AI.SmartComponents.Extensions
+page_title: Integration with Telerik.AI.SmartComponents.Extensions
+description: How to integrate the UI for Blazor components with Telerik.AI.SmartComponents.Extensions
+slug: common-features-telerik-ai-smartcomponents-extensions-integration
+tags: telerik,blazor,aiprompt,ai,extensions,integration
+published: True
+position: 45
+---
+
+# Getting Started with Telerik.AI.SmartComponents.Extensions
+
+## Overview
+
+The `Telerik.AI.SmartComponents.Extensions` library provides AI-powered functionality for Grid operations, enabling natural language processing for filtering, sorting, grouping, and highlighting data. This library integrates seamlessly with Microsoft.Extensions.AI and Azure OpenAI to provide intelligent Grid interactions.
+
+## Prerequisites
+
+- .NET 8.0 or later
+- `Microsoft.Extensions.AI` package
+- Azure OpenAI or OpenAI API access
+- ASP.NET Core (for web API scenarios)
+
+## Installation
+
+Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. The package is hosted on `nuget.org`.
+
+Add the required dependency packages:
+
+* `Microsoft.Extensions.AI`
+* `Azure.AI.OpenAI`
+
+## Configuration
+
+### 1. Configure AI Services in Program.cs
+
+```csharp
+using Microsoft.Extensions.AI;
+using Azure.AI.OpenAI;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Configure Azure OpenAI Chat Client
+builder.Services.AddSingleton(serviceProvider =>
+{
+ var configuration = serviceProvider.GetRequiredService();
+ var endpoint = configuration["AI:AzureOpenAI:Endpoint"];
+ var apiKey = configuration["AI:AzureOpenAI:Key"];
+ var modelId = configuration["AI:AzureOpenAI:Chat:ModelId"];
+
+ var client = new AzureOpenAIClient(new Uri(endpoint), new Azure.AzureKeyCredential(apiKey));
+ return client.AsChatClient(modelId);
+});
+
+builder.Services.AddControllers();
+var app = builder.Build();
+```
+
+### 2. Configure appsettings.json
+
+```json
+{
+ "AI": {
+ "AzureOpenAI": {
+ "Endpoint": "https://your-openai-resource.openai.azure.com/",
+ "Key": "your-api-key-here",
+ "Chat": {
+ "ModelId": "gpt-4"
+ }
+ }
+ }
+}
+```
+
+## Basic Usage
+
+### 1. Create a Grid Controller
+
+```csharp
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.AI;
+using OpenAI.Chat;
+using Telerik.AI.SmartComponents.Extensions;
+
+[ApiController]
+[Route("[controller]/[action]")]
+public class GridController : Controller
+{
+ private readonly IChatClient _chatClient;
+
+ public GridController(IChatClient chatClient)
+ {
+ _chatClient = chatClient;
+ }
+
+ [HttpPost]
+ [Route("/grid/smart-state")]
+ public async Task SmartState([FromBody] GridAIRequest request)
+ {
+ // Create chat completion options
+ var options = new ChatCompletionOptions();
+
+ // Add Grid-specific chat tools for AI processing
+ ChatTools.AddGridChatTools(
+ request.Columns.Select(x => new GridAIColumn {
+ Field = x.Field,
+ Values = x.Values
+ }).ToList(),
+ options
+ );
+
+ // Convert request contents to chat messages
+ var conversationMessages = request.Contents
+ .Select(m => new UserChatMessage(m.Text))
+ .ToList();
+
+ // Get the chat service and process the request
+ var chatService = _chatClient.GetService();
+ var completion = await chatService.CompleteChatAsync(conversationMessages, options);
+
+ // Extract Grid options from AI response
+ var gridOptions = completion.ToolCalls.ExtractGridOptions();
+
+ return Json(gridOptions);
+ }
+}
+```
+
+### 2. Define Your Data Model
+
+```csharp
+public class Employee
+{
+ public string FirstName { get; set; }
+ public string LastName { get; set; }
+ public int Age { get; set; }
+ public string Department { get; set; }
+ public decimal Salary { get; set; }
+ public string City { get; set; }
+ public string Gender { get; set; }
+}
+```
+
+### 3. Create Grid AI Request
+
+```csharp
+var request = new GridAIRequest
+{
+ Columns = new List
+ {
+ new() { Field = "FirstName" },
+ new() { Field = "LastName" },
+ new() { Field = "Age" },
+ new() { Field = "Department", Values = new[] { "IT", "HR", "Finance", "Marketing" } },
+ new() { Field = "Salary" },
+ new() { Field = "City", Values = new[] { "New York", "London", "Paris", "Tokyo" } },
+ new() { Field = "Gender", Values = new[] { "Male", "Female" } }
+ },
+ Contents = new List
+ {
+ new() { Type = "text", Text = "Show me all employees in IT department" }
+ }
+};
+```
+
+## Advanced Features
+
+### 1. Filtering Operations
+
+The library supports various natural language filtering queries:
+
+```csharp
+// Example queries that work with the AI:
+"Show me employees older than 30"
+"Filter people in IT department"
+"Get employees whose name starts with J"
+"Show me men with salary greater than 60000"
+```
+
+### 2. Sorting Operations
+
+```csharp
+// Natural language sorting examples:
+"Sort by age descending"
+"Order by salary ascending"
+"Sort by department, then by name"
+```
+
+### 3. Grouping Operations
+
+```csharp
+// Grouping examples:
+"Group by department"
+"Group by city, then by age"
+"Group employees by gender descending"
+```
+
+### 4. Highlighting Operations
+
+```csharp
+// Highlighting examples:
+"Highlight employees whose name starts with A"
+"Mark salary cells of people older than 30"
+"Highlight lastname cells of IT employees"
+```
+
+## Working with Grid Responses
+
+The AI service returns a `GridAIResponse` object containing the processed operations:
+
+```csharp
+public async Task ProcessGridRequest(GridAIRequest request)
+{
+ var options = new ChatCompletionOptions();
+ ChatTools.AddGridChatTools(request.Columns, options);
+
+ var messages = request.Contents.Select(m => new UserChatMessage(m.Text)).ToList();
+ var completion = await _chatClient.CompleteChatAsync(messages, options);
+
+ var response = completion.ToolCalls.ExtractGridOptions();
+
+ // The response contains:
+ // - response.Filter: Composite filter conditions
+ // - response.Sort: Array of sort descriptors
+ // - response.Group: Array of group descriptors
+ // - response.Highlight: Array of highlight descriptors
+ // - response.Messages: Status/info messages
+
+ return response;
+}
+```
+
+## Filter Types
+
+The library supports various filter operators:
+
+- `equalto`: Exact match
+- `contains`: Contains substring
+- `startswith`: Starts with text
+- `endswith`: Ends with text
+- `greaterthan`: Greater than (numeric)
+- `lessthan`: Less than (numeric)
+- `greaterthanorequal`: Greater than or equal
+- `lessthanorequal`: Less than or equal
+
+## Best Practices
+
+### 1. Column Configuration
+
+When the options for the column are of Enum type provide meaningful column values to help the AI understand your data:
+
+```csharp
+new GridAIColumn
+{
+ Field = "Status",
+ // only when only a set of values are used
+ Values = new[] { "Active", "Inactive", "Pending" }
+}
+```
+
+### 2. Error Handling
+
+```csharp
+try
+{
+ var completion = await chatService.CompleteChatAsync(messages, options);
+ var response = completion.ToolCalls.ExtractGridOptions();
+ return Json(response);
+}
+catch (Exception ex)
+{
+ return StatusCode(500, $"AI processing failed: {ex.Message}");
+}
+```
+
+### 3. Input Validation
+
+```csharp
+if (request?.Columns == null || !request.Columns.Any())
+{
+ return BadRequest("Columns are required");
+}
+
+if (request.Contents == null || !request.Contents.Any())
+{
+ return BadRequest("Content is required");
+}
+```
+
+## Testing
+
+The library includes comprehensive test coverage. You can run tests to verify functionality:
+
+```bash
+cd tests
+dotnet test
+```
+
+For integration testing with your specific data model, create test cases that verify AI responses match expected Grid operations.
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Invalid URI Format**: Ensure your Azure OpenAI endpoint is correctly formatted in configuration
+2. **API Key Issues**: Verify your API key has proper permissions and is not expired
+3. **Model Availability**: Ensure the specified model ID is deployed in your Azure OpenAI resource
+4. **Token Limits**: Be mindful of token limits when processing large datasets
+
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
index 57b00c6510..077c442ac6 100644
--- a/components/grid/smart-ai-features/ai-column-assistant.md
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -129,10 +129,11 @@ private async Task OnAIResponseActionClick(InlineAIPromptOutputActionClickEventA
## Example
-See the [Grid AI Column Assistant live demo](https://demos.telerik.com/blazor-ui/grid/ai-data-operations) for a complete runnable example. The demos uses a Telerik-hosted AI service for demonstration purposes only. You need to implement your own AI service that understands your specific data and business requirements.
+See the [Grid AI Column Assistant live demo](https://demos.telerik.com/blazor-ui/grid/ai-data-operations) for a complete runnable example. The demo uses a Telerik-hosted AI service for demonstration purposes only. See [Integration with Telerik.AI.SmartComponents.Extensions](slug:common-features-telerik-ai-smartcomponents-extensions-integration) for more information on how you can implement your own server-side AI service to be compatible with the Telerik Grid.
## See Also
* [InlineAIPrompt Overview](slug:inlineaiprompt-overview)
* [Grid Live Demo](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
* [Grid API](slug:Telerik.Blazor.Components.TelerikGrid-1)
+* [Integration with Telerik.AI.SmartComponents.Extensions](slug:common-features-telerik-ai-smartcomponents-extensions-integration)
diff --git a/components/grid/smart-ai-features/overview.md b/components/grid/smart-ai-features/overview.md
index 577111aa0e..0523809a30 100644
--- a/components/grid/smart-ai-features/overview.md
+++ b/components/grid/smart-ai-features/overview.md
@@ -16,6 +16,8 @@ This article describes the built-in AI-enabled features of the Telerik Grid for
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](slug:common-features-telerik-ai-smartcomponents-extensions-integration) for more information on how you can implement your server-side AI service to be compatible with the Telerik Grid.
+
### Types
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
@@ -42,7 +44,7 @@ Use the following steps to implement a scenario with built-in Grid AI integratio
### Install NuGet Package
-Install the `Telerik.AI.SmartComponents.Extensions` NuGet package in your Blazor app.
+Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. The package is hosted on `nuget.org`.
Then, import the `Telerik.AI.SmartComponents.Extensions` namespace in your `.razor` file or globally in `_Imports.razor`.
@@ -106,7 +108,7 @@ private async Task OnAIPromptRequest(AIPromptPromptRequestEventArgs args)
## Examples
-See full examples of the Grid AI smart functionality in the following online demos:
+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](slug:common-features-telerik-ai-smartcomponents-extensions-integration) for more information on how you can implement your own server-side AI service to be compatible with the Telerik Grid.
* [Grid AI Data Operations](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
* [Grid AI Data Highlight](https://demos.telerik.com/blazor-ui/grid/ai-highlight)
@@ -121,3 +123,4 @@ See full examples of the Grid AI smart functionality in the following online dem
* [Live Demo: Grid AI Data Operations](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
* [Live Demo: Grid AI Data Highlight](https://demos.telerik.com/blazor-ui/grid/ai-highlight)
* [Grid API](slug:Telerik.Blazor.Components.TelerikGrid-1)
+* [Integration with Telerik.AI.SmartComponents.Extensions](slug:common-features-telerik-ai-smartcomponents-extensions-integration)
From 2bb8800a88d8a2d5fa899a08810165b959fa03ab Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:34:46 +0300
Subject: [PATCH 03/14] Update components/grid/toolbar.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/grid/toolbar.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md
index 7cf783c8cf..5e91335e3c 100644
--- a/components/grid/toolbar.md
+++ b/components/grid/toolbar.md
@@ -23,7 +23,7 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
| Tool Name | Tool Tag | Description |
| --- | --- | --- |
| Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:grid-editing-overview#events). |
-| AI Assistant | `GridToolBarAIAssistantTool` | An tool that shows an [AI Prompt component](slug:aiprompt-overview) for AI-enabled data operations on the Grid data. See [Grid AI Features](slug:grid-ai-overview) for details and examples. |
+| AI Assistant | `GridToolBarAIAssistantTool` | A tool that shows an [AI Prompt component](slug:aiprompt-overview) for AI-enabled data operations on the Grid data. See [Grid AI Features](slug:grid-ai-overview) for details and examples. |
| Cancel | `GridToolBarCancelEditTool` | Cancels the changes for the selected row. [Row selection](slug:grid-selection-row) and [`Inline`](slug:grid-editing-inline) or [`Popup`](slug:grid-editing-popup) editing mode are required. |
| CsvExport | `GridToolBarCsvExportTool` | An export command for CSV files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
| Delete | `GridToolBarDeleteTool` | Deletes the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
From 0a9749e52eb03ca052ae907952a8af4d9f3ea046 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:36:15 +0300
Subject: [PATCH 04/14] Update components/grid/smart-ai-features/overview.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/grid/smart-ai-features/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/overview.md b/components/grid/smart-ai-features/overview.md
index 0523809a30..e80fc4c043 100644
--- a/components/grid/smart-ai-features/overview.md
+++ b/components/grid/smart-ai-features/overview.md
@@ -25,7 +25,7 @@ See [Integration with Telerik.AI.SmartComponents.Extensions](slug:common-feature
| 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 iclude 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. |
+| `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](slug:grid-state#information-in-the-grid-state). Use this type if you want to [modify the Grid state](slug:grid-state#methods) in a more granular fashion, rather then apply all changes suggested by AI at once. |
### Grid Methods
From 7fb1a7b2a05c217652e1d9a5b5fe77c62bfc4854 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:36:23 +0300
Subject: [PATCH 05/14] Update
components/grid/smart-ai-features/ai-column-assistant.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/grid/smart-ai-features/ai-column-assistant.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
index 077c442ac6..1eda8cfda7 100644
--- a/components/grid/smart-ai-features/ai-column-assistant.md
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -10,7 +10,7 @@ position: 30
# Grid AI Column Assistant
-This article shows how to integrate the Grid with the Inline AI Prompt component in order to allow users to use AI with regard to a specific Grid data item. Depending on the business requirements, the AI model can analyze the Grid data item and suggest additions or modifications.
+This article shows how to integrate the Grid with the Inline AI Prompt component to allow users to use AI for a specific Grid data item. Depending on the business requirements, the AI model can analyze the Grid data item and suggest additions or modifications.
The suggested algorithm for implementation is the following:
From c5fbd87838102f173cecdff6e824109061e8e099 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:36:32 +0300
Subject: [PATCH 06/14] Update
components/grid/smart-ai-features/ai-column-assistant.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/grid/smart-ai-features/ai-column-assistant.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
index 1eda8cfda7..41c2fd29bf 100644
--- a/components/grid/smart-ai-features/ai-column-assistant.md
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -107,7 +107,7 @@ You can save the AI response in a separate model property in the Grid data. To d
## Update Grid Data
-Update the Grid data in the `OnOutputActionClick` event of the InlineAIPrompt. Theoretically, you can also update the Grid data in the `OnPromptRequest` event of the InlineAIPrompt. However, this approach skips the user review and approval, which is normaly not recommended.
+Update the Grid data in the `OnOutputActionClick` event of the InlineAIPrompt. Theoretically, you can also update the Grid data in the `OnPromptRequest` event of the InlineAIPrompt. However, this approach skips the user review and approval, which is normally not recommended.
````C#.skip-repl
// DataItemForAI is populated in the OnClick handler of the Button (OnAIButtonClick method)
From ea89822702e338ba8e1cd11b4995e724f5d70c7c Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:36:47 +0300
Subject: [PATCH 07/14] Update
components/grid/smart-ai-features/ai-column-assistant.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/grid/smart-ai-features/ai-column-assistant.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
index 41c2fd29bf..2fd503bc1b 100644
--- a/components/grid/smart-ai-features/ai-column-assistant.md
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -110,7 +110,7 @@ You can save the AI response in a separate model property in the Grid data. To d
Update the Grid data in the `OnOutputActionClick` event of the InlineAIPrompt. Theoretically, you can also update the Grid data in the `OnPromptRequest` event of the InlineAIPrompt. However, this approach skips the user review and approval, which is normally not recommended.
````C#.skip-repl
-// DataItemForAI is populated in the OnClick handler of the Button (OnAIButtonClick method)
+// DataItemForAI is populated in the OnClick handler of the Button (OnAIButtonClick method).
private GridModel? DataItemForAI { get; set; }
// This is the OnOutputActionClick event handler of the InlineAIPrompt
From 6660d4642ab648b6fb1bf2a2be4f5eb70e6f9197 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:37:18 +0300
Subject: [PATCH 08/14] Update
components/grid/smart-ai-features/ai-column-assistant.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/grid/smart-ai-features/ai-column-assistant.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
index 2fd503bc1b..0e77100550 100644
--- a/components/grid/smart-ai-features/ai-column-assistant.md
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -116,7 +116,7 @@ private GridModel? DataItemForAI { get; set; }
// This is the OnOutputActionClick event handler of the InlineAIPrompt
private async Task OnAIResponseActionClick(InlineAIPromptOutputActionClickEventArgs args)
{
- // Is the user approves the AI response, update the Grid data
+ // If the user approves the AI response, update the Grid data.
// args.Action is a member of the ActionsOverAIResponse collection.
if (args.Action.Name == "Insert")
{
From 076a60f195d17665b1f80a68a4dc516ccf1fa140 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:40:06 +0300
Subject: [PATCH 09/14] Update components/grid/smart-ai-features/overview.md
---
components/grid/smart-ai-features/overview.md | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/components/grid/smart-ai-features/overview.md b/components/grid/smart-ai-features/overview.md
index e80fc4c043..71b36749e2 100644
--- a/components/grid/smart-ai-features/overview.md
+++ b/components/grid/smart-ai-features/overview.md
@@ -44,9 +44,8 @@ Use the following steps to implement a scenario with built-in Grid AI integratio
### Install NuGet Package
-Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. The package is hosted on `nuget.org`.
-
-Then, import the `Telerik.AI.SmartComponents.Extensions` namespace in your `.razor` file or globally in `_Imports.razor`.
+1. Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. The package is hosted on `nuget.org`.
+1. Import the `Telerik.AI.SmartComponents.Extensions` namespace in your `.razor` file or globally in `_Imports.razor`.
````RAZOR.skip-repl
@using Telerik.AI.SmartComponents.Extensions
From e41ebaa51f861439d592f0ac7d8c4a4f0aff88d2 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:41:28 +0300
Subject: [PATCH 10/14] Update
common-features/integration-with-telerik-ai-smartcomponents-extensions.md
---
...egration-with-telerik-ai-smartcomponents-extensions.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
index d07f3a5ba2..6d9ca08ca3 100644
--- a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
+++ b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
@@ -302,8 +302,8 @@ For integration testing with your specific data model, create test cases that ve
### Common Issues
-1. **Invalid URI Format**: Ensure your Azure OpenAI endpoint is correctly formatted in configuration
-2. **API Key Issues**: Verify your API key has proper permissions and is not expired
-3. **Model Availability**: Ensure the specified model ID is deployed in your Azure OpenAI resource
-4. **Token Limits**: Be mindful of token limits when processing large datasets
+* Invalid URI Format: Ensure your Azure OpenAI endpoint is correctly formatted in configuration
+* API Key Issues: Verify your API key has proper permissions and is not expired
+* Model Availability: Ensure the specified model ID is deployed in your Azure OpenAI resource
+* Token Limits: Be mindful of token limits when processing large datasets
From 0508a65e572dc145664dc1666487f05a9c8a11c2 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:41:50 +0300
Subject: [PATCH 11/14] Update
common-features/integration-with-telerik-ai-smartcomponents-extensions.md
---
...egration-with-telerik-ai-smartcomponents-extensions.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
index 6d9ca08ca3..8b3c97227f 100644
--- a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
+++ b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
@@ -302,8 +302,8 @@ For integration testing with your specific data model, create test cases that ve
### Common Issues
-* Invalid URI Format: Ensure your Azure OpenAI endpoint is correctly formatted in configuration
-* API Key Issues: Verify your API key has proper permissions and is not expired
-* Model Availability: Ensure the specified model ID is deployed in your Azure OpenAI resource
-* Token Limits: Be mindful of token limits when processing large datasets
+* Invalid URI Format: Ensure your Azure OpenAI endpoint is correctly formatted in configuration.
+* API Key Issues: Verify your API key has proper permissions and is not expired.
+* Model Availability: Ensure the specified model ID is deployed in your Azure OpenAI resource.
+* Token Limits: Be mindful of token limits when processing large datasets.
From 6904f8c15652a724cc71661a4c446ecb7b123155 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:42:55 +0300
Subject: [PATCH 12/14] Update components/grid/smart-ai-features/overview.md
---
components/grid/smart-ai-features/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/overview.md b/components/grid/smart-ai-features/overview.md
index 71b36749e2..dca1fd8073 100644
--- a/components/grid/smart-ai-features/overview.md
+++ b/components/grid/smart-ai-features/overview.md
@@ -44,7 +44,7 @@ Use the following steps to implement a scenario with built-in Grid AI integratio
### Install NuGet Package
-1. Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. The package is hosted on `nuget.org`.
+1. Add the [`Telerik.AI.SmartComponents.Extensions` NuGet package](https://www.nuget.org/packages/Telerik.AI.SmartComponents.Extensions) to your Blazor app.
1. Import the `Telerik.AI.SmartComponents.Extensions` namespace in your `.razor` file or globally in `_Imports.razor`.
````RAZOR.skip-repl
From 02f2eebb2c2ed30f2b46221c7952f57f440009fc Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:44:06 +0300
Subject: [PATCH 13/14] Update
common-features/integration-with-telerik-ai-smartcomponents-extensions.md
---
...ation-with-telerik-ai-smartcomponents-extensions.md | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
index 8b3c97227f..c513d41a85 100644
--- a/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
+++ b/common-features/integration-with-telerik-ai-smartcomponents-extensions.md
@@ -23,12 +23,10 @@ The `Telerik.AI.SmartComponents.Extensions` library provides AI-powered function
## Installation
-Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. The package is hosted on `nuget.org`.
-
-Add the required dependency packages:
-
-* `Microsoft.Extensions.AI`
-* `Azure.AI.OpenAI`
+1. Add the [`Telerik.AI.SmartComponents.Extensions` NuGet package](https://www.nuget.org/packages/Telerik.AI.SmartComponents.Extensions) to your project.
+1. Add the required dependency packages:
+ * `Microsoft.Extensions.AI`
+ * `Azure.AI.OpenAI`
## Configuration
From 7766bc707acd531e1bc793e6321db30dd1df5112 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 12 Aug 2025 11:48:02 +0300
Subject: [PATCH 14/14] Update
components/grid/smart-ai-features/ai-column-assistant.md
---
components/grid/smart-ai-features/ai-column-assistant.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/grid/smart-ai-features/ai-column-assistant.md b/components/grid/smart-ai-features/ai-column-assistant.md
index 0e77100550..52b0c60c4b 100644
--- a/components/grid/smart-ai-features/ai-column-assistant.md
+++ b/components/grid/smart-ai-features/ai-column-assistant.md
@@ -10,7 +10,7 @@ position: 30
# Grid AI Column Assistant
-This article shows how to integrate the Grid with the Inline AI Prompt component to allow users to use AI for a specific Grid data item. Depending on the business requirements, the AI model can analyze the Grid data item and suggest additions or modifications.
+The Grid AI Column Assistant is an integration between the Telerik Inline AI Prompt and Grid components. This article shows how to display an Inline AI Prompt from a Grid column template to allow users to use AI for a specific Grid data item. Depending on the business requirements, the AI model can analyze the Grid data item and suggest additions or modifications.
The suggested algorithm for implementation is the following: