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

Angular Data Grid AI Column Assistant

The Angular Grid can be enhanced with custom AI-powered column assistants that provide personalized insights, summaries, and explanations about individual Grid rows.

By integrating the InlineAIPrompt component with Grid cell templates, you can create an interactive experience where users can ask natural language questions about specific data records and receive contextual AI-generated responses.

The demo in this article use 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 a Grid with an AI Column Assistant that allows users to ask questions and get insights about specific customer data:

Change Theme

Theme

Loading ...

To implement an AI Column Assistant in your Grid:

Set up the Grid component with the required columns:

html

<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column field="CustomerName" title="Customer Name"></kendo-grid-column>
    <kendo-grid-column field="TotalBalance" title="Total Balance" format="{0:c}"></kendo-grid-column>
</kendo-grid>

Add a dedicated AI assistant column with a custom cell template containing an action button. Attach a click event handler to the button, passing the current dataItem and an anchor reference of the element for proper positioning of the InlineAIPrompt popup:

html

<kendo-grid [kendoGridBinding]="gridData">
    <kendo-grid-column title="AI" [width]="60">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button
                #anchor
                kendoButton
                (click)="onAIButtonClick(dataItem, anchor)"
            ></button>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

In the click event handler, use the open() method that the InlineAIPromptService provides to create a new InlineAIPrompt instance. Define the button reference as an anchor of the current instance by using the anchor option of the popupSettings property in the method:

typescript

public inlineAIPromptInstance: PopupRef;
public currentDataItem: any;

constructor(private promptService: InlineAIPromptService, private aiService: AIService) {}

public onAIButtonClick(dataItem: any, anchor: ElementRef) {
    this.currentDataItem = dataItem;
    
    this.inlineAIPromptInstance = this.promptService.open({
        popupSettings: { anchor: anchor },
        promptCommands: this.promptCommands,
        outputActions: this.outputActions,
    });
}

Subscribe to the InlineAIPrompt events to handle user interactions. Set up handlers for both manual prompts and command executions by handling the promptRequest and commandExecute events respectively:

typescript

public onAIButtonClick(dataItem: any, anchor: ElementRef) {
    // ...
    const promptComponentInstance = this.inlineAIPromptInstance.content.instance;

    promptComponentInstance.promptRequest.subscribe((event: InlineAIPromptRequestEvent) => {
        this.handleRequest(dataItem, event.prompt);
    });

    promptComponentInstance.commandExecute.subscribe((command: InlineAIPromptCommand) => {
        this.handleRequest(dataItem, command.text);
    });
}

Implement the request handler to send the dataItem and user's prompt to your AI service. Then, when a response is received, construct a PromptOutput instance with the generated response and assign it to the promptOutput property of the InlineAIPrompt reference:

typescript

private handleRequest(dataItem: any, prompt: string): void {
    const outputId = guid();
    const output: PromptOutput = {
        id: outputId,
        output: '',
        prompt: prompt,
    };

    this.promptOutput = output;

    this.aiService.analyzeData({ prompt, data: dataItem })
        .subscribe({
            next: (response) => this.onResponseSuccess(response),
            error: () => this.onResponseError()
        });
}

private onResponseSuccess(response: string): void {
    this.promptOutput = { ...this.promptOutput, output: response };
    this.inlineAIPromptInstance.content.instance.promptOutput = { ...this.promptOutput };
}

(Optional) Configure the desired outputActions to allow users to interact with the AI responses. In this example, users can copy the response, discard it, or insert it into the adjacent cell of the "AI Assisted Info" column:

typescript

public outputActions: InlineAIPromptOutputAction[] = [
    {
        name: 'copy',
    },
    {
        name: 'insert',
        type: 'button',
        text: 'Insert',
        svgIcon: insertBottomIcon,
        fillMode: 'flat',
        themeColor: 'primary',
    },
    {
        name: 'discard',
    },
];

Angular Data Grid AI Column Assistant

Suggested Links