---
title: "AI Overview"
framework: angular
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/angular/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/angular/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/angular/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/angular/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/angular/ai-ax/) to act on the dashboard. The [Toolkit](https://www.ag-grid.com/studio/angular/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/angular/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/angular/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 '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

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