Core Data Grid AI Toolbar Assistant
The Telerik UI Grid provides a built-in AI Assistant toolbar tool that allows users to interact with the Grid using natural language prompts. Use this feature to enable your end users to perform complex data operations like sorting, filtering, grouping, and highlighting without having to use the specific UI controls.
The AI Assistant interprets user requests and automatically applies the corresponding Grid operations, making data exploration more intuitive and accessible. The toolbar integrates an AIPrompt component that enables natural language interaction with your custom AI service.
AI Assistant Tool Basic Setup
The desired data operations (
Filterable,Sortable,Groupable) must be enabled for the Grid, so that the AI Assistant can perform them on the Grid data.
To configure the Grid's AI Assistant toolbar tool:
- Setup data binding in the Grid and enable the required data operations that the AI must control:
@(Html.Kendo().Grid<PatientRecord>()
.Name("grid")
.Filterable()
.Groupable()
.Sortable()
... // Additional configuration options.
)- Enable the
AiAssistant()tool in the Grid's toolbar:
@(Html.Kendo().Grid<PatientRecord>()
.Name("grid")
.ToolBar(t =>
{
t.AIAssistant();
})
... // Additional configuration options.
)- Configure the
Serviceoption to point to the AI service endpoint:
@(Html.Kendo().Grid<PatientRecord>()
.Name("grid")
.AI(ai => ai
.Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")
)
... // Additional configuration options.
)The AI service defines the endpoint where your natural language queries will be processed. It must point to your custom AI service that can understand your domain-specific data and business logic.
AI Service Communication
The AI Toolbar Assistant supports three main integration approaches for connecting to your AI service:
- 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.
For detailed information about each integration approach, including code examples and best practices, see Smart Grid AI Assistant Tools Setup.
Customization Options
The AI Toolbar Assistant provides various configuration options to customize the experience based on your application requirements:
AIPrompt Customization
The AI Toolbar Assistant utilizes the AIPrompt component internally to provide conversational interface. You can customize the AIPrompt interface and user interaction by using the aiPromptSettings property of the tool.
This property allows you to add promptSuggestions tailored to your specific use case that can guide users with examples of what your AI service can understand. Furthermore, the speechToTextButton setting provides voice input capabilities for enhancing accessibility in your application.
.AIAssistant(aiAsst => aiAsst
.PromptSuggestions(new[]
{
"Sort by Amount descending and highlight only failed transactions",
"Display 25 items per page",
"Lock the Amount column",
"Reorder Account Type to be first",
"Export to PDF with file name 'report'"
})
.PromptTextArea(p => p.Rows(2).Resize(TextAreaResize.Auto).MaxRows(5))
)Window Appearance
You can also customize the appearance of the Window component, where the AIPrompt of the toolbar tool is rendered.
To achieve this, use the AiWindowSettings property of the kendoGridAIAssistantTool directive, which allows you to control the positioning and visual appearance of the Window to match your application's design and requirements.
.AI(ai => ai
.AIAssistantWindow(ws => ws.Width(558).Actions(a => a.Minimize().Close()))
)