feat: lm studio support

Author: lancewilhelm

app/assets/icons/lmstudio.svg

@@ -5,12 +5,14 @@ interface Models {
   openai: Model[];
   gemini: Model[];
   anthropic: Model[];
+  lmstudio: Model[];
   ollama: Record<string, Model[]>;
 }
 const models = ref<Models>({
   openai: [],
   gemini: [],
   anthropic: [],
+  lmstudio: [],
   ollama: {},
 });
 async function fetchModels(provider: keyof Models, url?: string) {
@@ -22,7 +24,8 @@ async function fetchModels(provider: keyof Models, url?: string) {
   } else if (
     provider === "openai" ||
     provider === "gemini" ||
-    provider === "anthropic"
+    provider === "anthropic" ||
+    provider === "lmstudio"
   ) {
     const response = await $fetch<{ models: Model[] }>(
       `/api/models/${provider}`,
@@ -204,29 +207,48 @@ async function pullOllamaModel(url: string) {
 const openaiAvailable = ref(false);
 const geminiAvailable = ref(false);
 const anthropicAvailable = ref(false);
+const lmStudioEnabled = computed(
+  () => globalSettingsStore.settings.lmStudioEnabled,
+);
+
 // Check the ollama endpoint on mount
 onMounted(async () => {
   // Check if the ollama url is set
   if (globalSettingsStore.settings.ollamaUrls) {
     for (const url of globalSettingsStore.settings.ollamaUrls) {
       testOllamaUrl(url);
     }
-    // Fetch the models
-    const response = await $fetch<{ providers: string[] }>("/api/providers");
-    if (response.providers.includes("openai")) {
-      openaiAvailable.value = true;
-      fetchModels("openai");
-    }
-    if (response.providers.includes("gemini")) {
-      geminiAvailable.value = true;
-      fetchModels("gemini");
-    }
-    if (response.providers.includes("anthropic")) {
-      anthropicAvailable.value = true;
-      fetchModels("anthropic");
-    }
+  }
+
+  // Check if the lm studio is available
+  if (lmStudioEnabled.value) {
+    fetchModels("lmstudio");
+  }
+  // Fetch the models
+  const response = await $fetch<{ providers: string[] }>("/api/providers");
+  if (response.providers.includes("openai")) {
+    openaiAvailable.value = true;
+    fetchModels("openai");
+  }
+  if (response.providers.includes("gemini")) {
+    geminiAvailable.value = true;
+    fetchModels("gemini");
+  }
+  if (response.providers.includes("anthropic")) {
+    anthropicAvailable.value = true;
+    fetchModels("anthropic");
   }
 });
+
+// Watch for lm studio enabled
+watch(
+  () => globalSettingsStore.settings.lmStudioEnabled,
+  (newValue) => {
+    if (newValue) {
+      fetchModels("lmstudio");
+    }
+  },
+);
 </script>
 
 <template>
@@ -312,6 +334,43 @@ onMounted(async () => {
       </div>
     </SettingsGroup>
 
+    <!-- LMStudio -->
+    <SettingsGroup title="lm studio" icon="local:lmstudio">
+      <div>
+        <SettingsToggleItem
+          title="enable LM Studio"
+          description="only connects to local lm studio instance for now"
+          :value="lmStudioEnabled"
+          @toggle="
+            () =>
+              globalSettingsStore.updateSettings({
+                lmStudioEnabled: !lmStudioEnabled,
+              })
+          "
+        />
+        <div
+          v-if="lmStudioEnabled"
+          class="w-full grid grid-cols-2 md:grid-cols-3 gap-2 text-nowrap mb-3"
+        >
+          <div
+            v-for="model in models?.lmstudio.sort((a, b) =>
+              a.name.localeCompare(b.name),
+            )"
+            :key="model.name"
+            :class="[
+              'flex  border border-(--main-color) rounded-full px-3 cursor-pointer ',
+              checkAvailableModel(model)
+                ? 'bg-(--main-color) text-(--bg-color)'
+                : 'text-(--text-color)',
+            ]"
+            @click="updateAvailableModels(model)"
+          >
+            <HoverScrollText>{{ model.name }}</HoverScrollText>
+          </div>
+        </div>
+      </div>
+    </SettingsGroup>
+    <!-- Ollama -->
     <SettingsGroup title="ollama" icon="simple-icons:ollama">
       <div class="flex items-center gap-2 mb-4">
         <div class="text-(--main-color)">add url</div>
@@ -422,6 +481,8 @@ onMounted(async () => {
         </div>
       </div>
     </SettingsGroup>
+
+    <!-- Leftover Models -->
     <SettingsGroup
       v-if="availableModels.filter((m) => !checkModelAgainstEndpoint(m)).length"
       title="leftover models"

app/components/Settings/SettingsAdminModels.vue

@@ -10,7 +10,7 @@ defineProps<{
     <div
       class="flex w-full items-center justify-between gap-3 text-(--main-color) text-xl settings-group-header"
     >
-      <div class="flex items-center gap-1 settings-group-title">
+      <div class="flex items-center gap-1 settings-group-title text-nowrap">
         <Icon
           v-if="typeof icon === 'string'"
           :name="icon"

app/components/Settings/SettingsGroup.vue

@@ -7,6 +7,7 @@ export interface GlobalSettings {
   allowRegistration: boolean;
   allowFileUpload: boolean;
   ollamaUrls: string[];
+  lmStudioEnabled: boolean;
 }
 
 function getDefaultSettings(): GlobalSettings {
@@ -15,6 +16,7 @@ function getDefaultSettings(): GlobalSettings {
     allowRegistration: false,
     allowFileUpload: false,
     ollamaUrls: [],
+    lmStudioEnabled: false,
   };
 }
 

app/stores/globalSettings.ts

@@ -6,6 +6,7 @@ export function getModelProviderIcon(provider?: string) {
     gemini: "simple-icons:googlegemini",
     openai: "simple-icons:openai",
     anthropic: "simple-icons:anthropic",
+    lmstudio: "local:lmstudio",
   };
   return modelIcons[provider] || "";
 }

app/utils/icon.ts

@@ -63,11 +63,10 @@ export default defineNuxtConfig({
     },
   },
   icon: {
-    provider: "server",
     customCollections: [
       {
         prefix: "local",
-        dir: "./assets/icons",
+        dir: "./app/assets/icons",
       },
     ],
     clientBundle: {

nuxt.config.ts

@@ -25,6 +25,7 @@
     "@libsql/client": "^0.15.4",
     "@libsql/darwin-arm64": "^0.5.8",
     "@libsql/linux-arm64-gnu": "^0.5.8",
+    "@lmstudio/sdk": "^1.1.1",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",

package.json

@@ -72,6 +72,13 @@ export default defineEventHandler(async (event) => {
           systemPrompt,
         });
         break;
+      case "lmstudio":
+        stream = await streamLMStudio({
+          history,
+          model: model.name,
+          systemPrompt,
+        });
+        break;
       case "ollama":
         if (!model.url) {
           logger.error("POST /api/llm: Invalid request: No URL specified");

pnpm-lock.yaml

@@ -11,7 +11,7 @@ export default defineEventHandler(async (event) => {
   });
 
   if (!session) {
-    logger.error("GET /api/models/openai: Unauthorized access attempt");
+    logger.error("GET /api/models/anthropic: Unauthorized access attempt");
     setResponseStatus(event, 401);
     return {
       message: "Unauthorized",
@@ -32,7 +32,7 @@ export default defineEventHandler(async (event) => {
       models,
     };
   } catch (error) {
-    logger.error(error, "GET /api/models/openai: Error fetching models");
+    logger.error(error, "GET /api/models/anthropic: Error fetching models");
     setResponseStatus(event, 500);
     return {
       message: "Failed to fetch models",