React Embedded AnalyticsConfiguration

This page covers everything needed to get the AI assistant running after you have built an adapter.

Module Registration Copy Link

The AI assistant lives in AgStudioAiModule, which must be registered before creating a studio instance.

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

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

The ai Property Copy Link

The ai property accepts your AgAiAssistant adapter and is marked @initial - it must be set at construction time and cannot be changed later.

const ai = myAdapter;

<AgStudio ai={ai} />

See Building an Adapter for how to create a valid AgAiAssistant implementation.

Showing the AI Panel Copy Link

The AI panel is visible by default when an adapter is provided. You can control panel visibility via initialState:

const ai = myAdapter;
const initialState = useMemo(() => { 
	return {
        pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
        selectedPageId: 'main',
        panels: {
            ai: {
                collapsed: false,  // panel visible and expanded
            },
        },
    };
}, []);

<AgStudio
    ai={ai}
    initialState={initialState}
/>

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

State Persistence Copy Link

AI conversation state is included automatically when you call getState() and setState(). The state object includes an ai key containing the full AgAiAssistantState - threads, conversations, exchanges, and artifacts.

// Save state (includes AI conversations)
const state = studioApi.getState();
localStorage.setItem('myReport', JSON.stringify(state));

// Restore state (restores AI conversations)
const saved = JSON.parse(localStorage.getItem('myReport')!);
studioApi.setState(saved);

You can also provide initial AI state at construction time. This can be used to save conversation state so history is preserved across sessions.

const ai = myAdapter;
const initialState = useMemo(() => { 
	return {
        pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
        selectedPageId: 'main',
        ai: savedAiState,  // AgAiAssistantState
    };
}, []);

<AgStudio
    ai={ai}
    initialState={initialState}
/>

This is how the overview example pre-loads a completed conversation.

Next Steps Copy Link

• Agentic Experience - Understand the multi-agent orchestration system.