---
title: "AI Overview"
framework: vue
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/vue/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/vue/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/vue/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/vue/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/vue/ai-ax/) to act on the dashboard. The [Toolkit](https://www.ag-grid.com/studio/vue/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/vue/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/vue/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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import { openaiAdapter } from "./shared/openaiAdapter.ts";
import {
  AgAiAssistant,
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioAiModule,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioModuleRegistry,
  AgStudioProperties,
} from "ag-studio";
import { getMainDemoData } from "./data.ts";

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

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

export const AI_API_TOKEN = "";

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :data="data"
        :mode="mode"
        :initialState="initialState"
        :ai="ai"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(
      getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
    );
    const mode = ref<AgStudioMode>("edit");
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "main",
          widgets: {},
          widgetLayout: {},
        },
      ],
      selectedPageId: "main",
      panels: {
        filters: { collapsed: true },
        data: { collapsed: true },
        edit: { collapsed: true },
      },
    });
    const ai = ref<AgAiAssistant>(
      openaiAdapter({
        endpoint: AI_API_URL,
        key: AI_API_TOKEN,
      }),
    );

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;
    };

    return {
      studioApi,
      data,
      mode,
      initialState,
      ai,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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