---
title: "Module Setup"
framework: javascript
version: "2.1.2"
---

# Module Setup

The AI assistant is an opt-in module. This page covers the plumbing every integration needs: registering the module, providing an adapter, showing the panel, and persisting conversation state. It is provider-agnostic - connecting a specific LLM is covered in [LLM Adapter](https://www.ag-grid.com/studio/javascript/ai-adapter/).

## Register the Module

The assistant lives in `AgStudioAiModule`. Register it before creating a Studio instance.

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

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

The module cannot be imported from the UMD bundle. When using it, call `agStudio.createStudioWithAi` in place of `agStudio.createStudio` to register the AI module and create a Studio instance in one step:

```js
const studioApi = agStudio.createStudioWithAi(document.querySelector('#myStudio'), studioProperties);
```

See [CDN Installation](https://www.ag-grid.com/studio/javascript/installation#cdn-installation) for the script tag.

> **Note**
>
> The AI module requires an **AG Studio Pro with AI** licence. It will not activate without a valid key.

## Provide an Adapter

The `ai` property accepts your `AgAiAssistant` adapter - the connection to your LLM. It is marked `@initial`: set it at construction time; it cannot be changed later.

```js
const studioProperties = {
    ai: myAdapter,

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

The panel appears automatically once an adapter is set. See [LLM Adapter](https://www.ag-grid.com/studio/javascript/ai-adapter/) for how to implement `AgAiAssistant`.

## Show or Hide the Panel

The panel is visible by default. Control its initial visibility through `initialState`:

```js
const studioProperties = {
    ai: myAdapter,
    initialState: {
        pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
        selectedPageId: 'main',
        panels: {
            ai: {
                collapsed: false,
            },
        },
    },

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

Set `collapsed: true` to start with the panel hidden. Users can toggle it from the toolbar at any time.

## Persist Conversation State

Conversation state is part of Studio state. `getState()` includes an `ai` key holding the full `AgAiAssistantState` - threads, conversations, exchanges, and artifacts - and `setState()` restores it.

```ts
const state = studioApi.getState();
localStorage.setItem('myReport', JSON.stringify(state));

const saved = JSON.parse(localStorage.getItem('myReport')!);
studioApi.setState(saved);
```

To restore conversations at construction time, pass saved state under the `ai` key of `initialState`:

```js
const studioProperties = {
    ai: myAdapter,
    initialState: {
        pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
        selectedPageId: 'main',
        ai: savedAiState,
    },

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

The example below is constructed this way: its `initialState.ai` holds a saved conversation, so the AI panel opens with that chat history already in place rather than an empty thread.

#### Persisted Conversation

```ts
import { openaiAdapter } from "./shared/openaiAdapter.ts";
import {
  AgStudioAiModule,
  AgStudioApi,
  AgStudioModuleRegistry,
  AgStudioProperties,
  createStudio,
} from "ag-studio";
import { getMainDemoData } from "./data.ts";
import { exampleAiState } from "./exampleAiState.ts";

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

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

const studioProperties: AgStudioProperties = {
  data: getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
  mode: "edit",
  initialState: {
    pages: [{ id: "main", widgets: {}, widgetLayout: {} }],
    selectedPageId: "main",
    panels: {
      filters: { collapsed: true },
      edit: { collapsed: true },
      data: { collapsed: true },
    },
    ai: exampleAiState,
  },
  ai: openaiAdapter({
    endpoint: AI_API_URL,
    key: AI_API_TOKEN,
  }),
};

let studioApi: AgStudioApi;

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

[Live example: Persisted Conversation](https://www.ag-grid.com/studio/examples/ai-configuration/ai-persistence-example/typescript/)

## Next Steps

- [LLM Adapter](https://www.ag-grid.com/studio/javascript/ai-adapter/) - Connect the assistant to your LLM.
- [Default Agents](https://www.ag-grid.com/studio/javascript/ai-ax/) - The agents and tools you get out of the box.