# KendoReact Grid AI Toolbar Assistant

> tip For an enhanced user experience with additional search capabilities, prompt suggestions, and streamlined UI, we recommend using the [AI Smart Box](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/basic-operations). The AI Smart Box combines traditional search, semantic search, and AI-powered operations in a single, unified interface.

The AI Toolbar Assistant interprets user requests and automatically applies the corresponding Grid operations, making data exploration more intuitive and accessible. The toolbar tool consists of a [Window](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/window) component and an [AIPrompt](https://www.telerik.com/kendo-react-ui-develop/components/conversationalui/ai-prompt) component that work together to enable natural language interaction with your custom AI service.

> 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-react-ui-develop/components/grid/smart/ai-service-setup) that understands your specific domain, data, and business requirements.

The following example demonstrates a Smart Grid that processes natural language requests for performing data operations, column management, selection, highlighting, and export operations.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/smart/resize-reorder-show-lock/basic/source.txt)

## Implementation Steps

To configure the Grid's AI Toolbar Assistant:

1. Enable the desired data operations of the Grid that the AI Toolbar Assistant should control:

   ```tsx
   <Grid data={data} sortable={true} groupable={true} filterable={true} reorderable={true} resizable={true}>
       {/* Column definitions */}
   </Grid>
   ```

2. Add the [`GridToolbarAIAssistant`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbaraiassistant) component within the [`GridToolbar`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbar) component:

   ```tsx
   import { Grid, GridToolbar, GridToolbarAIAssistant } from '@progress/kendo-react-grid';

   <Grid data={data}>
       <GridToolbar>
           <GridToolbarAIAssistant />
       </GridToolbar>
   </Grid>;
   ```

3. Configure the [`requestUrl`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbaraiassistantprops#requesturl) property to point to your custom AI service endpoint:

   ```tsx
   <GridToolbarAIAssistant requestUrl="https://your-ai-service.com/api/grid" />
   ```

   > The `requestUrl` defines the endpoint where your natural language queries will be processed. It should point to [your custom AI service](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-service-setup) 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](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/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-react-ui-develop/components/grid/smart/ai-assistant-tools-setup#controlled-integration)—Automatic AI service communication with request/response customization through event handlers.
* [Manual Integration](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-assistant-tools-setup#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](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-assistant-tools-setup).

## Customization Options

The AI Toolbar Assistant provides various configuration options to customize the experience based on your application requirements:

* [Prompt Suggestions](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-toolbar-assistant#prompt-suggestions)
* [Placeholder Text](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-toolbar-assistant#placeholder-text)
* [Speech-to-Text](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-toolbar-assistant#speech-to-text)

### Prompt Suggestions

You can guide users with predefined prompts by using the [`suggestionsList`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbaraiassistantprops#suggestionslist) property. This helps users understand the types of commands your AI service can process and provides quick access to common operations.

```tsx
<GridToolbarAIAssistant
    requestUrl="https://your-ai-service.com/api/grid"
    suggestionsList={[
        'Sort by Amount descending',
        'Group by account type',
        'Show only failed transactions',
        'Filter where currency is USD',
        'Clear filtering'
    ]}
/>
```

### Placeholder Text

Use the [`promptPlaceHolder`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbaraiassistantprops#promptPlaceHolder) property to customize the placeholder text that appears in the AI prompt input field:

```tsx
<GridToolbarAIAssistant
    requestUrl="https://your-ai-service.com/api/grid"
    promptPlaceHolder="Ask AI to filter, sort, or group your data..."
/>
```

### Speech-to-Text

Enable voice input capabilities using the [`enableSpeechToText`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbaraiassistantprops#enablespeechtotext) property. This enhances accessibility by allowing users to speak their commands instead of typing:

```tsx
<GridToolbarAIAssistant requestUrl="https://your-ai-service.com/api/grid" enableSpeechToText={true} />
```

## Suggested Links

* [Smart Grid AI Assistant Tools Setup](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-assistant-tools-setup)
* [AI Service Setup](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/ai-service-setup)
* [Smart Grid Overview](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart)
* [KendoReact Grid Configuring the ToolBar](https://www.telerik.com/kendo-react-ui-develop/components/grid/toolbar-tools)
* [Grid Sorting](https://www.telerik.com/kendo-react-ui-develop/components/grid/sorting)
* [KendoReact Grid Row and Cell Highlighting](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart/highlight)
* [KendoReact AIPrompt Overview](https://www.telerik.com/kendo-react-ui-develop/components/conversationalui/ai-prompt)
* [API Reference of the GridToolbarAIAssistant](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridtoolbaraiassistant)