---
product: "AG Studio"
title: "Installation"
description: "AG Studio is available for download from NPM. Once installed, you need to import the package and optionally register the AI module."
framework: react
version: "3.0.0"
related:
    - title: "Installing a Licence Key"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/licence-install/"
    - title: "React Best Practices"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/react/react-best-practices/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# Installation

AG Studio is available for download from NPM. Once installed, you need to import the package and optionally register the AI module.

## Installation

Install the `ag-studio-react` package, which also installs `ag-studio`:

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

> **Note**
>
> You can test AG Studio locally without a licence. To test in production, access support, and remove the watermark and console warnings, [Request a Trial Licence](https://www.ag-grid.com/studio/archive/3.0.0/license-pricing/?tab=trial).

> **Note**
>
> `ag-studio-react` and `ag-studio` versions must be identical to ensure that all features work correctly. [Matching AG Grid and AG Charts Versions](https://www.ag-grid.com/studio/archive/3.0.0/react/compatibility/#ag-grid-and-ag-charts-compatibility) are also required.

In order to access [AI Features](https://www.ag-grid.com/studio/archive/3.0.0/react/ai/), wrap your application in `AgStudioProvider` and pass it the `AgStudioAiModule`:

```js
import { AgStudio, AgStudioProvider } from 'ag-studio-react';
import { AgStudioAiModule } from 'ag-studio';

<AgStudioProvider modules={[AgStudioAiModule]}>
    <AgStudio /* ... props */ />
</AgStudioProvider>
```

Registering the module with `AgStudioModuleRegistry` also still works.

It is also possible to register the AI module directly to an instance of Studio:

```jsx
const modules = useMemo(() => { 
	return [AgStudioAiModule];
}, []);

<AgStudio modules={modules} />
```

## Importing

Import `AgStudio` from the `ag-studio-react` package:

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

## Development Validations

Development-time validations help to identify misconfiguration early. We recommend doing so only in development builds to keep production bundles small.

Call `enableStudioDevValidations` once, before any Studio instance is created:

```js
import { enableStudioDevValidations } from 'ag-studio';

if (process.env.NODE_ENV !== 'production') {
    enableStudioDevValidations();
}
```