---
title: "AI Overview"
framework: react
version: "2.1.2"
---

# AI Overview

AG Studio includes a conversational AI assistant that builds and edits dashboards from natural language. It queries data, plans layouts, creates widgets, and configures them in response to users requests.

## You Bring the LLM

AG Studio ships the AI machinery: the chat panel, the agents, and the tools that act on the dashboard. It does not ship a model. AG Grid has not built, trained, or hosted an LLM; the intelligence comes entirely from a provider you connect.

Because the model is yours:

- **Connect any provider.** Implement the [`AgAiAssistant` adapter](https://www.ag-grid.com/studio/react/ai-adapter/) to connect OpenAI, Anthropic, Claude, or a model on your own infrastructure. The interface follows the shape of the OpenAI API; a provider with a different shape, such as AWS Bedrock, is handled by translation in your adapter.
- **Your data stays between you and your provider.** Prompts go directly from your application to the LLM you connect, under that provider's terms. AG Grid is never in the data flow - no calls pass through us, and we have no visibility into your conversations.
- **No per query cost from AG Grid.** You pay only your LLM provider, on their pricing, for usage.
- **Off until you opt in.** The AI module is not loaded by default - the panel appears only once you register it and connect a provider. Studio is fully functional without it, and removing the module turns it off.

## Choose Your Path

There are three ways to integrate AI, from turnkey to fully custom. They are alternatives - pick the one that matches how much control you need. The first two run on Studio's built-in runtime, where Studio drives the agent loop and you connect your LLM with an adapter. The Toolkit path you drive yourself.

**[Out of the Box](https://www.ag-grid.com/studio/react/ai-configuration/)**

Register the module, connect an adapter, and use Studio's default agents and chat panel as they ship. The fastest route to a working assistant.

**[Custom Agents](https://www.ag-grid.com/studio/react/ai-custom-agents/)**

Keep the built-in runtime but reshape the agents it runs - their instructions, tools, and delegation - or add agents of your own.

**[Toolkit](https://www.ag-grid.com/studio/react/ai-toolkit/)**

Drive your own agent loop or application logic, using Studio's actions as tools. No chat panel required, and the tightest control over what the AI can do.

## Common Questions

**What is the difference between the built-in assistant and the Toolkit?** The built-in assistant is the chat panel that runs Studio's [default agents](https://www.ag-grid.com/studio/react/ai-ax/) to act on the dashboard. The [Toolkit](https://www.ag-grid.com/studio/react/ai-toolkit/) is a developer API that exposes those same actions as standalone tools for your own AI or agentic workflow, usable without the chat panel.

**How much control do I have over what the AI can do?** You choose whether to load the AI module at all, which provider to connect, and - through the [Toolkit](https://www.ag-grid.com/studio/react/ai-toolkit/) - exactly which Studio actions to expose. For a strict read-only or tightly scoped integration, the Toolkit gives the most control, because you decide which tools exist.

**Can I use my own AI orchestration or agent framework?** Yes. The [Toolkit](https://www.ag-grid.com/studio/react/ai-toolkit/) exposes Studio's actions as framework-agnostic tools you can wire into your own AI interface and orchestration. Studio is also state-driven, so an app or agent can drive configuration directly without the chat panel.

**Does Studio support natural-language querying for end users?** No. The assistant targets the dashboard-building experience, not end-user data Q&A. Your own natural-language query layer can sit alongside Studio, but one is not built in.

## See It in Action

The example below loads an empty dashboard with sales data from a fictional retailer - sales, orders, and products across regions, segments, and categories. Try a prompt to see the assistant work:

```plain
Add bar charts showing the best performing stores and regions in terms of sales.
```

```plain
Add a table listing customers, region, segment, net sales and number of orders.
```

```plain
Build a line chart showing daily sales over time.
```

#### AI Overview

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import { openaiAdapter } from "./shared/openaiAdapter.tsx";
import {
  AgAiAssistant,
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioAiModule,
  AgStudioApi,
  AgStudioMode,
  AgStudioModuleRegistry,
  AgStudioProperties,
} from "ag-studio";
import { getMainDemoData } from "./data.tsx";

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

export const AI_API_URL = "https://ai-api.ag-grid.com/api/openai/v1";

export const AI_API_TOKEN = "";

const StudioExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSource>(
    getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
  );
  const initialState = useMemo<AgReportState>(() => {
    return {
      pages: [
        {
          id: "main",
          widgets: {},
          widgetLayout: {},
        },
      ],
      selectedPageId: "main",
      panels: {
        filters: { collapsed: true },
        data: { collapsed: true },
        edit: { collapsed: true },
      },
    };
  }, []);
  const ai = useMemo<AgAiAssistant>(() => {
    return openaiAdapter({
      endpoint: AI_API_URL,
      key: AI_API_TOKEN,
    });
  }, []);

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <AgStudio
          style={studioStyle}
          className="my-studio-container"
          data={data}
          mode={"edit"}
          initialState={initialState}
          ai={ai}
        />
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <StudioExample />
  </StrictMode>,
);
```

[Live example: AI Overview](https://www.ag-grid.com/studio/examples/ai/ai-overview-example/reactFunctionalTs/)