JavaScript Embedded AnalyticsModule 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.

Register the Module Copy Link

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

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:

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

See CDN Installation for the script tag.

Provide an Adapter Copy Link

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.

const studioProperties = {
    ai: myAdapter,

    // other studio properties ...
}

The panel appears automatically once an adapter is set. See LLM Adapter for how to implement AgAiAssistant.

Show or Hide the Panel Copy Link

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

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 Copy Link

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.

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:

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.

Next Steps Copy Link

• LLM Adapter - Connect the assistant to your LLM.
• Default Agents - The agents and tools you get out of the box.