---
title: "Module Setup"
framework: vue
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/vue/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]);
```

> **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.

```ts
<ag-studio
    :ai="ai"
    /* other studio properties ... */>
</ag-studio>

this.ai = myAdapter;
```

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

## Show or Hide the Panel

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

```ts
<ag-studio
    :ai="ai"
    :initialState="initialState"
    /* other studio properties ... */>
</ag-studio>

this.ai = myAdapter;
this.initialState = {
    pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
    selectedPageId: 'main',
    panels: {
        ai: {
            collapsed: false,
        },
    },
};
```

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`:

```ts
<ag-studio
    :ai="ai"
    :initialState="initialState"
    /* other studio properties ... */>
</ag-studio>

this.ai = myAdapter;
this.initialState = {
    pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
    selectedPageId: 'main',
    ai: savedAiState,
};
```

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import { openaiAdapter } from "./shared/openaiAdapter.ts";
import {
  AgAiAssistant,
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioAiModule,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioModuleRegistry,
  AgStudioProperties,
} from "ag-studio";
import { getMainDemoData } from "./data.ts";
import { exampleAiState } from "./exampleAiState.ts";

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

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

export const AI_API_TOKEN = "";

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :data="data"
        :mode="mode"
        :initialState="initialState"
        :ai="ai"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(
      getMainDemoData("https://www.ag-grid.com/studio/example-assets"),
    );
    const mode = ref<AgStudioMode>("edit");
    const initialState = ref<AgReportState>({
      pages: [{ id: "main", widgets: {}, widgetLayout: {} }],
      selectedPageId: "main",
      panels: {
        filters: { collapsed: true },
        edit: { collapsed: true },
        data: { collapsed: true },
      },
      ai: exampleAiState,
    });
    const ai = ref<AgAiAssistant>(
      openaiAdapter({
        endpoint: AI_API_URL,
        key: AI_API_TOKEN,
      }),
    );

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;
    };

    return {
      studioApi,
      data,
      mode,
      initialState,
      ai,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## Next Steps

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