fetch openrouter models

Author: Your a

.vscode/launch.json

@@ -11,6 +11,18 @@
             "port": 9222,
             "webRoot": "${workspaceFolder}",
             "timeout": 30000
-        }
+        },
+    {
+        "type": "node",
+        "request": "launch",
+        "name": "Run Development Server",
+        "runtimeExecutable": "npm",
+        "runtimeArgs": [
+            "run",
+            "dev"
+        ],
+        "port": 3000,
+        "timeout": 30000
+    }
     ]
 }

app/components/chat/Chat.client.tsx

@@ -92,7 +92,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
     },
     initialMessages,
     body: {
-      model: provider 
+      provider: provider 
     },
   });
 

app/components/chat/ProviderSelector.tsx

@@ -1,37 +1,57 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import { providerStore, setProvider, type Provider } from '~/lib/stores/provider';
 import '~/styles/index.scss';
 
 export function ProviderSelector() {
   const currentProvider = useStore(providerStore);
   const [inputValue, setInputValue] = useState(currentProvider.model);
+  const [providers, setProviders] = useState<string[]>([]);
+  const [apiKey, setApiKey] = useState(''); // New state for API key
+
+  useEffect(() => {
+    const fetchProviders = async () => {
+      try {
+        const response = await fetch('https://openrouter.ai/api/v1/models');
+        const data = await response.json();
+        setProviders(data.data.map(a=>a.id));
+      } catch (error) {
+        console.error('Error fetching providers:', error);
+      }
+    };
+
+    fetchProviders();
+  }, []);
 
   const handleProviderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setInputValue(value);
   };
 
-  const providers = [
-    'Anthropic (Claude)',
-    'Together AI (meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo)',
-    'Together AI (meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo)',
-    'Together AI (mistralai/Mixtral-8x7B-Instruct-v0.1)',
-    'OpenRouter (openai/gpt-3.5-turbo)',
-    'OpenRouter (anthropic/claude-2)',
-    'OpenRouter (google/palm-2-chat-bison)',
-  ];
+  const handleApiKeyButtonClick = () => {
+    const value = prompt("Enter OpenRouter API Key"); // Prompt user for API key
+    if (value) {
+      setApiKey(value); // Update API key state if a value is provided
+    }
+  };
 
   return (
-    <div className="relative w-[250px]">
+    <div className="flex space-x-2"> {/* Changed to flex for horizontal layout */}
+      {/* Button to set API key */}
+      <button
+        onClick={handleApiKeyButtonClick}
+        className="w-[120px] px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none"
+      >
+        Set API Key
+      </button>
       <input
         list="providers"
         value={inputValue}
         onChange={handleProviderChange}
         onMouseDown={() => {
           setInputValue(''); // Clear input on click
         }}
-        className="w-full px-3 py-2 bg-transparent border border-white/20 rounded text-white hover:border-white/40 focus:border-white/60 outline-none"
+        className="w-[300px] px-3 py-2 bg-transparent border border-white/20 rounded text-white hover:border-white/40 focus:border-white/60 outline-none" // Increased width for larger input
       />
       <datalist id="providers">
         {providers.map((provider) => (
@@ -40,4 +60,4 @@ export function ProviderSelector() {
       </datalist>
     </div>
   );
-}
+}

app/lib/.server/llm/stream-text.ts

@@ -24,10 +24,11 @@ export type StreamingOptions = Omit<Parameters<typeof _streamText>[0], 'model'>;
 
 
 export function streamText(messages: Messages, env: Env, provider: Provider, options?: StreamingOptions) {
-  const apiKey = getAPIKeys(env);
 
+  const apiKey = getAPIKeys(env);
+  const apiKeyToUse = provider.apiKey || apiKey.openRouter;
   return _streamText({
-    model: getModel('openrouter', provider.apiKey || apiKey.openRouter, provider.model),
+    model: getModel('openrouter', apiKeyToUse, provider.model),
 
     system: getSystemPrompt(),
     messages: convertToCoreMessages(messages.map(message => ({