# Smart Grid AI Assistant Tools Setup

The Smart Grid provides AI Assistant tools that enable you to apply Grid operations through natural language prompts. The Grid supports three main approaches for connecting these tools to your backend AI service, allowing you to choose the level of control that best fits your application requirements.

The AI Assistant tools that support these approaches for integrating with your AI service are:

<Row>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="/grid/smart-grid/ai-toolbar-tool">
      <ComponentTitle>AI Smart Box</ComponentTitle>
      <ComponentDescription>Versatile search box that supports the AI service integration approaches when in AI Assistant mode.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="/grid/smart-grid/ai-toolbar-assistant">
      <ComponentTitle>AI Toolbar Assistant</ComponentTitle>
      <ComponentDescription>AI Assistant toolbar button for applying AI-powered Grid operations.</ComponentDescription>
    </Component>
  </Column>
</Row>

Choose an integration approach based on how much control you need over the AI communication:

* [Automatic Integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#automatic-integration)—The quickest approach where the Grid handles the communication with your AI service automatically.
* [Controlled Integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#controlled-integration)—Automatic AI service communication with request/response customization through event handlers.
* [Manual Integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#manual-integration)—Full control over AI service communication while using the built-in toolbar tool UI.

> tip Each integration approach requires a backend AI service to process natural language prompts and return structured Grid commands. For guidance on implementing your backend service, see the [AI Service Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup) article.

## Automatic Integration

The automatic approach is the quickest way to integrate AI Assistant functionality with your Grid. The AI Assistant tool handles all communication with your AI service internally through HTTP requests.

To configure automatic integration, add an AI Assistant tool inside a [`<kendo-toolbar>`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbarcomponent) and set the `requestUrl` property to point to your AI service endpoint where the natural language prompts will be processed.

> For runnable examples of automatic integration, see the [AI Smart Box](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool) and [AI Toolbar Assistant](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-assistant) articles.

```html AI Smart Box
<kendo-grid>
  <kendo-toolbar>
   <kendo-grid-smartbox-tool 
      [aiAssistantMode]="{ enabled: true, requestUrl: 'https://your-ai-service.com/api/grid' }">
   </kendo-grid-smartbox-tool>
  </kendo-toolbar>
  ...
</kendo-grid>
```

```html AI Toolbar Assistant
<kendo-grid>
  <kendo-toolbar>
    <kendo-toolbar-button 
        kendoGridAIAssistantTool
        requestUrl="https://your-ai-service.com/api/grid">
    </kendo-toolbar-button>
  </kendo-toolbar>
  ...
</kendo-grid>
```

When using automatic integration, the Grid sends HTTP requests to your AI service endpoint using Angular's [`HttpClient`](https://angular.dev/api/common/http/HttpClient). The Grid uses [`GridAIRequestData`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridairequestdata) to generate the request body in the appropriate format and expects a `GridAIResponse` object in return from [your backend service](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup).

> For more details about the expected request/response structure and available command types, refer to the [AI Service Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup#request-and-response-format) article.

## Controlled Integration

In the controlled approach, you maintain full control over the AI Assistant tool's state and behavior while leveraging built-in AI service communication. This allows you to validate AI responses and apply custom business logic before executing operations.

The controlled integration allows you to provide a `requestUrl` for [automatic request handling](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#automatic-integration) while intercepting [appropriate events](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#event-handling) to modify request options or customize response handling.

The following example demonstrates controlled integration where the AI Toolbar Assistant still handles the HTTP request automatically, but the interaction is customized through request and response event handlers.

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

**Request Options**

When using `requestUrl`, you can also customize the settings of the internally sent HTTP request through the `requestOptions` property. This allows you to add authentication headers, configure request parameters, and set other HTTP options without having to implement custom request logic:

```html HTML
<kendo-toolbar>
  <kendo-grid-smartbox-tool 
      [aiAssistantMode]="aiAssistantSettings">
  </kendo-grid-smartbox-tool>
  <kendo-toolbar-button 
      kendoGridAIAssistantTool
      requestUrl="https://your-ai-service.com/api/grid"
      [requestOptions]="requestOptions">
  </kendo-toolbar-button>
</kendo-toolbar>
```

```typescript TypeScript
public requestOptions = {
  headers: new HttpHeaders({
      'Authorization': 'Bearer your-api-key',
      'Content-Type': 'application/json'
  }),
  withCredentials: true,
};

public aiAssistantSettings: GridSmartBoxAIAssistantSettings {
  enabled: true, 
  requestUrl: 'https://your-ai-service.com/api/grid',
  requestOptions: this.requestOptions
}
```

> The `requestOptions` property is only applicable when you have defined a `requestUrl`. When implementing [manual integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#manual-integration), you handle the HTTP request configuration directly in your custom implementation.

## Manual Integration

For full control over the AI interaction, implement custom HTTP communication with your AI service by handling the AI Assistant tool's appropriate [prompt request and response events](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#event-handling).

This approach gives you complete control over how requests are sent and responses are processed, making it suitable for complex scenarios or proprietary AI systems.

> tip When implementing manual integration, use the Grid's [built-in helper methods](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#helper-methods) to simplify request generation and response processing while maintaining full control over the HTTP communication.

The following example demonstrates manual integration using the helper methods:

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

## Helper Methods

The Grid provides built-in helper methods that simplify working with AI service requests and responses when implementing [manual integration](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-assistant-tools-setup#manual-integration). These methods handle the complexities of request formatting and response processing, allowing you to focus on the HTTP communication logic specific to your application.

<table>
    <thead>
        <tr>
            <th width="25%">Method</th>
            <th width="75%">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="/grid/api/gridcomponent#getairequest"><code>getAIRequest()</code></a></td>
            <td>Generates the request body for your AI service based on the user's prompt. Returns a <a href="/grid/smart-grid/ai-service-setup#request-structure"><code>GridAIRequest</code></a> object containing the <code>role</code> (defaults to <code>"user"</code>), <code>contents</code> array with the prompt text, and <code>columns</code> array with Grid column information.</td>
        </tr>
        <tr>
            <td><a href="/grid/api/gridcomponent#handleairesponse"><code>handleAIResponse()</code></a></td>
            <td>Processes the <a href="/grid/smart-grid/ai-service-setup#response-structure"><code>GridAIResponse</code></a> returned by your AI service and automatically applies all supported Grid operations including data operations, column management, selection, highlighting, and export.</td>
        </tr>
    </tbody>
</table>

If you implement your backend AI service with the help of the [Smart Extensions library](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid#smart-extensions), these helper methods generate requests and process responses in the compatible format. For fully [custom backend implementations](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid#custom-implementation), you can control how to define the request/response structure as needed for your specific AI service.

## Event Handling

The AI Assistant tools provide events for enhanced control over the AI interaction process and comprehensive request lifecycle management:

<TabStrip>
<TabStripTab title="AI Smart Box">

* [`aiAssistantPromptRequest`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#aiassistantpromptrequest)—Emits before the SmartBox tool sends the AI request in AI Assistant mode.
* [`aiAssistantCancelRequest`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#aiassistantcancelrequest)—Emits when the user clicks the cancel button in AI Assistant mode.
* [`aiAssistantResponseSuccess`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#aiassistantresponsesuccess)—Emits when the SmartBox tool completes the AI request successfully.
* [`aiAssistantResponseError`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#aiassistantresponseerror)—Emits when the SmartBox tool completes the AI request with an error.
* [`open`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#open)—Emits when the SmartBox tool opens.
* [`close`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent#close)—Emits when the SmartBox tool closes.

</TabStripTab>
<TabStripTab title="AI Toolbar Assistant">

* [`promptRequest`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#promptrequest)—Emits before the AI request is sent.
* [`cancelRequest`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#cancelrequest)—Emits when the user cancels an ongoing AI request through the **Stop Generation** button.
* [`responseSuccess`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#responsesuccess)—Emits when the AI service request is successful, providing information about the returned response.
* [`responseError`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#responseerror)—Emits when the AI service request has completed with an error, providing information about the returned response.
* [`open`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#open)—Emits when the AI Assistant tool is opened, providing access to the Window and AIPrompt component instances.
* [`close`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective#close)—Emits when the AI Assistant tool is closed.

</TabStripTab>
</TabStrip>

## Suggested Links

* [AI Service Setup](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-service-setup)
* [Smart Grid Overview](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid)
* [AI SmartBox Tool](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-tool)
* [AI Toolbar Assistant](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-toolbar-assistant)
* [Angular Grid Configuring the ToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/grid/toolbar/grid-toolbar)
* [API Reference of the AIAssistantToolbarDirective](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/aiassistanttoolbardirective)
* [API Reference of the GridSmartBoxToolComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/smartboxtoolbartoolcomponent)



<style>
.pd-b div:first-child {
  padding-top: 10px;
}
</style>