Skip to content

Commit 4bb4b75

Browse files
Copilotxristianstefanov
Copilot
and
xristianstefanov
committed
Add Prompt-Controlled DataGrid documentation
Co-authored-by: xristianstefanov <[email protected]>
1 parent acc6f05 commit 4bb4b75

File tree

4 files changed

+1472
-1
lines changed

4 files changed

+1472
-1
lines changed

‎components/grid/overview.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ The Grid supports custom content in various parts of the component such as data
9898

9999
## More Blazor Grid Features
100100

101+
* [Prompt-Controlled DataGrid](slug:grid-prompt-controlled)—control the Grid through natural language prompts using AI-enabled features for filtering, sorting, grouping, and highlighting.
101102
* [Selection](slug:grid-selection-overview)—select one or multiple rows through clicks or checkboxes or select one or multiple cells through clicks.
102103
* [State](slug:grid-state)—get or set the Grid configuration programmatically.
103104
* [Toolbar](slug:components/grid/features/toolbar)—define user actions in a toolbar above the header cells.
@@ -143,6 +144,7 @@ To execute these methods, obtain reference to the Grid instance via `@ref`.
143144

144145
* [Explore Grid data binding](slug:grid-data-binding)
145146
* [Learn about Grid columns](slug:components/grid/columns/bound)
147+
* [Control the Grid with natural language prompts](slug:grid-prompt-controlled)
146148

147149
## See Also
148150

‎components/grid/smart-ai-features/overview.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ position: 1
1010

1111
# Grid AI Features
1212

13-
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.
13+
The Telerik Grid for Blazor supports AI-enabled features that allow users to control the Grid through natural language prompts. This Prompt-Controlled DataGrid functionality enables users to type plain text instructions, 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.
14+
15+
For a comprehensive overview of the Prompt-Controlled DataGrid feature, see the [Prompt-Controlled DataGrid article](slug:grid-prompt-controlled).
1416

1517
## API Reference
1618

@@ -114,6 +116,7 @@ The following online demos show complete implementations of the Grid AI smart fu
114116

115117
## Next Steps
116118

119+
* [Learn about the Prompt-Controlled DataGrid feature](slug:grid-prompt-controlled)
117120
* [Use a Grid AI Column Assistant to perform AI operations that target a specific Grid data item](slug:grid-ai-column)
118121

119122
## See Also

‎components/grid/smart-ai-features/prompt-controlled-grid.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
title: Prompt-Controlled DataGrid
3+
page_title: Grid - Prompt-Controlled DataGrid
4+
description: Learn how to control the Blazor Grid through natural language prompts using the built-in AI assistant tool.
5+
slug: grid-prompt-controlled
6+
tags: telerik,blazor,grid,ai,prompt,prompt-controlled
7+
published: True
8+
position: 5
9+
---
10+
11+
# Prompt-Controlled DataGrid
12+
13+
The Prompt-Controlled DataGrid feature allows users to interact with the Blazor Grid using natural language prompts. Instead of manually configuring filters, sorting, grouping, and other data operations, users can type their requirements in plain text, and an AI service translates these instructions into actual Grid operations.
14+
15+
This feature enhances user experience by making the Grid more accessible and intuitive, especially for users who may not be familiar with traditional data manipulation interfaces.
16+
17+
## How It Works
18+
19+
The Prompt-Controlled DataGrid feature consists of the following components:
20+
21+
1. **AI Assistant Tool** - A built-in toolbar tool (`GridToolBarAIAssistantTool`) that displays an AI Prompt interface.
22+
2. **Natural Language Processing** - Users type prompts in plain language describing their desired data operations.
23+
3. **AI Service Integration** - The prompts are sent to an AI service that analyzes the request and returns appropriate Grid operations.
24+
4. **Automatic Grid Updates** - The Grid automatically applies the suggested operations (filtering, sorting, grouping, highlighting) to its data.
25+
26+
## Supported Operations
27+
28+
The Prompt-Controlled DataGrid currently supports the following data operations through natural language prompts:
29+
30+
* **Filtering** - Filter data based on specific criteria (for example, "Show only products with price greater than 100").
31+
* **Sorting** - Sort data by one or multiple columns (for example, "Sort by name in ascending order").
32+
* **Grouping** - Group data by specific fields (for example, "Group by category").
33+
* **Highlighting** - Highlight specific rows or cells that meet certain conditions (for example, "Highlight products that are out of stock").
34+
35+
## Getting Started
36+
37+
To implement a Prompt-Controlled DataGrid, follow these steps:
38+
39+
### Step 1: Install Required Package
40+
41+
Add the `Telerik.AI.SmartComponents.Extensions` NuGet package to your Blazor app. This package provides the necessary types and integration support.
42+
43+
````C#.skip-repl
44+
@using Telerik.AI.SmartComponents.Extensions
45+
````
46+
47+
### Step 2: Add the AI Assistant Tool
48+
49+
Add the `GridToolBarAIAssistantTool` to your Grid toolbar. This tool provides the user interface for entering prompts.
50+
51+
````RAZOR.skip-repl
52+
<TelerikGrid>
53+
<GridToolBar>
54+
<GridToolBarAIAssistantTool>
55+
<GridToolBarAIAssistantToolSettings>
56+
<GridToolBarAIAssistantToolPromptSettings OnPromptRequest="@OnAIPromptRequest"
57+
PromptSuggestions="@AIPromptSuggestions">
58+
</GridToolBarAIAssistantToolPromptSettings>
59+
</GridToolBarAIAssistantToolSettings>
60+
</GridToolBarAIAssistantTool>
61+
</GridToolBar>
62+
</TelerikGrid>
63+
````
64+
65+
### Step 3: Handle Prompt Requests
66+
67+
Implement the `OnPromptRequest` event handler to connect the Grid with your AI service. The handler receives the user's prompt and Grid metadata, sends it to the AI service, and returns the response.
68+
69+
````C#.skip-repl
70+
private async Task OnAIPromptRequest(AIPromptPromptRequestEventArgs args)
71+
{
72+
try
73+
{
74+
// Send the prompt to your AI service
75+
HttpResponseMessage requestResult = await HttpClient.PostAsJsonAsync("your-ai-endpoint", args.Request);
76+
string resultContent = await requestResult.Content.ReadAsStringAsync();
77+
GridAIResponse aiResponse = await requestResult.Content.ReadFromJsonAsync<GridAIResponse>();
78+
79+
// Set the AI response message
80+
args.Output = $"Applied: {string.Join(", ", aiResponse.Messages)}";
81+
82+
// Apply the AI-suggested operations to the Grid
83+
args.Response = resultContent;
84+
}
85+
catch (Exception)
86+
{
87+
args.Output = "Unable to process the request. Please try again.";
88+
}
89+
}
90+
````
91+
92+
### Step 4: (Optional) Add Prompt Suggestions
93+
94+
Provide predefined prompt suggestions to help users get started quickly.
95+
96+
````C#.skip-repl
97+
private List<string> AIPromptSuggestions { get; set; } = new()
98+
{
99+
"Show products with price over $50",
100+
"Group by category and sort by price",
101+
"Highlight out of stock items",
102+
"Filter discontinued products"
103+
};
104+
````
105+
106+
## Example Use Cases
107+
108+
The Prompt-Controlled DataGrid is ideal for various scenarios:
109+
110+
* **Business Intelligence Dashboards** - Allow non-technical users to explore data without learning complex filtering interfaces.
111+
* **Data Analysis Tools** - Enable analysts to quickly manipulate data views using natural language.
112+
* **Customer Support Portals** - Help support staff find relevant information faster.
113+
* **Enterprise Applications** - Improve productivity by reducing the learning curve for new users.
114+
115+
## API Reference
116+
117+
The following types are essential for implementing a Prompt-Controlled DataGrid:
118+
119+
| Type | Description |
120+
| --- | --- |
121+
| `GridAIRequestDescriptor` | Contains the user's prompt and Grid column metadata. |
122+
| `GridAIResponse` | Contains the AI service response with suggested data operations. |
123+
| `GridAIResult` | Contains converted objects compatible with Grid state for more granular control. |
124+
125+
The Grid provides these methods for working with AI operations:
126+
127+
| Method | Description |
128+
| --- | --- |
129+
| `GetAIRequest(string prompt)` | Returns a `GridAIRequestDescriptor` with the user prompt and Grid metadata. |
130+
| `ProcessAIResponseAsync(string response)` | Processes the AI response and applies all suggested operations to the Grid. |
131+
| `GetAIResult(string response)` | Returns a `GridAIResult` for more granular control over applying operations. |
132+
133+
## Complete Example
134+
135+
For a complete, runnable example of a Prompt-Controlled DataGrid, refer to these live demos:
136+
137+
* [Grid AI Data Operations](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
138+
* [Grid AI Data Highlight](https://demos.telerik.com/blazor-ui/grid/ai-highlight)
139+
140+
>note The demos use a Telerik-hosted AI service for demonstration purposes only. For production use, implement your own AI service. See [Integration with Telerik.AI.SmartComponents.Extensions](slug:common-features-telerik-ai-smartcomponents-extensions-integration) for details.
141+
142+
## Related Articles
143+
144+
* [Grid AI Features Overview](slug:grid-ai-overview)
145+
* [Grid AI Column Assistant](slug:grid-ai-column)
146+
* [AIPrompt Component](slug:aiprompt-overview)
147+
* [Integration with Telerik.AI.SmartComponents.Extensions](slug:common-features-telerik-ai-smartcomponents-extensions-integration)
148+
149+
## See Also
150+
151+
* [Live Demo: Grid AI Data Operations](https://demos.telerik.com/blazor-ui/grid/ai-data-operations)
152+
* [Live Demo: Grid AI Data Highlight](https://demos.telerik.com/blazor-ui/grid/ai-highlight)
153+
* [Grid API Reference](slug:Telerik.Blazor.Components.TelerikGrid-1)

0 commit comments

Comments
 (0)