Add Caido AISDK integration

caido.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   id,
   name: "Data Grep",
   description: "Extract data from your requests and responses",
-  version: "1.2.1",
+  version: "1.2.2",
   author: {
     name: "Caido Labs Inc.",
     email: "dev@caido.io",

packages/backend/package.json

@@ -9,11 +9,11 @@
     "test:watch": "vitest"
   },
   "devDependencies": {
-    "@caido/sdk-backend": "^0.47.1",
+    "@caido/sdk-backend": "0.55.3",
     "shared": "workspace:*",
     "vitest": "^2.1.0"
   },
   "dependencies": {
-    "zod": "^3.25.30"
+    "zod": "3.25.76"
   }
 }

packages/frontend/package.json

@@ -12,16 +12,18 @@
     "@codemirror/theme-one-dark": "6.1.3",
     "@types/dompurify": "3.2.0",
     "@vueuse/core": "13.1.0",
+    "ai": "6.0.116",
     "codemirror": "6.0.2",
     "dompurify": "3.3.1",
     "pinia": "3.0.2",
     "primevue": "4.3.3",
     "vue": "3.5.13",
-    "vue-codemirror": "6.1.1"
+    "vue-codemirror": "6.1.1",
+    "zod": "3.25.76"
   },
   "devDependencies": {
-    "@caido/sdk-backend": "^0.47.1",
-    "@caido/sdk-frontend": "^0.47.1",
+    "@caido/sdk-backend": "0.55.3",
+    "@caido/sdk-frontend": "0.55.3",
     "backend": "workspace:*",
     "shared": "workspace:*",
     "vue-tsc": "2.2.8"

packages/frontend/src/components/search/ai-dialog/AIDialog.vue

@@ -1,30 +1,51 @@
 <script setup lang="ts">
 import { useAIStore } from "@/stores";
 import Button from "primevue/button";
+import Select from "primevue/select";
 import Textarea from "primevue/textarea";
 
 const aiStore = useAIStore();
 </script>
 
 <template>
-  <Textarea
-    v-model="aiStore.prompt"
-    autoResize
-    :rows="10"
-    placeholder="Prompt"
-    class="w-full"
-    :style="{
-      fontSize: '14px',
-      background: 'var(--c-gray-800)',
-    }"
-  />
-  <div class="flex justify-end">
-    <Button
-      label="Ask AI"
-      icon="fas fa-robot"
-      class="p-button-primary"
-      :loading="aiStore.isProcessing"
-      @click="aiStore.processAIPrompt"
-    />
+  <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-1">
+      <label class="text-xs font-medium text-surface-400">Model</label>
+      <Select
+        v-model="aiStore.selectedModel"
+        :options="aiStore.availableModelGroups"
+        optionLabel="name"
+        optionGroupLabel="label"
+        optionGroupChildren="models"
+        placeholder="Select a model"
+        class="w-full"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label class="text-xs font-medium text-surface-400">Ask AI</label>
+      <Textarea
+        v-model="aiStore.prompt"
+        :rows="8"
+        placeholder="Describe the regex pattern you need..."
+        class="w-full"
+        :style="{
+          fontSize: '14px',
+          background: 'var(--c-gray-800)',
+          resize: 'vertical',
+        }"
+      />
+    </div>
+
+    <div class="flex justify-end">
+      <Button
+        label="Generate"
+        icon="fas fa-robot"
+        class="p-button-primary"
+        :loading="aiStore.isProcessing"
+        :disabled="!aiStore.selectedModel || !aiStore.prompt.trim()"
+        @click="aiStore.processAIPrompt"
+      />
+    </div>
   </div>
 </template>

packages/frontend/src/components/search/ai-dialog/Container.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import { useAIStore } from "@/stores";
 import Dialog from "primevue/dialog";
-import { computed } from "vue";
 import AIDialog from "./AIDialog.vue";
-import MissingKey from "./MissingKey.vue";
+import NoProviders from "./NoProviders.vue";
 
 const aiStore = useAIStore();
-const apiKey = computed(() => aiStore.getApiKey());
 </script>
 
 <template>
   <Dialog
     v-model:visible="aiStore.dialogVisible"
     modal
-    header="Generate script with AI"
+    header="Generate Regex with AI"
     :style="{ width: '500px' }"
     @hide="aiStore.closeDialog"
   >
     <div class="flex flex-col gap-4">
-      <MissingKey v-if="!apiKey" />
+      <NoProviders v-if="!aiStore.hasAvailableProviders" />
       <AIDialog v-else />
     </div>
   </Dialog>

packages/frontend/src/components/search/ai-dialog/NoProviders.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <p class="text-sm">
+      No AI providers are configured. To use AI-powered regex generation,
+      configure at least one provider in
+      <span class="font-semibold">Settings &gt; AI</span>.
+    </p>
+    <p class="text-xs text-surface-400">
+      Supported providers: OpenAI, Anthropic, Google, and OpenRouter.
+    </p>
+  </div>
+</template>

packages/frontend/src/stores/aiStore.ts

@@ -1,7 +1,12 @@
 import { useSDK } from "@/plugins/sdk";
-import { askOpenAI, SYSTEM_PROMPT } from "@/utils/ai";
+import {
+  generateRegexPattern,
+  getAvailableModelGroups,
+  type Model,
+  type ModelGroup,
+} from "@/utils/ai";
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useGrepStore } from "./grepStore";
 
 export const useAIStore = defineStore("ai", () => {
@@ -11,29 +16,43 @@ export const useAIStore = defineStore("ai", () => {
   const dialogVisible = ref(false);
   const prompt = ref("");
   const isProcessing = ref(false);
-  const apiKey = ref("");
+  const selectedModel = ref<Model | undefined>();
+
+  const availableModelGroups = computed<ModelGroup[]>(() =>
+    getAvailableModelGroups(sdk),
+  );
+
+  const hasAvailableProviders = computed(
+    () => availableModelGroups.value.length > 0,
+  );
 
   function openDialog() {
     dialogVisible.value = true;
-    refreshApiKey();
+
+    const groups = availableModelGroups.value;
+    const allModels = groups.flatMap((g) => g.models);
+
+    const currentStillAvailable =
+      selectedModel.value &&
+      allModels.some(
+        (m) =>
+          m.id === selectedModel.value!.id &&
+          m.provider === selectedModel.value!.provider,
+      );
+
+    if (!currentStillAvailable && allModels.length > 0) {
+      selectedModel.value = allModels[0];
+    }
   }
 
   function closeDialog() {
     dialogVisible.value = false;
     prompt.value = "";
   }
 
-  function refreshApiKey() {
-    apiKey.value = sdk.env.getVar("OPENAI_API_KEY") || "";
-  }
-
-  function getApiKey() {
-    return apiKey.value;
-  }
-
   async function processAIPrompt() {
-    if (!apiKey.value) {
-      sdk.window.showToast("No API key found", { variant: "error" });
+    if (!selectedModel.value) {
+      sdk.window.showToast("No AI model selected", { variant: "error" });
       return;
     }
 
@@ -45,31 +64,23 @@ export const useAIStore = defineStore("ai", () => {
     isProcessing.value = true;
     dialogVisible.value = false;
 
-    let count = 0;
-
     try {
-      await askOpenAI(
-        apiKey.value,
+      const { pattern, matchGroup } = await generateRegexPattern(
+        sdk,
+        selectedModel.value,
         prompt.value,
-        SYSTEM_PROMPT,
-        (content: string) => {
-          if (count === 0) {
-            grepStore.pattern = content;
-          } else {
-            grepStore.options.matchGroups = [parseInt(content) || 0];
-          }
-
-          count++;
-        }
       );
 
+      grepStore.pattern = pattern;
+      grepStore.options.matchGroups = [matchGroup];
+
       sdk.window.showToast("AI pattern generated successfully", {
         variant: "success",
       });
     } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Unknown error";
-      sdk.window.showToast("Failed to generate pattern: " + errorMessage, {
+      const message =
+        error instanceof Error ? error.message : "Unknown error occurred";
+      sdk.window.showToast(`Failed to generate pattern: ${message}`, {
         variant: "error",
       });
     } finally {
@@ -81,11 +92,11 @@ export const useAIStore = defineStore("ai", () => {
     dialogVisible,
     prompt,
     isProcessing,
-    apiKey,
+    selectedModel,
+    availableModelGroups,
+    hasAvailableProviders,
     openDialog,
     closeDialog,
     processAIPrompt,
-    getApiKey,
-    refreshApiKey,
   };
 });