---
product: "AG Studio"
title: "Agent Quick Start"
description: "Learn how to connect AG Studio to the OpenAI Responses API and have an agent build widgets from a sentence."
framework: javascript
version: "3.0.0"
related:
    - title: "Agent Framework Overview"
      url: "https://www.ag-grid.com/studio/javascript/ai/"
    - title: "WebMCP"
      url: "https://www.ag-grid.com/studio/javascript/ai-webmcp/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Agent Quick Start

The Studio Agent Framework lets users explore data and build or modify dashboards using natural language and an LLM supplied by your application. Connecting it to the OpenAI Responses API takes three steps.

It runs the agent loop in the browser against an example OpenAI adapter, which you copy into your app and adapt to your own provider. This is one of several approaches the Agent Framework supports; for the concepts behind it, see [Harness](https://www.ag-grid.com/studio/javascript/ai-harness/), [Agents](https://www.ag-grid.com/studio/javascript/ai-agents/) and [Tools](https://www.ag-grid.com/studio/javascript/ai-tools/).

## 1. Register the Module

The Agent Framework is provided via the `AgStudioAiModule` which must be imported and registered:

#### ES Modules

```ts
import { AgStudioAiModule, AgStudioModuleRegistry } from 'ag-studio';

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);
```

#### UMD Bundle

```js
agStudio.createStudioWithAi({ ... });
```

## 2. Connect a Provider

To connect to your provider, you must provide an [adapter](https://www.ag-grid.com/studio/javascript/ai-direct-llm-runner/#the-adapter) that translates the Agent Framework request format to the format your chosen provider expects.

The [example](https://www.ag-grid.com/studio/javascript/ai-quickstart/#example) on this page includes an OpenAI adapter. AG Studio ships no adapters - copy this one as a starting point for your provider:

```ts
// Example adapter, not a shipped API. Copy it into your app and adapt it.
import { openaiAdapter } from 'ag-studio-harness/example-shared/openaiAdapter';

const adapter = openaiAdapter({
    endpoint: 'https://api.openai.com/v1/responses',
    key: MY_KEY,
});
```

> **Warning**
>
> This adapter calls the provider straight from the browser, which may expose your authentication key to your users. In production, route the LLM requests via your own application or an LLM proxy.

## 3. Configure the Harness

Pass the adapter to `createAiHarness` and you get Studio's five agents, with the lead fronting the conversation:

```js
const studioProperties = {
    ai: ({ api }) => createAiHarness(api, { adapter }),

    // other studio properties ...
}
```

That is the shortest form. To change the agents, their instructions or their tools, pass a builder instead - see [Agent Configuration](https://www.ag-grid.com/studio/javascript/ai-custom-agents/).

## Example

Open the dashboard, open the chat panel from the side panels, and choose one of the [suggested prompts](https://www.ag-grid.com/studio/javascript/ai-chat-features/#suggesting-prompts) - or type a request of your own. Choose "Chart average highs" and you should see the lead agent inspect the schema, delegate to the page agent to place a widget, then to a widget agent to configure it:

#### Agent Framework

```ts
import {
  AgAiModel,
  AgAiPromptStarter,
  AgStudioAiModule,
  AgStudioModuleRegistry,
  AgStudioProperties,
  createAiHarness,
  createStudio,
} from "ag-studio";
import { getGhcnCitiesData } from "./shared/ghcnCities/data.ts";
import { ghcnCitiesReportState } from "./shared/ghcnCities/state.ts";
import { openaiAdapter } from "./shared/openaiAdapter.ts";

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

// 1. Register the module.
AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

// 2. Connect a provider. In production this endpoint is your own, so the key never reaches the browser.
const adapter = openaiAdapter({
  endpoint: AI_API_URL,
  key: AI_API_TOKEN,
});

/**
 * The suggestions a new conversation opens on. They show only until the first message is sent,
 * so they are an opening move rather than a menu.
 */
const PROMPT_STARTERS: AgAiPromptStarter[] = [
  {
    label: "Chart average highs",
    prompt: "Add a bar chart of average high temperature by city.",
  },
  {
    label: "Compare climate bands",
    prompt:
      "Add a bar chart comparing average high and average low temperature by climate band.",
  },
  {
    label: "Explain the data",
    prompt: "What tables and fields does this dashboard have available?",
  },
];

/**
 * The models offered beside the send button. Each `id` reaches the adapter as declared here and is
 * passed straight on to the provider, so these are real model ids. The first is the one a new
 * conversation starts on.
 */
const MODELS: AgAiModel[] = [
  { id: "gpt-5.6-terra", label: "GPT-5.6 Terra" },
  { id: "gpt-5.6-sol", label: "GPT-5.6 Sol" },
  { id: "gpt-5.6-luna", label: "GPT-5.6 Luna" },
];

const studioProperties: AgStudioProperties = {
  data: getGhcnCitiesData("https://www.ag-grid.com/studio/example-assets"),
  mode: "edit",
  initialState: {
    ...ghcnCitiesReportState,
    // Collapse the filters panel and open on the blank page, so the assistant has work to do.
    panels: {
      ...ghcnCitiesReportState.panels,
      filters: {
        collapsed: true,
      },
    },
    selectedPageId: "blank",
  },
  // 3. Provide a harness: the shipped agents, with the lead fronting the conversation, plus the
  // suggestions and the choice of model the chat panel offers the reader.
  ai: ({ api }) =>
    createAiHarness(api, {
      adapter,
      promptStarters: PROMPT_STARTERS,
      models: MODELS,
    }),
};

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

[Live example: Agent Framework](https://www.ag-grid.com/studio/examples/ai-quickstart/ai-quickstart-example/typescript/)

## Troubleshooting

If you experience issues, work through these in order:

| Symptom | What to check |
| --- | --- |
| No chat panel | The module is not registered, or `ai` is not set. |
| Panel, but "AI is unavailable" | `primary` names an agent that is not in `agents`. |
| A licence error in the console | The key does not include AI. |
| The agent replies but never acts | The adapter is not relaying tool calls - see [Tool Calls](https://www.ag-grid.com/studio/javascript/ai-direct-llm-runner/#tool-calls). |

## Next Steps

**[Harness](https://www.ag-grid.com/studio/javascript/ai-harness/)**

Learn about the harness, and the runners it drives agents with.

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

Explore the built-in Agents, and how to customise or replace them.

**[Tools](https://www.ag-grid.com/studio/javascript/ai-tools/)**

Understand how tools are created, defined, and customised.