From 120b46fc1f6b3818a78ff9c9d44b5c0e9b4b593b Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sat, 9 Nov 2024 22:48:32 +0200
Subject: [PATCH 1/4] Add API call to Open Router for full model list

---
 app/components/chat/BaseChat.tsx    | 40 ++++++++++++++++++++++++++---
 app/routes/api.openrouter-models.ts | 33 ++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 app/routes/api.openrouter-models.ts

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index e91254a17b..788a24d3a3 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -15,6 +15,7 @@ import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
 
 import styles from './BaseChat.module.scss';
+import type { ModelInfo } from '~/utils/types';
 
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
@@ -29,7 +30,7 @@ const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
 const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
   return (
     <div className="mb-2 flex gap-2">
-      <select 
+      <select
         value={provider}
         onChange={(e) => {
           setProvider(e.target.value);
@@ -88,6 +89,10 @@ interface BaseChatProps {
   enhancePrompt?: () => void;
 }
 
+function getFreeModels(models) {
+  return models.filter(m => Number(m.pricing.prompt) + Number(m.pricing.completion) === 0);
+}
+
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   (
     {
@@ -114,6 +119,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+    const [models, setModels] = useState<ModelInfo[]>(MODEL_LIST);
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -132,6 +138,32 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     }, []);
 
+    useEffect(() => {
+      fetchModels();
+    }, []);
+
+    const fetchModels = async () => {
+      try {
+        const response = await fetch('/api/openrouter-models');
+        const data = await response.json();
+        if (data.models) {
+          setModels(data.models);
+          const models = data.models;
+          if (!models.find(m => m.id === model)) {
+            setModel(models[0]?.id || '');
+          }
+          setModels([...(MODEL_LIST.filter(m => m.provider !== 'OpenRouter')),
+            ...models.sort((a, b) => a.name.localeCompare(b.name)).map(m => ({
+                name: m.id,
+                label: m.name,
+                provider: 'OpenRouter'
+              }))])
+        }
+      } catch (error) {
+        console.error('Error fetching models:', error);
+      }
+    };
+
     const updateApiKey = (provider: string, key: string) => {
       try {
         const updatedApiKeys = { ...apiKeys, [provider]: key };
@@ -148,6 +180,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
+
+
     return (
       <div
         ref={ref}
@@ -195,7 +229,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 <ModelSelector
                   model={model}
                   setModel={setModel}
-                  modelList={MODEL_LIST}
+                  modelList={models}
                   provider={provider}
                   setProvider={setProvider}
                   providerList={providerList}
@@ -312,4 +346,4 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       </div>
     );
   },
-);
\ No newline at end of file
+);
diff --git a/app/routes/api.openrouter-models.ts b/app/routes/api.openrouter-models.ts
new file mode 100644
index 0000000000..ae4502dc0f
--- /dev/null
+++ b/app/routes/api.openrouter-models.ts
@@ -0,0 +1,33 @@
+import { type LoaderFunctionArgs, json } from '@remix-run/cloudflare';
+import { getAPIKey } from '~/lib/.server/llm/api-key';
+
+const modelCache = {};
+export async function getModels(openRouterApiKey: string) {
+  let fromCache = modelCache[openRouterApiKey];
+  if (!fromCache || new Date().getUTCSeconds() - fromCache.time > 300) {
+    fromCache = modelCache[openRouterApiKey] = {
+      promise: (fetch('https://openrouter.ai/api/v1/models', {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })).then(r => r.json()),
+      time: new Date().getUTCSeconds()
+    };
+  }
+
+  return (await fromCache.promise).data;
+}
+
+export async function loader({ context, request }: LoaderFunctionArgs) {
+  // Get the API key from the cookie
+  try {
+    const cookieHeader = request.headers.get('Cookie');
+    const openRouterApiKey = cookieHeader?.match(/openrouter-api-key=([^;]+)/)?.[1];
+
+    const data = await getModels(openRouterApiKey || getAPIKey(context.cloudflare.env));
+    return json({ models: data });
+  } catch (error) {
+    console.error('Error fetching OpenRouter models:', error);
+    return json({ error: 'Failed to fetch OpenRouter models' }, { status: 500 });
+  }
+}

From a1346cb8028be237ac2922db07726bdb8c0e9f56 Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sat, 9 Nov 2024 22:54:28 +0200
Subject: [PATCH 2/4] Add prices and context sizes to label

---
 app/components/chat/BaseChat.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 788a24d3a3..a83bc54833 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -155,7 +155,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
           setModels([...(MODEL_LIST.filter(m => m.provider !== 'OpenRouter')),
             ...models.sort((a, b) => a.name.localeCompare(b.name)).map(m => ({
                 name: m.id,
-                label: m.name,
+                label: `${m.name} - in:$${(m.pricing.prompt * 1_000_000).toFixed(
+            2)} out:$${(m.pricing.completion * 1_000_000).toFixed(2)} - context ${Math.floor(
+                  m.context_length / 1000)}k`,
                 provider: 'OpenRouter'
               }))])
         }

From e328649055b90c9a8a0cddcd5c3ff2e88243035d Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sat, 9 Nov 2024 23:18:29 +0200
Subject: [PATCH 3/4] Remove server side check of models for now

---
 app/lib/.server/llm/stream-text.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 8bfd79786e..02a47c2a48 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -43,8 +43,8 @@ function extractPropertiesFromMessage(message: Message): { model: string; provid
 }
 
 export function streamText(
-  messages: Messages, 
-  env: Env, 
+  messages: Messages,
+  env: Env,
   options?: StreamingOptions,
   apiKeys?: Record<string, string>
 ) {
@@ -55,9 +55,10 @@ export function streamText(
     if (message.role === 'user') {
       const { model, provider, content } = extractPropertiesFromMessage(message);
 
-      if (MODEL_LIST.find((m) => m.name === model)) {
-        currentModel = model;
-      }
+      // TODO removed for now teh check as we now use dynamic models in client, we need to have dynamic here too
+      //if (MODEL_LIST.find((m) => m.name === model)) {
+      currentModel = model;
+      //}
 
       currentProvider = provider;
 

From bfdaed39ac75c01a8a3f7f0e8d2ba88147bee7fe Mon Sep 17 00:00:00 2001
From: eduardruzga <wonderwhy.er@gmail.com>
Date: Sun, 10 Nov 2024 16:25:14 +0200
Subject: [PATCH 4/4] Refactor retrieval of models for OpenRouter + some bug
 fixes

---
 README.md                           |  4 +--
 app/components/chat/BaseChat.tsx    | 45 ++++-------------------------
 app/lib/.server/llm/stream-text.ts  |  7 ++---
 app/routes/api.openrouter-models.ts | 33 ---------------------
 app/utils/constants.ts              | 43 ++++++++++++++++++++++++---
 5 files changed, 50 insertions(+), 82 deletions(-)
 delete mode 100644 app/routes/api.openrouter-models.ts

diff --git a/README.md b/README.md
index fb70e7566b..a1132c805b 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ If you see usr/local/bin in the output then you're good to go.
 git clone https://github.com/coleam00/bolt.new-any-llm.git
 ```
 
-3. Rename .env.example to .env and add your LLM API keys. You will find this file on a Mac at "[your name]/bold.new-any-llm/.env.example". For Windows and Linux the path will be similar.
+3. Rename .env.example to .env.local and add your LLM API keys. You will find this file on a Mac at "[your name]/bold.new-any-llm/.env.example". For Windows and Linux the path will be similar.
 
 ![image](https://github.com/user-attachments/assets/7e6a532c-2268-401f-8310-e8d20c731328)
 
@@ -115,7 +115,7 @@ Optionally, you can set the debug level:
 VITE_LOG_LEVEL=debug
 ```
 
-**Important**: Never commit your `.env` file to version control. It's already included in .gitignore.
+**Important**: Never commit your `.env.local` file to version control. It's already included in .gitignore.
 
 ## Run with Docker
 
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index a83bc54833..36a60a8223 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -15,7 +15,6 @@ import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
 
 import styles from './BaseChat.module.scss';
-import type { ModelInfo } from '~/utils/types';
 
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
@@ -28,6 +27,8 @@ const EXAMPLE_PROMPTS = [
 const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
 
 const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
+  const currentModelList = [...modelList].filter(e => e.provider == provider && e.name);
+  console.log(modelList, currentModelList);
   return (
     <div className="mb-2 flex gap-2">
       <select
@@ -52,12 +53,13 @@ const ModelSelector = ({ model, setModel, provider, setProvider, modelList, prov
         </option>
       </select>
       <select
+        key={provider}
         value={model}
         onChange={(e) => setModel(e.target.value)}
         className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
-        {[...modelList].filter(e => e.provider == provider && e.name).map((modelOption) => (
-          <option key={modelOption.name} value={modelOption.name}>
+        {currentModelList.map((modelOption) => (
+          <option key={modelOption.provider + ':' + modelOption.name} value={modelOption.name}>
             {modelOption.label}
           </option>
         ))}
@@ -89,10 +91,6 @@ interface BaseChatProps {
   enhancePrompt?: () => void;
 }
 
-function getFreeModels(models) {
-  return models.filter(m => Number(m.pricing.prompt) + Number(m.pricing.completion) === 0);
-}
-
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   (
     {
@@ -119,7 +117,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
-    const [models, setModels] = useState<ModelInfo[]>(MODEL_LIST);
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -138,34 +135,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     }, []);
 
-    useEffect(() => {
-      fetchModels();
-    }, []);
-
-    const fetchModels = async () => {
-      try {
-        const response = await fetch('/api/openrouter-models');
-        const data = await response.json();
-        if (data.models) {
-          setModels(data.models);
-          const models = data.models;
-          if (!models.find(m => m.id === model)) {
-            setModel(models[0]?.id || '');
-          }
-          setModels([...(MODEL_LIST.filter(m => m.provider !== 'OpenRouter')),
-            ...models.sort((a, b) => a.name.localeCompare(b.name)).map(m => ({
-                name: m.id,
-                label: `${m.name} - in:$${(m.pricing.prompt * 1_000_000).toFixed(
-            2)} out:$${(m.pricing.completion * 1_000_000).toFixed(2)} - context ${Math.floor(
-                  m.context_length / 1000)}k`,
-                provider: 'OpenRouter'
-              }))])
-        }
-      } catch (error) {
-        console.error('Error fetching models:', error);
-      }
-    };
-
     const updateApiKey = (provider: string, key: string) => {
       try {
         const updatedApiKeys = { ...apiKeys, [provider]: key };
@@ -182,8 +151,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-
-
     return (
       <div
         ref={ref}
@@ -231,7 +198,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 <ModelSelector
                   model={model}
                   setModel={setModel}
-                  modelList={models}
+                  modelList={MODEL_LIST}
                   provider={provider}
                   setProvider={setProvider}
                   providerList={providerList}
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 02a47c2a48..54a6107f6d 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -55,10 +55,9 @@ export function streamText(
     if (message.role === 'user') {
       const { model, provider, content } = extractPropertiesFromMessage(message);
 
-      // TODO removed for now teh check as we now use dynamic models in client, we need to have dynamic here too
-      //if (MODEL_LIST.find((m) => m.name === model)) {
-      currentModel = model;
-      //}
+      if (MODEL_LIST.find((m) => m.name === model)) {
+        currentModel = model;
+      }
 
       currentProvider = provider;
 
diff --git a/app/routes/api.openrouter-models.ts b/app/routes/api.openrouter-models.ts
deleted file mode 100644
index ae4502dc0f..0000000000
--- a/app/routes/api.openrouter-models.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { type LoaderFunctionArgs, json } from '@remix-run/cloudflare';
-import { getAPIKey } from '~/lib/.server/llm/api-key';
-
-const modelCache = {};
-export async function getModels(openRouterApiKey: string) {
-  let fromCache = modelCache[openRouterApiKey];
-  if (!fromCache || new Date().getUTCSeconds() - fromCache.time > 300) {
-    fromCache = modelCache[openRouterApiKey] = {
-      promise: (fetch('https://openrouter.ai/api/v1/models', {
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })).then(r => r.json()),
-      time: new Date().getUTCSeconds()
-    };
-  }
-
-  return (await fromCache.promise).data;
-}
-
-export async function loader({ context, request }: LoaderFunctionArgs) {
-  // Get the API key from the cookie
-  try {
-    const cookieHeader = request.headers.get('Cookie');
-    const openRouterApiKey = cookieHeader?.match(/openrouter-api-key=([^;]+)/)?.[1];
-
-    const data = await getModels(openRouterApiKey || getAPIKey(context.cloudflare.env));
-    return json({ models: data });
-  } catch (error) {
-    console.error('Error fetching OpenRouter models:', error);
-    return json({ error: 'Failed to fetch OpenRouter models' }, { status: 500 });
-  }
-}
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 361abf646c..9964aac535 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -103,12 +103,47 @@ async function getOpenAILikeModels(): Promise<ModelInfo[]> {
   } catch (e) {
     return []
   }
+}
+
+type OpenRouterModelsResponse = {
+  data: {
+    name: string;
+    id: string;
+    context_length: number;
+    pricing: {
+      prompt: number;
+      completion: number;
+    }
+  }[]
+};
 
+async function getOpenRouterModels(): Promise<ModelInfo[]> {
+  const data: OpenRouterModelsResponse = await (await fetch('https://openrouter.ai/api/v1/models', {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })).json();
+
+  return data.data.sort((a, b) => a.name.localeCompare(b.name)).map(m => ({
+    name: m.id,
+    label: `${m.name} - in:$${(m.pricing.prompt * 1_000_000).toFixed(
+      2)} out:$${(m.pricing.completion * 1_000_000).toFixed(2)} - context ${Math.floor(
+      m.context_length / 1000)}k`,
+    provider: 'OpenRouter'
+  }));
 }
+
 async function initializeModelList(): Promise<void> {
-  const ollamaModels = await getOllamaModels();
-  const openAiLikeModels = await getOpenAILikeModels();
-  MODEL_LIST = [...ollamaModels, ...openAiLikeModels, ...staticModels];
+  const [
+    ollamaModels,
+    openAiLikeModels,
+    openRouterModels] = await Promise.all([
+    getOllamaModels(),
+    getOpenAILikeModels(),
+    getOpenRouterModels()
+  ]);
+  MODEL_LIST = [...ollamaModels, ...openAiLikeModels, ...staticModels, ...openRouterModels];
 }
 initializeModelList().then();
-export { getOllamaModels, getOpenAILikeModels, initializeModelList };
\ No newline at end of file
+export { getOllamaModels, getOpenAILikeModels, initializeModelList, getOpenRouterModels };
+x