Add custom API key support in AI configuration

packages/api/ai/config.mts

@@ -55,7 +55,7 @@ export async function getModel(): Promise<LanguageModel> {
       }
       const openaiCompatible = createOpenAI({
         compatibility: 'compatible',
-        apiKey: 'bogus', // required but unused
+        apiKey: config.customApiKey || 'bogus', // Use custom API key if provided, otherwise use bogus key
         baseURL: aiBaseUrl,
       });
       return openaiCompatible(model);

packages/api/db/schema.mts

@@ -10,6 +10,7 @@ export const configs = sqliteTable('config', {
   anthropicKey: text('anthropic_api_key'),
   xaiKey: text('xai_api_key'),
   geminiKey: text('gemini_api_key'),
+  customApiKey: text('custom_api_key'),
   // TODO: This is deprecated in favor of SRCBOOK_DISABLE_ANALYTICS env variable. Remove this.
   enabledAnalytics: integer('enabled_analytics', { mode: 'boolean' }).notNull().default(true),
   // Stable ID for posthog

packages/api/drizzle/0015_add_custom_api_key.sql

@@ -0,0 +1 @@
+ALTER TABLE `config` ADD `custom_api_key` text;

packages/api/drizzle/meta/0015_snapshot.json

@@ -0,0 +1,42 @@
+{
+    "version": "6",
+    "dialect": "sqlite",
+    "id": "0015_add_custom_api_key",
+    "prevId": "0014_Gemini_Integration",
+    "tables": {
+      "config": {
+        "name": "config",
+        "columns": {
+          "id": {
+            "name": "id",
+            "type": "text",
+            "primaryKey": true,
+            "notNull": true
+          },
+          "openai_api_key": {
+            "name": "openai_api_key",
+            "type": "text"
+          },
+          "posthog_api_key": {
+            "name": "posthog_api_key",
+            "type": "text"
+          },
+          "subscription_email": {
+            "name": "subscription_email",
+            "type": "text"
+          },
+          "custom_api_key": {
+            "name": "custom_api_key",
+            "type": "text"
+          }
+        }
+      }
+    },
+    "enums": {},
+    "schemas": {},
+    "_meta": {
+      "schemas": {},
+      "tables": {},
+      "columns": {}
+    }
+  } 

packages/api/drizzle/meta/_journal.json

@@ -106,6 +106,13 @@
       "when": 1732197490638,
       "tag": "0014_Gemini_Integration",
       "breakpoints": true
+    },
+    {
+      "idx": 15,
+      "version": "6",
+      "when": 1733076427000,
+      "tag": "0015_add_custom_api_key",
+      "breakpoints": true
     }
   ]
 }

packages/web/src/routes/settings.tsx

@@ -161,7 +161,7 @@ function AiInfoBanner() {
       case 'custom':
         return (
           <div className="flex items-center gap-10 bg-sb-yellow-20 text-sb-yellow-80 rounded-sm text-sm font-medium px-3 py-2">
-            <p>Base URL required</p>
+            <p>Base URL required, API key optional</p>
           </div>
         );
     }
@@ -243,13 +243,15 @@ export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
     anthropicKey: configAnthropicKey,
     xaiKey: configXaiKey,
     geminiKey: configGeminiKey,
+    customApiKey: configCustomApiKey,
     updateConfig: updateConfigContext,
   } = useSettings();
 
   const [openaiKey, setOpenaiKey] = useState<string>(configOpenaiKey ?? '');
   const [anthropicKey, setAnthropicKey] = useState<string>(configAnthropicKey ?? '');
   const [xaiKey, setXaiKey] = useState<string>(configXaiKey ?? '');
   const [geminiKey, setGeminiKey] = useState<string>(configGeminiKey ?? '');
+  const [customApiKey, setCustomApiKey] = useState<string>(configCustomApiKey ?? '');
   const [model, setModel] = useState<string>(aiModel);
   const [baseUrl, setBaseUrl] = useState<string>(aiBaseUrl || '');
 
@@ -283,6 +285,9 @@ export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
     model !== aiModel;
 
   const customModelSaveEnabled =
+    (typeof configCustomApiKey === 'string' && customApiKey !== configCustomApiKey) ||
+    ((configCustomApiKey === null || configCustomApiKey === undefined) &&
+      customApiKey.length > 0) ||
     (typeof aiBaseUrl === 'string' && baseUrl !== aiBaseUrl) ||
     ((aiBaseUrl === null || aiBaseUrl === undefined) && baseUrl.length > 0) ||
     model !== aiModel;
@@ -394,22 +399,35 @@ export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
         <div>
           <p className="opacity-70 text-sm mb-4">
             If you want to use an openai-compatible model (for example when running local models
-            with Ollama), choose this option and set the baseUrl.
+            with Ollama), choose this option and set the baseUrl and API key.
           </p>
-          <div className="flex gap-2">
-            <Input
-              name="baseUrl"
-              placeholder="http://localhost:11434/v1"
-              value={baseUrl}
-              onChange={(e) => setBaseUrl(e.target.value)}
-            />
-            <Button
-              className="px-5"
-              onClick={() => updateConfigContext({ aiBaseUrl: baseUrl, aiModel: model })}
-              disabled={!customModelSaveEnabled}
-            >
-              {saveButtonLabel ?? 'Save'}
-            </Button>
+          <div className="flex flex-col gap-2">
+            <div className="flex gap-2">
+              <Input
+                name="baseUrl"
+                placeholder="http://localhost:11434/v1"
+                value={baseUrl}
+                onChange={(e) => setBaseUrl(e.target.value)}
+              />
+              <Input
+                name="customApiKey"
+                placeholder="API key (optional)"
+                type="password"
+                value={customApiKey}
+                onChange={(e) => setCustomApiKey(e.target.value)}
+              />
+            </div>
+            <div className="flex justify-end">
+              <Button
+                className="px-5"
+                onClick={() =>
+                  updateConfigContext({ aiBaseUrl: baseUrl, customApiKey, aiModel: model })
+                }
+                disabled={!customModelSaveEnabled}
+              >
+                {saveButtonLabel ?? 'Save'}
+              </Button>
+            </div>
           </div>
         </div>
       )}

packages/web/src/types.ts

@@ -14,6 +14,7 @@ export type SettingsType = {
   anthropicKey?: string | null;
   xaiKey?: string | null;
   geminiKey?: string | null;
+  customApiKey?: string | null;
   aiProvider: AiProviderType;
   aiModel: string;
   aiBaseUrl?: string | null;