---
title: "Module Setup"
framework: angular
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/angular/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 ... */ />

this.ai = myAdapter;
```

The panel appears automatically once an adapter is set. See [LLM Adapter](https://www.ag-grid.com/studio/angular/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 ... */ />

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

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 '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

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

## Next Steps

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