Added Open Router Support for Chat-Backend

Open Router (PR-147), fix and testing.

Author: slowsynapse

README.md

@@ -56,6 +56,7 @@ The various features of Amica mainly use and support the following technologies:
   - [Ollama](https://ollama.ai)
   - [KoboldCpp](https://github.com/LostRuins/koboldcpp)
   - [Oobabooga](https://github.com/oobabooga/text-generation-webui/wiki)
+  - [OpenRouter](https://openrouter.ai/) (access to multiple AI models)
 - Text-to-Speech
   - [Eleven Labs API](https://elevenlabs.io/)
   - [Speech T5](https://huggingface.co/microsoft/speecht5_tts)
@@ -94,6 +95,14 @@ Once started, please visit the following URL to confirm that it is working prope
 
 Most of the configuration is done in the `.env.local` file. Reference the `config.ts` file for the available options.
 
+#### OpenRouter Configuration
+
+To use OpenRouter as a chat backend, set the following environment variables in your `.env.local` file:
+
+- `NEXT_PUBLIC_OPENROUTER_APIKEY`: Your OpenRouter API key (required)
+- `NEXT_PUBLIC_OPENROUTER_URL`: Custom OpenRouter API URL (optional, defaults to https://openrouter.ai/api/v1)
+- `NEXT_PUBLIC_OPENROUTER_MODEL`: Default OpenRouter model (optional, defaults to openai/gpt-3.5-turbo)
+
 ```bash
 amica
 ├── .env.local

src/components/settings.tsx

@@ -65,6 +65,7 @@ import { NamePage } from './settings/NamePage';
 import { SystemPromptPage } from './settings/SystemPromptPage';
 import { AmicaLifePage } from "./settings/AmicaLifePage";
 import { useVrmStoreContext } from "@/features/vrmStore/vrmStoreContext";
+import { OpenRouterSettings } from "./settings/OpenRouterSettingsPage";
 
 export const Settings = ({
   onClickClose,
@@ -91,6 +92,9 @@ export const Settings = ({
   const [koboldAiUrl, setKoboldAiUrl] = useState(config("koboldai_url"));
   const [koboldAiUseExtra, setKoboldAiUseExtra] = useState<boolean>(config("koboldai_use_extra") === 'true' ? true : false);
   const [koboldAiStopSequence, setKoboldAiStopSequence] = useState(config("koboldai_stop_sequence"));
+  const [openRouterApiKey, setOpenRouterApiKey] = useState(config("openrouter_apikey"));
+  const [openRouterUrl, setOpenRouterUrl] = useState(config("openrouter_url"));
+  const [openRouterModel, setOpenRouterModel] = useState(config("openrouter_model"));
 
   const [ttsBackend, setTTSBackend] = useState(config("tts_backend"));
   const [elevenlabsApiKey, setElevenlabsApiKey] = useState(config("elevenlabs_apikey"));
@@ -241,6 +245,7 @@ export const Settings = ({
     llamaCppUrl, llamaCppStopSequence,
     ollamaUrl, ollamaModel,
     koboldAiUrl, koboldAiUseExtra, koboldAiStopSequence,
+    openRouterApiKey, openRouterUrl, openRouterModel,
     ttsBackend,
     elevenlabsApiKey, elevenlabsVoiceId,
     speechT5SpeakerEmbeddingsUrl,
@@ -284,7 +289,7 @@ export const Settings = ({
 
     case 'chatbot':
       return <MenuPage
-        keys={["chatbot_backend", "name", "system_prompt", "chatgpt_settings", "llamacpp_settings", "ollama_settings", "koboldai_settings"]}
+        keys={["chatbot_backend", "name", "system_prompt", "chatgpt_settings", "llamacpp_settings", "ollama_settings", "koboldai_settings", "openrouter_settings"]}
         menuClick={handleMenuClick} />;
 
     case 'tts':
@@ -402,6 +407,17 @@ export const Settings = ({
         setSettingsUpdated={setSettingsUpdated}
         />
 
+    case 'openrouter_settings':
+      return <OpenRouterSettings
+        openRouterUrl={openRouterUrl}
+        setOpenRouterUrl={setOpenRouterUrl}
+        openRouterApiKey={openRouterApiKey}
+        setOpenRouterApiKey={setOpenRouterApiKey}
+        openRouterModel={openRouterModel}
+        setOpenRouterModel={setOpenRouterModel}
+        setSettingsUpdated={setSettingsUpdated}
+        />
+
     case 'tts_backend':
       return <TTSBackendPage
         ttsBackend={ttsBackend}

src/components/settings/ChatbotBackendPage.tsx

@@ -12,6 +12,7 @@ const chatbotBackends = [
   ...isTauri() ? [] : [{key: "windowai", label: "Window.ai"}], // Hides Window.ai when using the desktop app
   {key: "ollama",     label: "Ollama"},
   {key: "koboldai",   label: "KoboldAI"},
+  {key: "openrouter", label: "OpenRouter"},
 ];
 
 function idToTitle(id: string): string {
@@ -72,7 +73,7 @@ export function ChatbotBackendPage({
             </select>
           </FormRow>
         </li>
-        { ["chatgpt", "llamacpp", "ollama", "koboldai"].includes(chatbotBackend) && (
+        { ["chatgpt", "llamacpp", "ollama", "koboldai", "openrouter"].includes(chatbotBackend) && (
           <li className="py-4">
             <FormRow label={`${t("Configure")} ${t(idToTitle(chatbotBackend))}`}>
               <button

src/components/settings/OpenRouterSettingsPage.tsx

@@ -0,0 +1,76 @@
+import { BasicPage, FormRow, NotUsingAlert } from './common';
+import { TextInput } from '@/components/textInput';
+import { SecretTextInput } from '@/components/secretTextInput';
+import { config, updateConfig } from "@/utils/config";
+
+
+export function OpenRouterSettings({
+  openRouterApiKey,
+  setOpenRouterApiKey,
+  openRouterUrl,
+  setOpenRouterUrl,
+  openRouterModel,
+  setOpenRouterModel,
+  setSettingsUpdated,
+}: {
+  openRouterApiKey: string;
+  setOpenRouterApiKey: (key: string) => void;
+  openRouterUrl: string;
+  setOpenRouterUrl: (url: string) => void;
+  openRouterModel: string;
+  setOpenRouterModel: (model: string) => void;
+  setSettingsUpdated: (updated: boolean) => void;
+}) {
+  const description = <>Configure OpenRouter settings. You can get an API key from <a href="https://openrouter.ai">https://openrouter.ai</a></>;
+
+  return (
+    <BasicPage
+      title="OpenRouter Settings"
+      description={description}
+    >
+      { config("chatbot_backend") !== "openrouter" && (
+        <NotUsingAlert>
+          You are not currently using OpenRouter as your ChatBot backend. These settings will not be used.
+        </NotUsingAlert>
+      ) }
+      <ul role="list" className="divide-y divide-gray-100 max-w-xs">
+        <li className="py-4">
+          <FormRow label="OpenRouter API Key">
+            <SecretTextInput
+              value={openRouterApiKey}
+              onChange={(event: React.ChangeEvent<any>) => {
+                setOpenRouterApiKey(event.target.value);
+                updateConfig("openrouter_apikey", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            />
+          </FormRow>
+        </li>
+        <li className="py-4">
+          <FormRow label="OpenAI URL">
+            <TextInput
+              value={openRouterUrl}
+              onChange={(event: React.ChangeEvent<any>) => {
+                setOpenRouterUrl(event.target.value);
+                updateConfig("openrouter_url", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            />
+          </FormRow>
+        </li>
+        <li className="py-4">
+          <FormRow label="OpenAI Model">
+            <TextInput
+              value={openRouterModel}
+              onChange={(event: React.ChangeEvent<any>) => {
+                setOpenRouterModel(event.target.value);
+                updateConfig("openrouter_model", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            />
+          </FormRow>
+        </li>
+      </ul>
+    </BasicPage>
+  );
+}

src/components/settings/common.tsx

@@ -145,7 +145,7 @@ export function getIconFromPage(page: string): JSX.Element {
     case 'community':           return <RocketLaunchIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
 
     case 'background_img':      return <PhotoIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
-    case 'background_color':      return <SwatchIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'background_color':    return <SwatchIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'background_video':    return <FilmIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'character_model':     return <UsersIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'character_animation': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
@@ -155,6 +155,7 @@ export function getIconFromPage(page: string): JSX.Element {
     case 'llamacpp_settings':   return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'ollama_settings':     return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'koboldai_settings':   return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'openrouter_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'name':                return <IdentificationIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'system_prompt':       return <DocumentTextIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
 
@@ -204,6 +205,7 @@ function getLabelFromPage(page: string): string {
     case 'llamacpp_settings':   return t('LLama.cpp');
     case 'ollama_settings':     return t('Ollama');
     case 'koboldai_settings':   return t('KoboldAI');
+    case 'openrouter_settings': return t('OpenRouter');
     case 'name'         :       return t('Name');
     case 'system_prompt':       return t('System Prompt');
 

src/env.d.ts

@@ -0,0 +1,21 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    // OpenRouter Configuration
+    NEXT_PUBLIC_OPENROUTER_APIKEY?: string;
+    NEXT_PUBLIC_OPENROUTER_URL?: string;
+    NEXT_PUBLIC_OPENROUTER_MODEL?: string;
+
+    // Existing environment variables (preserving for type safety)
+    NEXT_PUBLIC_CHATBOT_BACKEND?: string;
+    NEXT_PUBLIC_OPENAI_APIKEY?: string;
+    NEXT_PUBLIC_OPENAI_URL?: string;
+    NEXT_PUBLIC_OPENAI_MODEL?: string;
+    NEXT_PUBLIC_LLAMACPP_URL?: string;
+    NEXT_PUBLIC_LLAMACPP_STOP_SEQUENCE?: string;
+    NEXT_PUBLIC_OLLAMA_URL?: string;
+    NEXT_PUBLIC_OLLAMA_MODEL?: string;
+    NEXT_PUBLIC_KOBOLDAI_URL?: string;
+    NEXT_PUBLIC_KOBOLDAI_USE_EXTRA?: string;
+    NEXT_PUBLIC_KOBOLDAI_STOP_SEQUENCE?: string;
+  }
+}

src/features/chat/chat.ts

@@ -25,6 +25,7 @@ import { cleanTalk } from "@/utils/cleanTalk";
 import { processResponse } from "@/utils/processResponse";
 import { wait } from "@/utils/wait";
 import { isCharacterIdle, characterIdleTime, resetIdleTimer } from "@/utils/isIdle";
+import { getOpenRouterChatResponseStream } from './openRouterChat';
 
 
 type Speak = {
@@ -543,6 +544,8 @@ export class Chat {
         return getOllamaChatResponseStream(messages);
       case 'koboldai':
         return getKoboldAiChatResponseStream(messages);
+      case 'openrouter':
+        return getOpenRouterChatResponseStream(messages);
     }
 
     return getEchoChatResponseStream(messages);

src/features/chat/openRouterChat.ts

@@ -0,0 +1,90 @@
+import { Message } from './messages';
+import { config } from '@/utils/config';
+
+/**
+ * Gets a streaming chat response from OpenRouter API.
+ * OpenRouter provides an OpenAI-compatible API with access to multiple models.
+ */
+export async function getOpenRouterChatResponseStream(messages: Message[]): Promise<ReadableStream> {
+  const apiKey = config('openrouter_apikey');
+  if (!apiKey) {
+    throw new Error('OpenRouter API key is required');
+  }
+
+  const baseUrl = config('openrouter_url') ?? 'https://openrouter.ai/api/v1';
+  const model = config('openrouter_model') ?? 'openai/gpt-3.5-turbo';
+  const appUrl = 'https://amica.arbius.ai';
+
+  const response = await fetch(`${baseUrl}/chat/completions`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': appUrl,
+      'X-Title': 'Amica Chat'
+    },
+    body: JSON.stringify({
+      model,
+      messages: messages.map(({ role, content }) => ({ role, content })),
+      stream: true
+    })
+  });
+
+  const reader = response.body?.getReader();
+  if (!response.ok || !reader) {
+    const error = await response.json();
+    // Handle OpenRouter-specific error format
+    if (error.error?.message) {
+      throw new Error(`OpenRouter error: ${error.error.message}`);
+    }
+    throw new Error(`OpenRouter request failed with status ${response.status}`);
+  }
+
+  const stream = new ReadableStream({
+    async start(controller: ReadableStreamDefaultController) {
+      const decoder = new TextDecoder("utf-8");
+      try {
+        // sometimes the response is chunked, so we need to combine the chunks
+        let combined = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const data = decoder.decode(value);
+          const chunks = data
+            .split("data:")
+            .filter((val) => !!val && val.trim() !== "[DONE]");
+
+          for (const chunk of chunks) {
+            // skip comments
+            if (chunk.length > 0 && chunk[0] === ":") {
+              continue;
+            }
+            combined += chunk;
+
+            try {
+              const json = JSON.parse(combined);
+              const messagePiece = json.choices[0].delta.content;
+              combined = "";
+              if (!!messagePiece) {
+                controller.enqueue(messagePiece);
+              }
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }
+      } catch (error) {
+        console.error(error);
+        controller.error(error);
+      } finally {
+        reader?.releaseLock();
+        controller.close();
+      }
+    },
+    async cancel() {
+      await reader?.cancel();
+      reader?.releaseLock();
+    }
+  });
+  return stream;
+}

src/utils/askLlm.ts

@@ -7,6 +7,7 @@ import { getLlamaCppChatResponseStream } from "@/features/chat/llamaCppChat";
 import { getWindowAiChatResponseStream } from "@/features/chat/windowAiChat";
 import { getOllamaChatResponseStream } from "@/features/chat/ollamaChat";
 import { getKoboldAiChatResponseStream } from "@/features/chat/koboldAiChat";
+import { getOpenRouterChatResponseStream } from "@/features/chat/openRouterChat";
 
 import { config } from "@/utils/config";
 import { processResponse } from "@/utils/processResponse";
@@ -50,6 +51,8 @@ export async function askLLM(
         return getOllamaChatResponseStream(messages);
       case "koboldai":
         return getKoboldAiChatResponseStream(messages);
+      case "openrouter":
+        return getOpenRouterChatResponseStream(messages);
       default:
         return getEchoChatResponseStream(messages);
     }
@@ -111,7 +114,7 @@ export async function askLLM(
 
       receivedMessage += value;
       receivedMessage = receivedMessage.trimStart();
-      
+
 
       if (chat !== null) {
         const proc = processResponse({
@@ -132,26 +135,26 @@ export async function askLLM(
               screenplay: aiTalks[0],
               streamIdx: currentStreamIdx,
             });
-  
+
             if (! firstSentenceEncountered) {
               console.timeEnd('performance_time_to_first_sentence');
               firstSentenceEncountered = true;
             }
-  
+
             return false; // normal processing
           }
         });
-  
+
         sentences = proc.sentences;
         aiTextLog = proc.aiTextLog;
         receivedMessage = proc.receivedMessage;
         tag = proc.tag;
         rolePlay = proc.rolePlay;
         if (proc.shouldBreak) {
           break;
-        }  
+        }
       }
-      
+
     }
   } catch (e: any) {
     const errMsg = e.toString();

src/utils/config.ts

@@ -33,6 +33,9 @@ const defaults = {
   koboldai_url: process.env.NEXT_PUBLIC_KOBOLDAI_URL ?? 'http://localhost:5001',
   koboldai_use_extra: process.env.NEXT_PUBLIC_KOBOLDAI_USE_EXTRA ?? 'false',
   koboldai_stop_sequence: process.env.NEXT_PUBLIC_KOBOLDAI_STOP_SEQUENCE ?? '(End)||[END]||Note||***||You:||User:||</s>',
+  openrouter_apikey: process.env.NEXT_PUBLIC_OPENROUTER_APIKEY ?? '',
+  openrouter_url: process.env.NEXT_PUBLIC_OPENROUTER_URL ?? 'https://openrouter.ai/api/v1',
+  openrouter_model: process.env.NEXT_PUBLIC_OPENROUTER_MODEL ?? 'openai/gpt-3.5-turbo',
   tts_muted: 'false',
   tts_backend: process.env.NEXT_PUBLIC_TTS_BACKEND ?? 'piper',
   stt_backend: process.env.NEXT_PUBLIC_STT_BACKEND ?? 'whisper_browser',