Support LLM gateway with Dyad API key (#23)

* Do not make API key input (password) - hurts usability
* Support LLM gateway (and add GPT 4.1 mini model)
* Show Dyad Pro button
* Fix to use auto (not dyad) for detecting dyad pro
* Fix description of gpt 4.1-mini

src/app/TitleBar.tsx

@@ -6,6 +6,7 @@ import { useSettings } from "@/hooks/useSettings";
 import { Button } from "@/components/ui/button";
 // @ts-ignore
 import logo from "../../assets/logo_transparent.png";
+import { providerSettingsRoute } from "@/routes/settings/providers/$provider";
 
 export const TitleBar = () => {
   const [selectedAppId] = useAtom(selectedAppIdAtom);
@@ -25,6 +26,8 @@ export const TitleBar = () => {
     }
   };
 
+  const isDyadPro = !!settings?.providerSettings?.auto?.apiKey?.value;
+
   return (
     <div className="@container z-11 w-full h-11 bg-(--sidebar) absolute top-0 left-0 app-region-drag flex items-center">
       <div className="pl-20"></div>
@@ -39,6 +42,21 @@ export const TitleBar = () => {
       >
         {displayText}
       </Button>
+      {isDyadPro && (
+        <Button
+          onClick={() => {
+            navigate({
+              to: providerSettingsRoute.id,
+              params: { provider: "auto" },
+            });
+          }}
+          variant="outline"
+          className="ml-4 no-app-region-drag h-7 bg-indigo-600 text-white dark:bg-indigo-600 dark:text-white"
+          size="sm"
+        >
+          Dyad Pro
+        </Button>
+      )}
     </div>
   );
 };

src/components/settings/ProviderSettingsPage.tsx

@@ -273,7 +273,6 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
                   </label>
                   <div className="flex items-start space-x-2">
                     <Input
-                      type="password"
                       id="apiKeyInput"
                       value={apiKeyInput}
                       onChange={(e) => setApiKeyInput(e.target.value)}

src/constants/models.ts

@@ -14,6 +14,11 @@ export const MODEL_OPTIONS: Record<RegularModelProvider, ModelOption[]> = {
       displayName: "GPT 4.1",
       description: "OpenAI's flagship model",
     },
+    {
+      name: "gpt-4.1-mini",
+      displayName: "GPT 4.1 Mini",
+      description: "OpenAI's lightweight, but intelligent model",
+    },
     {
       name: "o3-mini",
       displayName: "o3 mini",
@@ -55,40 +60,40 @@ export const MODEL_OPTIONS: Record<RegularModelProvider, ModelOption[]> = {
 export const PROVIDERS: Record<
   RegularModelProvider,
   {
-    name: string;
     displayName: string;
     hasFreeTier?: boolean;
     websiteUrl?: string;
+    gatewayPrefix: string;
   }
 > = {
   openai: {
-    name: "openai",
     displayName: "OpenAI",
     hasFreeTier: false,
     websiteUrl: "https://platform.openai.com/api-keys",
+    gatewayPrefix: "",
   },
   anthropic: {
-    name: "anthropic",
     displayName: "Anthropic",
     hasFreeTier: false,
     websiteUrl: "https://console.anthropic.com/settings/keys",
+    gatewayPrefix: "anthropic/",
   },
   google: {
-    name: "google",
     displayName: "Google",
     hasFreeTier: true,
     websiteUrl: "https://aistudio.google.com/app/apikey",
+    gatewayPrefix: "gemini/",
   },
   openrouter: {
-    name: "openrouter",
     displayName: "OpenRouter",
     hasFreeTier: true,
     websiteUrl: "https://openrouter.ai/settings/keys",
+    gatewayPrefix: "openrouter/",
   },
   auto: {
-    name: "auto",
     displayName: "Dyad",
     websiteUrl: "https://academy.dyad.sh/settings",
+    gatewayPrefix: "",
   },
 };
 

src/ipc/utils/get_model_client.ts

@@ -1,12 +1,19 @@
-import { createOpenAI } from "@ai-sdk/openai";
+import { createOpenAI, OpenAIProvider } from "@ai-sdk/openai";
 import { createGoogleGenerativeAI as createGoogle } from "@ai-sdk/google";
 import { createAnthropic } from "@ai-sdk/anthropic";
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 import { createOllama } from "ollama-ai-provider";
 
 import type { LargeLanguageModel, UserSettings } from "../../lib/schemas";
-import { PROVIDER_TO_ENV_VAR, AUTO_MODELS } from "../../constants/models";
+import {
+  PROVIDER_TO_ENV_VAR,
+  AUTO_MODELS,
+  PROVIDERS,
+} from "../../constants/models";
 import { getEnvVar } from "./read_env";
+import log from "electron-log";
+
+const logger = log.scope("getModelClient");
 export function getModelClient(
   model: LargeLanguageModel,
   settings: UserSettings
@@ -38,6 +45,17 @@ export function getModelClient(
     throw new Error("No API keys available for any model in AUTO_MODELS");
   }
 
+  const dyadApiKey = settings.providerSettings?.auto?.apiKey?.value;
+  if (dyadApiKey) {
+    const provider = createOpenAI({
+      apiKey: dyadApiKey,
+      baseURL: "https://llm-gateway.dyad.sh/v1",
+    });
+    const providerInfo = PROVIDERS[model.provider as keyof typeof PROVIDERS];
+    logger.info("Using Dyad Pro API key");
+    return provider(`${providerInfo.gatewayPrefix}${model.name}`);
+  }
+
   const apiKey =
     settings.providerSettings?.[model.provider]?.apiKey?.value ||
     getEnvVar(PROVIDER_TO_ENV_VAR[model.provider]);