Ask Your Table - AI Assistant 🧪

Translate natural language into a set of grid state updates and apply them to the Data Grid component.

The AI assistant feature allows users to interact with the Data Grid component using natural language. Type the prompt like "sort by name" or "show amounts larger than 1000" in the prompt input field, and the Data Grid will update accordingly.

To enable client-side of this feature, pass unstable_enableAiAssistant prop.

To increase the accuracy of the language processing, provide example values for the available columns. This can be done in the following ways.

Custom examples

You can provide custom examples as a context for the prompt processing through the unstable_examples prop in the columns array. The unstable_examples prop should contain an array of possible values for that column.

Avatar

Name

Website

Rating

No rows

Use row data for examples

Pass allowDataSampling slot prop to allow use of the row data to generate column examples. This is useful if you are dealing with non-sensitive data and want to skip creating custom examples for each column.

Data is collected randomly on the cell level, which means that the examples per column might not come from the same rows.

slotProps={{
  toolbar: {
    assistantPanelProps: {
      allowDataSampling: true,
    },
  },
}}

For getPromptContext() API method, pass allowDataSampling flag as a parameter.

const context = React.useMemo(
  () => apiRef.current.unstable_aiAssistant.getPromptContext(allowDataSampling),
  [apiRef, allowDataSampling],
);

Avatar

Name

Website

Rating

No rows

Using Server-side data

An example of combining prompt control with the Server-side data

Name

Phone

Country

Company

Position

No rows

<DataGridPremium
  apiRef={apiRef}
  columns={columns}
  dataSource={dataSource}
  dataSourceCache={null}
  pagination
  initialState={initialStateUpdated}
  pageSizeOptions={[10, 20, 50]}
  showToolbar
  allowAiAssistantDataSampling
  enableAiAssistant
  onPrompt={mockPromptResolver}
  aggregationFunctions={aggregationFunctions}
  onDataSourceError={console.error}
/>

<DataGridPremium
  apiRef={apiRef}
  columns={columns}
  dataSource={dataSource}
  dataSourceCache={null}
  pagination
  initialState={initialStateUpdated}
  pageSizeOptions={[10, 20, 50]}
  showToolbar
  allowAiAssistantDataSampling
  enableAiAssistant
  onPrompt={mockPromptResolver}
  aggregationFunctions={aggregationFunctions}
  onDataSourceError={console.error}
/>

Press Enter to start editing

Processing service integration

Natural language prompts must be processed by a service to understand what kind of state changes must be applied to the Data Grid to match the user's request. You can use MUI's processing service or build it by yourself.

With MUI's service

Data Grid provides all necessary pieces to make the service integration easy.

Enable the AI Assistant feature by adding unstable_enableAiAssistant prop. A new toolbar button will appear in the default <Toolbar />. This button opens <AssistantPanel /> that can take user's prompts.

Contact sales@mui.com to get an API for our processing service.

Avoid exposing the API key to the client by using a proxy server that receives prompt processing requests, adds the x-api-key header, and passes the request further to the MUI's service.

This is an example of a Fastify proxy for the prompt requests.

fastify.register(proxy, {
  upstream: 'https://api.mui.com',
  prefix: '/api/my-custom-path',
  rewritePrefix: '/api/v1/datagrid/prompt',
  replyOptions: {
    rewriteRequestHeaders: (_, headers) => ({
      ...headers,
      'x-api-key': process.env.MUI_DATAGRID_API_KEY,
    }),
  },
});

Add unstable_onPrompt() to pass the user's prompts to the service. Service's response will be used internally to make the necessary state updates.

You can implement unstable_onPrompt() with unstable_gridDefaultPromptResolver(). It will add necessary headers and stringify the body in the right format for you.

In addition to this, it allows you to add an additional prompt context to achieve better processing results.

const PROMPT_RESOLVER_PROXY_BASE_URL =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000'
    : 'https://api.my-proxy.com';

function processPrompt(query: string, context: string) {
  const additionalContext = `The rows represent: List of employees with their company, position and start date`;

  return unstable_gridDefaultPromptResolver(
    `${PROMPT_RESOLVER_PROXY_BASE_URL}/api/my-custom-path`,
    query,
    context,
    additionalContext,
  );
}

With custom service

Use pieces of the AI Assistant feature to build your own prompt processing service.

<GridAiAssistantPanel /> and <GridPromptField /> components can be used to build custom UI.
unstable_aiAssistant API can be used to build the context using getPromptContext() and to apply the processing with applyPromptResult(response: PromptResponse) methods.
unstable_gridDefaultPromptResolver() can be used to pass the prompt and the context(s) with the necessary headers to the processing service.

Mix and match these with your custom components/methods to implement the processing the way you need it in your project.

You can use completely custom solution and apply the processing result using other Grid's APIs like setFilterModel() or setSortModel() without a need to structure it as PromptResponse.