# Angular Data Grid AI Column Assistant

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/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](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/inline-aiprompt) component with [Grid cell templates](https://www.telerik.com/kendo-angular-ui-develop/components/grid/columns/templates#cell-template), 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 uses a Telerik-hosted AI service for demonstration purposes only. For production applications, you should [implement your own AI service](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) that understands your specific domain, data, and business requirements.

The following example demonstrates the AI Column Assistant, which lets users ask natural language questions about column data and receive contextual insights within the Grid.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/ai/ai-column/source.txt)

## Implementation Steps

To implement an AI Column Assistant in your Grid:

1. 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>
   ```

2. Add a dedicated AI assistant column with [a custom cell template](https://www.telerik.com/kendo-angular-ui-develop/components/grid/columns/templates#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>
   ```

3. In the `click` event handler, use the [`open()`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptservice#open) method that the [`InlineAIPromptService`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptservice) provides to create a new InlineAIPrompt instance. Define the button reference as an anchor of the current instance by using the [`anchor`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptpopupsettings#anchor) option of the [`popupSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptsettings#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,
       });
   }
   ```

4. Subscribe to the InlineAIPrompt events to handle user interactions. Set up handlers for both manual prompts and command executions by handling the [`promptRequest`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#promptrequest) and [`commandExecute`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#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);
       });
   }
   ```

5. 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`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/promptoutput) instance with the generated response and assign it to the [`promptOutput`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#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 };
   }
   ```

6. (Optional) Configure the desired [`outputActions`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#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',
       },
   ];
   ```

## Suggested Links

* [InlineAIPrompt Overview](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/inline-aiprompt)
* [Angular Grid Cell Templates](https://www.telerik.com/kendo-angular-ui-develop/components/grid/columns/templates#cell-template)
* [Conversational UI Overview](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api)