feat: add LiteLLM as AI gateway provider

Author: RheagalFire

packages/api/ai/config.mts

@@ -57,6 +57,13 @@ export async function getModel(): Promise<LanguageModel> {
       });
       return openrouter.chat(model);
 
+    case 'litellm':
+      const litellm = createOpenAI({
+        apiKey: config.customApiKey || 'sk-1234',
+        baseURL: aiBaseUrl || 'http://localhost:4000/v1',
+      });
+      return litellm.chat(model);
+
     case 'custom':
       if (typeof aiBaseUrl !== 'string') {
         throw new Error('Local AI base URL is not set');

packages/shared/src/ai.mts

@@ -4,6 +4,7 @@ export const AiProvider = {
   XAI: 'Xai',
   Gemini: 'Gemini',
   OpenRouter: 'openrouter',
+  LiteLLM: 'litellm',
   Custom: 'custom',
 } as const;
 
@@ -16,6 +17,7 @@ export const defaultModels: Record<AiProviderType, string> = {
   [AiProvider.XAI]: 'grok-beta',
   [AiProvider.Gemini]: 'gemini-1.5-pro-latest',
   [AiProvider.OpenRouter]: 'anthropic/claude-3-opus-20240229',
+  [AiProvider.LiteLLM]: 'gpt-4o-mini',
 } as const;
 
 export function isValidProvider(provider: string): provider is AiProviderType {

packages/web/src/routes/settings.tsx

@@ -176,6 +176,16 @@ function AiInfoBanner() {
           </div>
         );
 
+      case 'litellm':
+        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>LiteLLM proxy URL required</p>
+            <a href="https://docs.litellm.ai/docs/simple_proxy" target="_blank" className="underline">
+              LiteLLM docs
+            </a>
+          </div>
+        );
+
       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">
@@ -332,6 +342,7 @@ export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
               <SelectItem value="Xai">Xai</SelectItem>
               <SelectItem value="Gemini">Gemini</SelectItem>
               <SelectItem value="openrouter">openrouter</SelectItem>
+              <SelectItem value="litellm">litellm</SelectItem>
               <SelectItem value="custom">custom</SelectItem>
             </SelectContent>
           </Select>
@@ -448,6 +459,44 @@ export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
         </div>
       )}
 
+      {aiProvider === 'litellm' && (
+        <div>
+          <p className="opacity-70 text-sm mb-4">
+            LiteLLM is an AI gateway that routes to 100+ LLM providers through a single proxy.
+            Enter your proxy URL and API key below. Use LiteLLM model IDs like
+            &quot;anthropic/claude-3-5-sonnet&quot; or &quot;openai/gpt-4o&quot;.
+          </p>
+          <div className="flex flex-col gap-2">
+            <div className="flex gap-2">
+              <Input
+                name="baseUrl"
+                placeholder="http://localhost:4000/v1"
+                value={baseUrl}
+                onChange={(e) => setBaseUrl(e.target.value)}
+              />
+              <Input
+                name="customApiKey"
+                placeholder="LiteLLM API key"
+                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>
+      )}
+
       {aiProvider === 'custom' && (
         <div>
           <p className="opacity-70 text-sm mb-4">