feat(providers): added openrouter support

This PR is adapted from namanbnsl's original
at https://github.com/namanbnsl/Perplexica/tree/add-openrouter-support

Added minor modifications to bring the openrouter support in line
with the changes in this forked repo

README.md

@@ -79,6 +79,7 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
    - `OPENAI`: Your OpenAI API key. **You only need to fill this if you wish to use OpenAI's models**.
    - `OLLAMA`: Your Ollama API URL. You should enter it as `http://host.docker.internal:PORT_NUMBER`. If you installed Ollama on port 11434, use `http://host.docker.internal:11434`. For other ports, adjust accordingly. **You need to fill this if you wish to use Ollama's models instead of OpenAI's**.
    - `GROQ`: Your Groq API key. **You only need to fill this if you wish to use Groq's hosted models**.
+   - `OPENROUTER`: Your OpenRouter API key. **You only need to fill this if you wish to use models via OpenRouter**.
    - `ANTHROPIC`: Your Anthropic API key. **You only need to fill this if you wish to use Anthropic models**.
 
      **Note**: You can change these after starting Perplexica from the settings dialog.

sample.config.toml

@@ -9,6 +9,9 @@ API_KEY = ""
 [MODELS.GROQ]
 API_KEY = ""
 
+[MODELS.OPENROUTER]
+API_KEY = ""
+
 [MODELS.ANTHROPIC]
 API_KEY = ""
 

src/app/api/config/route.ts

@@ -8,6 +8,7 @@ import {
   getGroqApiKey,
   getOllamaApiEndpoint,
   getOpenaiApiKey,
+  getOpenrouterApiKey,
   getDeepseekApiKey,
   getLMStudioApiEndpoint,
   updateConfig,
@@ -62,6 +63,7 @@ export const GET = async (req: Request) => {
     config['anthropicApiKey'] = protectApiKey(getAnthropicApiKey());
     config['geminiApiKey'] = protectApiKey(getGeminiApiKey());
     config['deepseekApiKey'] = protectApiKey(getDeepseekApiKey());
+    config['openrouterApiKey'] = protectApiKey(getOpenrouterApiKey());
     config['customOpenaiApiKey'] = protectApiKey(getCustomOpenaiApiKey());
 
     // Non-sensitive values remain unchanged
@@ -130,6 +132,12 @@ export const POST = async (req: Request) => {
         LM_STUDIO: {
           API_URL: config.lmStudioApiUrl,
         },
+        OPENROUTER: {
+          API_KEY: getUpdatedProtectedValue(
+            config.openrouterApiKey,
+            getOpenrouterApiKey(),
+          ),
+        },
         CUSTOM_OPENAI: {
           API_URL: config.customOpenaiApiUrl,
           API_KEY: getUpdatedProtectedValue(

src/app/settings/page.tsx

@@ -28,6 +28,7 @@ interface SettingsType {
   };
   openaiApiKey: string;
   groqApiKey: string;
+  openrouterApiKey: string;
   anthropicApiKey: string;
   geminiApiKey: string;
   ollamaApiUrl: string;
@@ -1352,6 +1353,25 @@ export default function SettingsPage() {
                   />
                 </div>
 
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    OpenRouter API Key
+                  </p>
+                  <InputComponent
+                    type="password"
+                    placeholder="OpenRouter API Key"
+                    value={config.openrouterApiKey}
+                    isSaving={savingStates['openrouterApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        openrouterApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('openrouterApiKey', value)}
+                  />
+                </div>
+
                 <div className="flex flex-col space-y-1">
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     Anthropic API Key

src/lib/config.ts

@@ -39,6 +39,9 @@ interface Config {
     LM_STUDIO: {
       API_URL: string;
     };
+    OPENROUTER: {
+      API_KEY: string;
+    };
     CUSTOM_OPENAI: {
       API_URL: string;
       API_KEY: string;
@@ -77,6 +80,8 @@ export const getOpenaiApiKey = () => loadConfig().MODELS.OPENAI.API_KEY;
 
 export const getGroqApiKey = () => loadConfig().MODELS.GROQ.API_KEY;
 
+export const getOpenrouterApiKey = () => loadConfig().MODELS.OPENROUTER.API_KEY;
+
 export const getAnthropicApiKey = () => loadConfig().MODELS.ANTHROPIC.API_KEY;
 
 export const getGeminiApiKey = () => loadConfig().MODELS.GEMINI.API_KEY;

src/lib/providers/index.ts

@@ -40,6 +40,10 @@ import {
   loadLMStudioEmbeddingsModels,
   PROVIDER_INFO as LMStudioInfo,
 } from './lmstudio';
+import {
+  loadOpenrouterChatModels,
+  PROVIDER_INFO as OpenRouterInfo,
+} from './openrouter';
 
 export const PROVIDER_METADATA = {
   openai: OpenAIInfo,
@@ -50,6 +54,7 @@ export const PROVIDER_METADATA = {
   transformers: TransformersInfo,
   deepseek: DeepseekInfo,
   lmstudio: LMStudioInfo,
+  openrouter: OpenRouterInfo,
   custom_openai: {
     key: 'custom_openai',
     displayName: 'Custom OpenAI',
@@ -77,6 +82,7 @@ export const chatModelProviders: Record<
   gemini: loadGeminiChatModels,
   deepseek: loadDeepseekChatModels,
   lmstudio: loadLMStudioChatModels,
+  openrouter: loadOpenrouterChatModels,
 };
 
 export const embeddingModelProviders: Record<

src/lib/providers/openrouter.ts

@@ -0,0 +1,65 @@
+export const PROVIDER_INFO = {
+  key: 'openrouter',
+  displayName: 'OpenRouter',
+};
+import { ChatOpenAI } from '@langchain/openai';
+import { getOpenrouterApiKey } from '../config';
+import { ChatModel } from '.';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+
+let openrouterChatModels: Record<string, string>[] = [];
+
+async function fetchModelList(): Promise<void> {
+  try {
+    const response = await fetch('https://openrouter.ai/api/v1/models', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`API request failed with status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    openrouterChatModels = data.data.map((model: any) => ({
+      displayName: model.name,
+      key: model.id,
+    }));
+  } catch (error) {
+    console.error('Error fetching models:', error);
+  }
+}
+
+export const loadOpenrouterChatModels = async () => {
+  await fetchModelList();
+
+  const openrouterApikey = getOpenrouterApiKey();
+
+  if (!openrouterApikey) return {};
+
+  try {
+    const chatModels: Record<string, ChatModel> = {};
+
+    openrouterChatModels.forEach((model) => {
+      chatModels[model.key] = {
+        displayName: model.displayName,
+        model: new ChatOpenAI({
+          openAIApiKey: openrouterApikey,
+          modelName: model.key,
+          temperature: 0.7,
+          configuration: {
+            baseURL: 'https://openrouter.ai/api/v1',
+          },
+        }) as unknown as BaseChatModel,
+      };
+    });
+
+    return chatModels;
+  } catch (err) {
+    console.error(`Error loading Openrouter models: ${err}`);
+    return {};
+  }
+};