New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid AI Chat Assistant

Updated on Feb 6, 2026

The Angular Grid can be enhanced with an AI-powered chat assistant that allows users to interact with Grid data using natural language commands.

By integrating the Chat component with the Grid's built-in AI helper methods, you can create an intuitive conversational interface where users can perform all supported Smart Grid operations through simple text commands instead of navigating through multiple UI controls.

The demo in this article uses a Telerik-hosted AI service for demonstration purposes only. For production applications, you should implement your own AI service that understands your specific domain, data, and business requirements.

The following example demonstrates how to implement an AI Chat Assistant that enables users to manage Grid data through natural language commands. Click the AI Grid button in the Grid toolbar to open the Chat panel and try inserting a prompt to interact with the data.

Change Theme

Theme

Loading ...

Implementation Steps

To implement an AI Chat Assistant for your Grid, follow the steps below:

Configure the Grid with the features you want to make available through AI commands. For example, enable sortable, filterable, groupable, and pageable to allow AI-driven data operations:
html
```
<kendo-grid
    [kendoGridBinding]="gridData"
    [sortable]="true"
    [filterable]="true"
    [groupable]="true"
    [pageable]="true"
>
</kendo-grid>
```
Implement a method to process user prompts and communicate with your AI service. Use the getAIRequest() helper method of the Grid to generate the request body in suitable format, then send it to your AI service:
typescript
```
private processUserPrompt(prompt: string): void {
    // Generate request body with prompt and column information
    const requestBody = this.grid.getAIRequest(prompt);
    
    // Send request to your AI service
    this.aiService.sendGridPromptRequest(requestBody).subscribe({
        // ...
    });
}
```
The getAIRequest() method returns an object containing role, contents array with the prompt text, and columns array with Grid column information.

When the response returns, use the handleAIResponse() helper to automatically apply all Grid operations based on the received response:

typescript

private processUserPrompt(prompt: string): void {
    // Generate request body with prompt and column information
    const requestBody = this.grid.getAIRequest(prompt);
    
    // Send request to your AI service
    this.aiService.sendGridPromptRequest(requestBody).subscribe({
        next: (response) => {
            if (response.body) {
                // Handle the response and apply operations to the Grid
                this.grid.handleAIResponse(response.body);
                
                // Emit response to display it in the Chat
                this.aiResponseReceived.emit(response.body);
            }
        },
        error: (error) => {
            console.error('AI request failed:', error);
        }
    });
}

The handleAIResponse() method processes the AI service response and applies operations including sorting, filtering, grouping, paging, column management, selection, highlighting, and export.

Set up the Chat component to collect user prompts and display AI responses. Handle the sendMessage event to process new user input and send it to the Grid:

HTML
<kendo-chat
    [messages]="messages"
    [authorId]="user.id"
    [suggestions]="suggestions"
    placeholder="Ask me to sort, filter, or analyze your data."
    (sendMessage)="onSendMessage($event)"
>
</kendo-chat>
TypeScript
public onSendMessage(event: SendMessageEvent): void {
    // Add user message to Chat history
    const userMessage: Message = {
        ...event.message,
        author: this.user,
        timestamp: new Date(),
    };
    this.messages = [...this.messages, userMessage];

    // Send user message to the Grid for AI processing
    this.promptSent.emit(event.message);
}

Display responses from the AI service in the Chat by extracting the messages from the returned response object. The response contains a commands array with Grid operation commands and associated messages, and an optional message property with an overall summary:

typescript

// Track AI response changes using Angular signals and process it
aiResponse = input<any>(null);

constructor() {
    effect(() => {
        const response = this.aiResponse();
        if (response) {
            this.addAIResponseMessage(response);
        }
    });
}

// Process AI response and add it to Chat conversation
public addAIResponseMessage(response: any): void {
    // Extract messages from response
    const messages = response.commands?.map(cmd => cmd.message || '').filter(msg => msg) || [];
    if (response.message) {
        messages.unshift(response.message);
    }
    const responseText = messages.length > 0 ? messages.join(' ') : 'Grid updated successfully.';

    // Add AI response to Chat
     const aiMessage: Message = {
        id: guid(),
        author: this.bot,
        text: responseText,
        timestamp: new Date(),
    };

    this.messages = [...this.messages, aiMessage];
}

Angular Data Grid AI Chat Assistant

Implementation Steps

Suggested Links