AI Toolkit: Control AG Grid with natural language commands

Our new AI Toolkit makes it easy to integrate AI capabilities into AG Grid. It works with any AI provider and gives developers full control over what data is shared and which changes are applied to the grid.

In practice, this allows developers to build features, such as AI-powered chat assistants, that let users safely extract insights from their data without needing to apply any configuration changes themselves.

Try it for yourself by entering a prompt into the demo below, e.g "Group by country and show the total amount, excluding failed transactions, sorted by total # of transactions":

Contents Menu

  1. Overview
  2. How it Works
  3. Quick Start
  4. What’s Next

Overview

With AG Grid, users can filter, group, pivot, sort, and reshape data in almost any way they can imagine - but not everyone knows how to drive all of those features through the UI, even if they know exactly the outcome they want. Users may be inexperienced with AG Grid, unfamiliar with the dataset, or simply new to data analysis.

This is where the AI Toolkit comes in. By combining AG Grid’s structured state model with the knowledge of modern LLMs, users can now simply tell the grid what they want to know and let the AI apply the changes.

Benefits

The AI Toolkit is designed to give users as much control as possible, without compromising on developer experience or security.

More specifically, the AI Toolkit is:

  • Provider-agnostic: Developers can integrate with any AI provider, including OpenAI, Anthropic, Google, and Meta.
  • Secure: The AI Toolkit doesn’t expose any data, and developers retain full control over what is sent to the AI and the changes applied to the grid.
  • Simple & flexible: Our API is simple, intuitive and can be easily customised or extended. A working example can be built in less than 5 minutes.
  • No additional cost: The AI Toolkit is included with our Enterprise licence at no extra cost - we’ll even help you integrate it if you have a support & maintenance agreement with us.
  • No vendor lock-in: We don’t require you to integrate with any additional services, such as a prompt-processing backend.

Use Cases

Whilst the AI Toolkit has been purposefully designed for flexibility, some use-cases that we can see being particularly popular include:

  • Natural language data exploration: Allow users to ask questions about their data, e.g. “Show me all the transactions in 2024 where revenue exceeded £1 million, from largest to smallest”
  • Perform actions by intent: For more experienced users, allow them to execute specific actions, e.g. "Group by region, show sum of sales and average discount, hiding countries where sales < £100K"
  • Empowering non-technical users: For users who may be unfamiliar with either the dataset or AG Grid itself, allow them to engage in a chat that leverages AI to guide them through the process, e.g. starting with the question "What would you like to know?", before diving into specific grid configurations.

How It Works

The AI Toolkit provides a single API, getStructuredSchema(), which generates a JSON Schema representation of the grid's State API.

This Schema can then be used to define a Structured Output in an LLM, ensuring the LLM's response matches AG Grids State API.

All that developers need to do is send the user's request and the schema to an LLM, and then pass the response to the setState API.

Quick Start

Implementing the AI Toolkit is quick and easy.

  1. Generate the structured schema of the grid's state via the AI Toolkit:
// Generated structured schema representation of grid state
const gridStateStructuredSchema = gridApi.getStructuredSchema();
  1. Wrap this in an LLM-compatible schema:
// Create LLM compatible JSON Schema, using grid state structured schema
const schema = {
    type: 'object',
    properties: {
        gridState: gridStateStructuredSchema,
    },
    required: ['gridState'],
    additionalProperties: false,
};
  1. Obtain the users' request from your input and send it, along with the schema, to your chosen LLM:
// Get users' sequest, e.g. from input element
const userRequest = inputElement.value.trim();

/* Send user request & schema to AI - refer to 
 * your LLMs docs for info on implementing
 * the callLLM function */
const response = await callLLM(userRequest, gridState, schema)
  1. Pass the response to the setState API to update the grid's configuration:
// Update grid state with LLM response
gridApi.setState(response.gridState);

Thats it - A complete implementation would look something like:

// Generated Structured Schema Representation of Grid State
const gridStateStructuredSchema = gridApi.getStructuredSchema();

// Create LLM compatible JSON Schema, using Grid State Structured Schema
const schema = {
    type: 'object',
    properties: {
        gridState: gridStateStructuredSchema,
    },
    required: ['gridState'],
    additionalProperties: false,
};

// Get Users' Request, e.g. from Input Element
const userRequest = inputElement.value.trim();

// Send User Request & Schema to LLM
const response = await callLLM(userRequest, gridState, schema)

// Update Grid State with LLM Response
gridApi.setState(response.gridState);

Whats Next

We’re continuing to expand our AI capabilities across our ecosystem. If you’d like to help shape this direction, we encourage you to provide feedback through Zendesk, where you can also ask any technical questions.

If the AI Toolkit sparked your interest, you may also be interested in our MCP Server. It offers LLMs a more efficient way to browse version-specific AG Grid documentation, helping developers integrate, maintain, and upgrade AG Grid with AI. Get started with the MCP Server on our documentation, or learn more about how we built it in James Swinton-Bland’s recent talk at React Conf:

TL;DR

  • Users can now control AG Grid with natural language.
  • Developers can integrate with any AI provider in just a few lines of code.
  • Developers have full control over the data sent to the AI and the changes applied to the grid.
  • Available in AG Grid Enterprise 34.3 or later.

Get Started

If you’re ready to integrate AI-driven interactions into your grid, you can get started with your chosen framework:

Want to test this in production with your customers or speak to our engineering support team? Request a 30-day Enterprise trial licence below:

Read more posts about...