Vue Embedded AnalyticsAgent Quick Start

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgAiHarnessSetup,
  AgAiModel,
  AgAiPromptStarter,
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioAiModule,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioModuleRegistry,
  AgStudioProperties,
  createAiHarness,
} from "ag-studio";
import { getGhcnCitiesData } from "./shared/ghcnCities/data.ts";
import { ghcnCitiesReportState } from "./shared/ghcnCities/state.ts";
import { openaiAdapter } from "./shared/openaiAdapter.ts";

AgStudioModuleRegistry.registerModules([AgStudioAiModule]);

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

export const AI_API_TOKEN = "";

// 2. Connect a provider. In production this endpoint is your own, so the key never reaches the browser.
const adapter = openaiAdapter({
  endpoint: AI_API_URL,
  key: AI_API_TOKEN,
});

/**
 * The suggestions a new conversation opens on. They show only until the first message is sent,
 * so they are an opening move rather than a menu.
 */
const PROMPT_STARTERS: AgAiPromptStarter[] = [
  {
    label: "Chart average highs",
    prompt: "Add a bar chart of average high temperature by city.",
  },
  {
    label: "Compare climate bands",
    prompt:
      "Add a bar chart comparing average high and average low temperature by climate band.",
  },
  {
    label: "Explain the data",
    prompt: "What tables and fields does this dashboard have available?",
  },
];

/**
 * The models offered beside the send button. Each `id` reaches the adapter as declared here and is
 * passed straight on to the provider, so these are real model ids. The first is the one a new
 * conversation starts on.
 */
const MODELS: AgAiModel[] = [
  { id: "gpt-5.6-terra", label: "GPT-5.6 Terra" },
  { id: "gpt-5.6-sol", label: "GPT-5.6 Sol" },
  { id: "gpt-5.6-luna", label: "GPT-5.6 Luna" },
];

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>(
      getGhcnCitiesData("https://www.ag-grid.com/studio/example-assets"),
    );
    const mode = ref<AgStudioMode>("edit");
    const initialState = ref<AgReportState>({
      ...ghcnCitiesReportState,
      // Collapse the filters panel and open on the blank page, so the assistant has work to do.
      panels: {
        ...ghcnCitiesReportState.panels,
        filters: {
          collapsed: true,
        },
      },
      selectedPageId: "blank",
    });
    const ai = ref<AgAiHarnessSetup>(({ api }) =>
      createAiHarness(api, {
        adapter,
        promptStarters: PROMPT_STARTERS,
        models: MODELS,
      }),
    );

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

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

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