feat: gemini api key input component

Author: dumbbellcode

package-lock.json

@@ -1,7 +1,6 @@
 {
   "dependencies": {
     "@google/generative-ai": "^0.24.1",
-    "@huggingface/transformers": "^3.6.3",
     "dom-accessibility-api": "^0.7.0",
     "marked": "^15.0.7",
     "notivue": "^2.4.5",

package.json

@@ -1,5 +1,6 @@
 import { GenerativeModel, GoogleGenerativeAI } from "@google/generative-ai"
 
+const MODEL = "gemini-2.5-flash"
 export default class Llmservice {
   private genAI: GoogleGenerativeAI
   private textModel: GenerativeModel
@@ -8,13 +9,22 @@ export default class Llmservice {
   constructor(apiKey: string) {
     this.genAI = new GoogleGenerativeAI(apiKey)
     // For text-only input, use the gemini-pro model
-    this.textModel = this.genAI.getGenerativeModel({
-      model: "gemini-2.5-flash",
-    })
+    this.textModel = this.genAI.getGenerativeModel({model: MODEL})
     // For JSON output, we'll use the same model and guide it with the prompt
-    this.jsonModel = this.genAI.getGenerativeModel({
-      model: "gemini-2.5-flash",
-    })
+    this.jsonModel = this.genAI.getGenerativeModel({model: MODEL})
+  }
+
+  static async validateApiKey(apiKey: string): Promise<boolean> {
+    try {
+      const genAI = new GoogleGenerativeAI(apiKey)
+      const model = genAI.getGenerativeModel({ model: MODEL })
+      // Make a simple, low-cost call to validate the key
+      await model.generateContent("ping !")
+      return true
+    } catch (error) {
+      console.error("API Key validation failed:", error)
+      return false
+    }
   }
 
   /**

src/background/services/llm.ts

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useSettingsStore } from "@/stores/settings.store"
+
+const settingsStore = useSettingsStore()
+
+</script>
+
+<template>
+  <div class="flex flex-col text-sm rounded-lg px-1 mt-4 gap-y-1">
+    <div class="mb-2 md:mb-0">
+      <div class="flex items-center">
+        <div>Gemini API Key</div>
+        <div
+          class="tooltip tooltip-right ml-1"
+          data-tip="This is required for the extension to autofill using AI"
+        >
+          <i-ph-info class="w-4 h-4 text-gray-400 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <input
+        type="text"
+        class="input input-bordered input-sm max-w-md"
+        :value="settingsStore.llmApiKey"
+        @input="settingsStore.validateAndSetLlmApiKey(($event.target as HTMLInputElement).value)"
+      />
+    </div>
+    <div
+      v-if="settingsStore.llmApiKeyIsValid === false"
+      class="text-error text-xs mt-1"
+    >
+      API key is invalid :(
+    </div>
+    <div
+      v-if="settingsStore.llmApiKeyIsValid"
+      class="text-success text-xs mt-1"
+    >
+      Valid key, awesome :)
+    </div>
+    <div
+      v-if="!settingsStore.llmApiKeyIsValid"
+      class="text-xs text-gray-500"
+    >
+      Go to
+      <a href="https://aistudio.google.com/apikey"> https://aistudio.google.com/apikey </a>
+      and click on 'Create API Key'
+    </div>
+  </div>
+</template>

src/components/GeminiApiKeyInput.vue

@@ -211,11 +211,6 @@ async function fillInputInForm(
     }
     const isRoleGroup = isRoleGroupNode(element)
 
-    console.log({
-      isRoleGroup,
-      element,
-    })
-
     if (isRoleGroup && typeof item.value === "string") {
       const options = item.value.split("|")
       applyGroupNodeAnswer(element, options)

src/content-script/index.ts

@@ -1,5 +1,7 @@
 import { Settings } from "@/types/common"
 import { defineStore } from "pinia"
+import LlmService from "@/background/services/llm"
+import { debounce } from "@/utils/common"
 
 interface Tokens {
   google?: string
@@ -37,6 +39,7 @@ export const useSettingsStore = defineStore("settings", () => {
       email: "",
       isTosAgreed: false,
       llmApiKey: "",
+      llmApiKeyIsValid: null
     },
   )
 
@@ -68,8 +71,6 @@ export const useSettingsStore = defineStore("settings", () => {
     tokens.value.google = token
   }
 
-  
-
   function clearTokens() {
     tokens.value = {}
   }
@@ -78,9 +79,20 @@ export const useSettingsStore = defineStore("settings", () => {
     settings.value.isTosAgreed = true
   }
 
-  function setLlmApiKey(apiKey: string) {
+  const validateAndSetLlmApiKey = debounce(async (apiKey: string) => {
+    if (!apiKey) {
+      settings.value.llmApiKey = ""
+      settings.value.llmApiKeyIsValid = null
+      return
+    }
     settings.value.llmApiKey = apiKey
-  }
+    const isValid = await LlmService.validateApiKey(apiKey)
+    if (isValid) {
+      settings.value.llmApiKeyIsValid = true
+    } else {
+      settings.value.llmApiKeyIsValid = false
+    }
+  }, 300)
 
   function setDummyValuesForLocalDev() {
     tokens.value = {
@@ -102,7 +114,7 @@ export const useSettingsStore = defineStore("settings", () => {
     setGoogleToken,
     clearTokens,
     tosAgreed,
-    setLlmApiKey,
+    validateAndSetLlmApiKey,
     setDummyValuesForLocalDev,
     displayActionIcon: computed(() => settings.value.displayActionIcon),
     activeProfileId: computed(() => settings.value.activeProfileId),
@@ -116,6 +128,7 @@ export const useSettingsStore = defineStore("settings", () => {
     googleToken: computed(() => tokens.value.google),
     isTosAgreed: computed(() => settings.value.isTosAgreed),
     llmApiKey: computed(() => settings.value.llmApiKey),
+    llmApiKeyIsValid: computed(() => settings.value.llmApiKeyIsValid),
     profiles: computed(() => settings.value.profiles),
   }
 })

src/stores/settings.store.ts

@@ -377,6 +377,7 @@
     "YT_PLAYLIST_LINK": true,
     "isDevelopmentEnv": true,
     "useProfilesStore": true,
-    "shortDetailsDynamicStore": true
+    "shortDetailsDynamicStore": true,
+    "debounce": true
   }
 }

src/types/.eslintrc-auto-import.json

@@ -39,6 +39,7 @@ declare global {
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const customersRef: typeof import('../utils/firebase')['customersRef']
+  const debounce: typeof import('../utils/common')['debounce']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -411,6 +412,7 @@ declare module 'vue' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debounce: UnwrapRef<typeof import('../utils/common')['debounce']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>

src/types/auto-imports.d.ts

@@ -74,6 +74,7 @@ export interface Settings {
   email: string
   isTosAgreed: boolean
   llmApiKey: string
+  llmApiKeyIsValid: boolean | null
 }
 
 export enum DETAIL_TYPES {

src/types/common.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     AppFooter: typeof import('./../components/AppFooter.vue')['default']
     AppHeader: typeof import('./../components/AppHeader.vue')['default']
     DisplayError: typeof import('./../components/state/DisplayError.vue')['default']
+    GeminiApiKeyInput: typeof import('./../components/GeminiApiKeyInput.vue')['default']
     ICarbonLogoGithub: typeof import('~icons/carbon/logo-github')['default']
     ILucideDelete: typeof import('~icons/lucide/delete')['default']
     IPhArrowLeft: typeof import('~icons/ph/arrow-left')['default']