feat: support openrouter

Author: tmg0

app/composables/useLlm.ts

@@ -3,10 +3,12 @@ import { createFetch } from '@vueuse/core'
 
 const _GOOGLE_AI_MODELS = GOOGLE_AI_MODELS.map(({ model }) => model)
 const _DEEPSEEK_MODELS = DEEPSEEK_MODELS.map(({ model }) => model)
+const _OPENROUTER_MODELS = OPENROUTER_MODELS.map(({ model }) => model)
 
 const _MODELS = [
   ..._GOOGLE_AI_MODELS,
   ..._DEEPSEEK_MODELS,
+  ..._OPENROUTER_MODELS,
 ]
 
 export function useLlm(model: MaybeRef<string>) {
@@ -15,7 +17,7 @@ export function useLlm(model: MaybeRef<string>) {
   const _model = computed(() => unref(model))
 
   const store = useSettingsStore()
-  const { googleAPIKey, deepseekApiKey } = storeToRefs(store)
+  const { googleAPIKey, deepseekApiKey, openrouterApiKey } = storeToRefs(store)
 
   const openai = computed(() => {
     if (!_MODELS.includes(_model.value))
@@ -31,6 +33,11 @@ export function useLlm(model: MaybeRef<string>) {
       _baseURL = 'https://api.deepseek.com/v1'
     }
 
+    if (_OPENROUTER_MODELS.includes(_model.value) && openrouterApiKey.value && openrouterApiKey.value.startsWith('sk-')) {
+      _apiKey = openrouterApiKey.value
+      _baseURL = 'https://openrouter.ai/api/v1'
+    }
+
     if (!_apiKey)
       return
 

app/pages/[id].vue

@@ -29,6 +29,7 @@ const llm = computed(() => {
   const _MODELS = [
     ...GOOGLE_AI_MODELS,
     ...DEEPSEEK_MODELS,
+    ...OPENROUTER_MODELS,
   ]
 
   return _MODELS.find(m => m.model === model.value)

app/pages/[id]/queries/index.vue

@@ -296,7 +296,9 @@ async function onGenerateSqlByLlm() {
                       </StepperTitle>
 
                       <StepperDescription class="text-xs text-zinc-600/50">
-                        {{ step.description }}
+                        <div class="truncate w-52">
+                          {{ step.description }}
+                        </div>
                       </StepperDescription>
                     </div>
                   </StepperItem>

app/pages/[id]/settings/index.vue

@@ -2,7 +2,7 @@
 import { Input } from '~/components/ui/input'
 
 const store = useSettingsStore()
-const { language, googleAPIKey, deepseekApiKey, model } = storeToRefs(store)
+const { language, googleAPIKey, deepseekApiKey, openrouterApiKey, model } = storeToRefs(store)
 </script>
 
 <template>
@@ -68,6 +68,15 @@ const { language, googleAPIKey, deepseekApiKey, model } = storeToRefs(store)
                   {{ m.alias }}
                 </SelectItem>
               </SelectGroup>
+
+              <SelectGroup v-if="openrouterApiKey">
+                <SelectLabel class="cursor-default">
+                  OpenRouter
+                </SelectLabel>
+                <SelectItem v-for="m in OPENROUTER_MODELS" :key="m.model" :value="m.model">
+                  {{ m.alias }}
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </div>
@@ -113,6 +122,24 @@ const { language, googleAPIKey, deepseekApiKey, model } = storeToRefs(store)
           <Input v-model="deepseekApiKey" type="password" class="h-8" placeholder="sk-..." />
         </div>
 
+        <div>
+          <div class="text-sm font-semibold mb-2">
+            OpenRouter
+          </div>
+
+          <div class="text-xs text-zinc-600/50 mb-4 cursor-default">
+            <div>To use tablite assistant with OpenRouter you need to add an API key. Follow these steps:</div>
+            <div>
+              Create one by visiting <Button variant="link" class="text-xs p-0 h-4 text-zinc-600 font-normal">
+                https://openrouter.ai/settings/keys
+              </Button>
+            </div>
+            <div>Paste your API key below and hit enter to use the assistant</div>
+          </div>
+
+          <Input v-model="openrouterApiKey" type="password" class="text-sm h-8" placeholder="sk-..." />
+        </div>
+
         <div>
           <div class="text-sm font-semibold mb-2">
             OpenAI

app/utils/constants.ts

@@ -119,6 +119,11 @@ export const DEEPSEEK_MODELS = [
   { model: 'deepseek-reasoner', alias: 'DeepSeek R1', icon: '/images/deepseek.svg' },
 ]
 
+export const OPENROUTER_MODELS = [
+  { model: 'google/gemini-2.0-flash-lite-preview-02-05:free', alias: 'Gemini Flash Lite 2.0', icon: '/images/openrouter.svg' },
+  { model: 'google/gemini-2.0-pro-exp-02-05:free', alias: 'Gemini Pro 2.0 Experimental', icon: '/images/openrouter.svg' },
+]
+
 export const SQL_KEYWORDS = [
   'ACCESSIBLE',
   'ADD',