New to KendoReact? Start a free 30-day trial

GridToolbarAIAssistantProps

Interface

Represents the props interface for the GridToolbarAIAssistant component. This component provides AI-powered functionality for grid operations through natural language prompts. Users can request sorting, filtering, grouping, and highlighting through conversational input.

Definition

Package:@progress/kendo-react-grid

Syntax:

tsx

<Grid data={products}>
  <GridToolbar>
    <GridToolbarAIAssistant
      requestUrl="/api/ai/grid"
      promptPlaceHolder="Ask AI to sort, filter, or group your data"
      suggestionsList={[
        'Sort products by price',
        'Show only electronics',
        'Group by category'
      ]}
      onResponseSuccess={(response) => console.log('AI processed:', response)}
    />
  </GridToolbar>
</Grid>

Properties

enableSpeechToText?

boolean | SpeechToTextButtonProps

Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.

Example:

jsx

<GridToolbarAIAssistant enableSpeechToText={true} />

gridAIPrompt?

CustomComponent<GridAIPromptProps>

Customizes the AI prompt component.

Example:

jsx

<GridToolbarAIAssistant gridAIPrompt={MyCustomPromptComponent} />

httpClient?

GridAIHttpClient

Optional custom HTTP client for the AI assistant. When not provided, the component uses the built-in fetch-based transport.

Example:

tsx

import axios from 'axios';
import { createAxiosAIClient } from '@progress/kendo-react-grid';

<GridToolbarAIAssistant httpClient={createAxiosAIClient(axios)} />

icon?

string

Defines the icon rendered in the GridToolbarAIAssistant tool (see example).

Example:

jsx

<GridToolbarAIAssistant icon="home" />

loading?

boolean

Defines if the AI prompt is in loading mode.

Example:

jsx

<GridToolbarAIAssistant loading={true} />

onCloseWindow?

() => void

The method that will be called to close the column menu.

Example:

jsx

<GridToolbarAIAssistant onCloseWindow={() => console.log('close menu');} />

onPromptRequest?

(request: GridAIRequestData, isRetry: boolean) => void

Called before the request is sent.

Parameters:requestGridAIRequestDataisRetry?boolean

Example:

jsx

<GridToolbarAIAssistant onPromptRequest={(request) => console.log(request)} />

onResponseError?

(error: any) => void

Called when the response returns an error.

Parameters:errorany

Example:

jsx

<GridToolbarAIAssistant onResponseError={(error) => console.error(error)} />

onResponseSuccess?

(response: GridAIResponse<any>, promptMessage: string, isRetry: boolean) => void

Called when the response is received.

Parameters:responseGridAIResponse<any>promptMessage?stringisRetry?boolean

Example:

jsx

<GridToolbarAIAssistant onResponseSuccess={(response) => console.log(response)} />

outputs?

AIPromptOutputInterface[]

Defines the outputs of the AI prompt.

Example:

jsx

<GridToolbarAIAssistant outputs={[{ id: 1, title: 'Output 1', responseContent: '...' }]} />

promptPlaceHolder?

string

Defines the placeholder text for the AI prompt input.

Example:

jsx

<GridToolbarAIAssistant promptPlaceHolder="Ask AI to filter, sort or group" />

requestOptions?

GridAIRequestConfig

Defines the options for the HTTP request. Accepts both the new GridAIRequestConfig and the legacy AxiosRequestConfig.

Example:

jsx

<GridToolbarAIAssistant requestOptions={{ timeout: 5000 }} />

requestUrl?

string

Defines the URL to which the request will be sent.

Example:

jsx

<GridToolbarAIAssistant requestUrl="https://example.com/api/ai" />

role?

string

Defines the user role for the request. Defaults to 'user'.

Example:

jsx

<GridToolbarAIAssistant role="admin" />

show?

boolean

Specifies if the popup will be displayed.

Example:

jsx

<GridToolbarAIAssistant show={true} />

streaming?

boolean

Defines if the AI prompt is in streaming mode.

Example:

jsx

<GridToolbarAIAssistant streaming={true} />

suggestionsList?

string[]

Defines the list of suggestions for the AI prompt.

Example:

jsx

<GridToolbarAIAssistant suggestionsList={['Sort by Amount', 'Group by Account Type']} />

svgIcon?

SVGIcon

Defines the SVG icon rendered in the GridToolbarAIAssistant tool (see example).

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<GridToolbarAIAssistant svgIcon={gearIcon} />