---
title: "AI Overview"
framework: javascript
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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/ai-ax/) to act on the dashboard. The [Toolkit](https://www.ag-grid.com/studio/javascript/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/javascript/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/javascript/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

```ts
import { openaiAdapter } from "./shared/openaiAdapter.ts";
import {
  AgStudioAiModule,
  AgStudioApi,
  AgStudioModuleRegistry,
  AgStudioProperties,
  createStudio,
} from "ag-studio";
import { getMainDemoData } from "./data.ts";

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

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

const studioProperties: AgStudioProperties = {
  data: getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
  mode: "edit",
  initialState: {
    pages: [
      {
        id: "main",
        widgets: {},
        widgetLayout: {},
      },
    ],
    selectedPageId: "main",
    panels: {
      filters: { collapsed: true },
      data: { collapsed: true },
      edit: { collapsed: true },
    },
  },
  ai: openaiAdapter({
    endpoint: AI_API_URL,
    key: AI_API_TOKEN,
  }),
};

let studioApi: AgStudioApi;

const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

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