---
product: "AG Studio"
title: "Built-in Agents"
description: "A reference for the five agents AG Studio ships, the tools each one holds, and how to add them to a harness as they are."
framework: react
version: "3.0.0"
related:
    - title: "Agent Overview"
      url: "https://www.ag-grid.com/studio/react/ai-agents/"
    - title: "Agent Configuration"
      url: "https://www.ag-grid.com/studio/react/ai-custom-agents/"
    - title: "Agent Context"
      url: "https://www.ag-grid.com/studio/react/ai-context/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Built-in Agents

AG Studio ships five agents: a Lead that coordinates, and specialists for Planning, Data, Page and Widget work.

Building a dashboard needs inspecting the data, planning a layout, placing widgets and then configuring each one, so the work is split across focused agents rather than given to a single prompt.

This page is the reference for what you get. To change any of it, see [Agent Configuration](https://www.ag-grid.com/studio/react/ai-custom-agents/).

## Use Them As They Are

The config builder hands you all five on `builtIn`, keyed by id, each a plain definition. Pair one with a runner to turn it into a running agent:

```ts
// Your AgLlmAdapter - see Direct LLM Runner.
const adapter = myOpenAiAdapter({ endpoint: '/api/llm' });

ai: ({ api }) =>
    createAiHarness(api, ({ builtIn }) => ({
        agents: Object.values(builtIn).map((definition) => directLlmRunner({ ...definition, adapter })),
        primary: 'lead',
    })),
```

`primary: 'lead'` makes the lead the agent new threads start from. The other four are delegate-only and never appear in the user's agent picker.

To compose them with your own, spread and append:

```ts
createAiHarness(api, ({ builtIn, tools: { studio } }) => ({
    agents: [
        ...Object.values(builtIn).map((definition) => directLlmRunner({ ...definition, adapter })),
        directLlmRunner({
            id: 'audit',
            adapter,
            description: 'Reviews a page for missing or misleading widgets.',
            instructions: () => 'You review dashboards and report what is missing.',
            tools: () => [studio.viewPage(), studio.viewWidget()],
        }),
    ],
    primary: 'lead',
}));
```

#### Built-in Agents

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioProvider, AgStudioRef } from "ag-studio-react";
import {
  AgAiHarnessSetup,
  AgAiModel,
  AgAiPromptStarter,
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioAiModule,
  AgStudioApi,
  AgStudioMode,
  AgStudioProperties,
  createAiHarness,
  enableStudioDevValidations,
} from "ag-studio";
import { getGhcnCitiesData } from "./shared/ghcnCities/data.tsx";
import { ghcnCitiesReportState } from "./shared/ghcnCities/state.tsx";
import { openaiAdapter } from "./shared/openaiAdapter.tsx";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

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

export const AI_API_TOKEN = "";

const adapter = openaiAdapter({
  endpoint: AI_API_URL,
  key: AI_API_TOKEN,
});

/**
 * The suggestions a new conversation opens on. Each is worded to need more than one of the
 * built-in agents, so the lead's delegation shows in the panel.
 */
const PROMPT_STARTERS: AgAiPromptStarter[] = [
  {
    label: "Add a rainfall page",
    prompt:
      "Add a page charting total rainfall by city and wet days by climate band.",
  },
  {
    label: "Chart the hottest cities",
    prompt: "Add a bar chart of the ten cities with the most hot days.",
  },
  {
    label: "Explain this page",
    prompt:
      "Summarise what this page shows and which fields each widget reads.",
  },
];

/**
 * 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 StudioExample = () => {
  const studioRef = useRef<AgStudioRef>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSource>(
    getGhcnCitiesData("https://www.ag-grid.com/studio/example-assets"),
  );
  const initialState = useMemo<AgReportState>(() => {
    return ghcnCitiesReportState;
  }, []);
  const ai = useMemo<AgAiHarnessSetup>(() => {
    return ({ api }) =>
      createAiHarness(api, {
        adapter,
        promptStarters: PROMPT_STARTERS,
        models: MODELS,
      });
  }, []);

  const setPage = useCallback((pageId: string) => {
    studioRef.current!.api?.setState({
      ...studioRef.current!.api.getState(),
      selectedPageId: pageId,
    });
  }, []);

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <div className="example-controls">
          <div className="controls-row">
            <button onClick={() => setPage("temperature")}>Temperature</button>
            <button onClick={() => setPage("precipitation")}>
              Precipitation
            </button>
            <button onClick={() => setPage("blank")}>Blank</button>
          </div>
        </div>

        <AgStudio
          ref={studioRef}
          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>
    <AgStudioProvider modules={[AgStudioAiModule]}>
      <StudioExample />
    </AgStudioProvider>
  </StrictMode>,
);
```

[Live example: Built-in Agents](https://www.ag-grid.com/studio/examples/ai-builtin-agents/ai-builtin-agents-example/reactFunctionalTs/)

## The Team

| Agent | Role | Tools | Delegates to |
| --- | --- | --- | --- |
| **Lead** | Coordinator. Reads the request, decides the approach, delegates. | `view_schema`, `view_report`, `view_page`, `view_plan`, `update_plan`, `clear_plan`, `rename_thread`, `delegate_to` | `data`, `page`, `planning`, `widget` |
| **Planning** | Turns a request into a structured plan. | `view_schema`, `view_report`, `view_page`, `view_plan`, `create_plan` | - |
| **Data** | Explores and queries the data; answers data questions. | `execute_query`, `view_schema`, `create_expression`, `update_expression`, `delete_expression` | - |
| **Page** | Places and moves widgets, manages page-level filters. | `view_schema`, `view_page`, `view_plan`, `add_widget`, `position_widget`, `remove_widget`, `add_page_filter`, `remove_page_filter` | - |
| **Widget** | Configures one widget: type, data mapping, titles, formatting. | `view_schema`, `view_plan`, `view_widget`, `configure_widget`, `add_widget_filter`, `remove_widget_filter` | - |

The **Widget** agent is parameterised. The lead names the widget's type and id when delegating, which narrows `configure_widget`'s schema to that widget type's options, so its tools are resolved from delegation parameters rather than fixed.

For what each tool does, see [Built-in Tools](https://www.ag-grid.com/studio/react/ai-tools-builtin/).

## How a Dashboard Gets Built

A worked delegation, for "build me a dashboard":

1. **Lead** reads the message, calls `view_schema` to see what data exists, and decides the request warrants a plan.
2. **Lead** delegates to **Planning**, which calls `create_plan` to produce a layout tree plus a widget entry per intended widget, then returns.
3. **Lead** delegates to **Page**, which calls `add_widget` for each entry and `position_widget` to arrange them, returning the widget ids.
4. **Lead** delegates to a **Widget** agent per widget - these run concurrently - each calling `configure_widget` for its own widget.
5. **Lead** marks the plan complete and summarises for the user.

The plan is a durable artefact on the thread, so a later message can pick up where the last one left off. The panel renders each delegation inline and expandable, so a user can follow the specialists' work.

## Instructions

Each built-in agent carries its own instructions, resolved per run. The data agent's include a generated description of your schema, so it starts knowing which tables and fields exist. The widget agent's include guidance on choosing a chart type. You can replace any of them - see [Agent Configuration](https://www.ag-grid.com/studio/react/ai-custom-agents/).

## Next

- [Built-in Tools](https://www.ag-grid.com/studio/react/ai-tools-builtin/) - what each tool does
- [Agent Configuration](https://www.ag-grid.com/studio/react/ai-custom-agents/) - changing instructions, tools or the team
- [Agent Overview](https://www.ag-grid.com/studio/react/ai-agents/) - the contract underneath