---
product: "AG Studio"
title: "Quick Start"
description: "AG Studio is an embedded analytics component for building interactive dashboards. The minimum setup is a single data source and a blank canvas."
framework: react
version: "3.0.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/overview/"
    - title: "Building a Dashboard"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/tutorial/"
    - title: "Migration"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/migration/"
    - title: "Enterprise Licence"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/enterprise-licence/"
    - title: "AI Skills"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/skills/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# Quick Start

AG Studio is an embedded analytics component for building interactive dashboards. The minimum setup is a single data source and a blank canvas.

## 1. Install

Install the `ag-studio-react` package from `npm`:

```bash
npm install ag-studio-react
```

## 2. Create Studio

Studio works with arrays of plain objects, where each array becomes a data source.

Render the `AgStudio` component inside a sized parent (it automatically fills the available space) and set `mode` to `"edit"` so users can build and modify reports:

```jsx
import { AgStudio } from 'ag-studio-react';

// Data to display in Studio (can also be loaded asynchronously)
const productData = [
    {
        productName: 'Printer',
        category: 'Printing & Imaging',
        brand: 'CleanSlate Office',
        listPrice: 109.09,
        unitCost: 92.26,
    },
    {
        productName: 'Notebook',
        category: 'Paper & Notebooks',
        brand: 'PaperLine',
        listPrice: 24.70,
        unitCost: 14.19,
    },
    {
        productName: 'Highlighters',
        category: 'Writing Instruments',
        brand: 'PaperLine',
        listPrice: 10.34,
        unitCost: 5.03,
    },
    // ... more rows
];

const App = () => {
    const data = {
        sources: [{
            id: 'products',
            data: productData,
        }],
    };

    return (
        <div style={{ height: '100%', width: '100%' }}>
            <AgStudio data={data} mode="edit" />
        </div>
    );
};
```

## 3. Run your app

The result is an empty AG Studio component that users can begin building reports with:

#### Quick Start Example

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgStudioApi,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

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

const productData = [
  {
    productName: "Printer",
    category: "Printing & Imaging",
    brand: "CleanSlate Office",
    listPrice: 109.09,
    unitCost: 92.26,
  },
  {
    productName: "Notebook",
    category: "Paper & Notebooks",
    brand: "PaperLine",
    listPrice: 24.7,
    unitCost: 14.19,
  },
  {
    productName: "Highlighters",
    category: "Writing Instruments",
    brand: "PaperLine",
    listPrice: 10.34,
    unitCost: 5.03,
  },
  // ... more rows
];

const StudioExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSource>({
    sources: [
      {
        id: "products",
        data: productData,
      },
    ],
  });

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <AgStudio
          style={studioStyle}
          className="my-studio-container"
          data={data}
          mode={"edit"}
        />
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <StudioExample />
  </StrictMode>,
);
```

[Live example: Quick Start Example](https://www.ag-grid.com/studio/archive/3.0.0/examples/quick-start/quick-start-example/reactFunctionalTs/)

## Next Steps

**[Tutorial](https://www.ag-grid.com/studio/archive/3.0.0/react/tutorial/)**

New to AG Studio? Follow a step-by-step guide to build a complete multi-page dashboard from scratch.

**[Configuring Data](https://www.ag-grid.com/studio/archive/3.0.0/react/data/)**

Already familiar with dashboard tooling? Learn more about how to configure data.