diff --git a/app/components/chat/APIKeyManager.tsx b/app/components/chat/APIKeyManager.tsx
index a35724c8c..5b2c85e46 100644
--- a/app/components/chat/APIKeyManager.tsx
+++ b/app/components/chat/APIKeyManager.tsx
@@ -1,13 +1,20 @@
 import React, { useState } from 'react';
 import { IconButton } from '~/components/ui/IconButton';
+import type { ProviderInfo } from '~/types/model';
 
 interface APIKeyManagerProps {
-  provider: string;
+  provider: ProviderInfo;
   apiKey: string;
   setApiKey: (key: string) => void;
+  getApiKeyLink?: string;
+  labelForGetApiKey?: string;
 }
 
-export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
+                                                              provider,
+                                                              apiKey,
+                                                              setApiKey,
+                                                            }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [tempKey, setTempKey] = useState(apiKey);
 
@@ -18,7 +25,7 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
 
   return (
     <div className="flex items-center gap-2 mt-2 mb-2">
-      <span className="text-sm text-bolt-elements-textSecondary">{provider} API Key:</span>
+      <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
       {isEditing ? (
         <>
           <input
@@ -42,6 +49,11 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
           <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
             <div className="i-ph:pencil-simple" />
           </IconButton>
+
+          {provider?.getApiKeyLink && <IconButton onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
+            <span className="mr-2">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+            <div className={provider?.icon || "i-ph:key"} />
+          </IconButton>}
         </>
       )}
     </div>
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index f7fe80a08..80183bafd 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -7,7 +7,7 @@ import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
 import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
-import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
+import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { useState } from 'react';
@@ -15,6 +15,7 @@ import { APIKeyManager } from './APIKeyManager';
 import Cookies from 'js-cookie';
 
 import styles from './BaseChat.module.scss';
+import type { ProviderInfo } from '~/utils/types';
 
 const EXAMPLE_PROMPTS = [
   { text: 'Build a todo app in React using Tailwind' },
@@ -24,42 +25,35 @@ const EXAMPLE_PROMPTS = [
   { text: 'How do I center a div?' },
 ];
 
-const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))];
+const providerList = PROVIDER_LIST;
 
 const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
   return (
     <div className="mb-2 flex gap-2">
       <select
-        value={provider}
+        value={provider?.name}
         onChange={(e) => {
-          setProvider(e.target.value);
+          setProvider(providerList.find(p => p.name === e.target.value));
           const firstModel = [...modelList].find((m) => m.provider == e.target.value);
           setModel(firstModel ? firstModel.name : '');
         }}
         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"
       >
         {providerList.map((provider) => (
-          <option key={provider} value={provider}>
-            {provider}
+          <option key={provider.name} value={provider.name}>
+            {provider.name}
           </option>
         ))}
-        <option key="Ollama" value="Ollama">
-          Ollama
-        </option>
-        <option key="OpenAILike" value="OpenAILike">
-          OpenAILike
-        </option>
-        <option key="LMStudio" value="LMStudio">
-          LMStudio
-        </option>
       </select>
       <select
+        key={provider?.name}
         value={model}
         onChange={(e) => setModel(e.target.value)}
+        style={{maxWidth: "70%"}}
         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)
+          .filter((e) => e.provider == provider?.name && e.name)
           .map((modelOption) => (
             <option key={modelOption.name} value={modelOption.name}>
               {modelOption.label}
@@ -85,8 +79,8 @@ interface BaseChatProps {
   input?: string;
   model?: string;
   setModel?: (model: string) => void;
-  provider?: string;
-  setProvider?: (provider: string) => void;
+  provider?: ProviderInfo;
+  setProvider?: (provider: ProviderInfo) => void;
   handleStop?: () => void;
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -117,8 +111,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     },
     ref,
   ) => {
+    console.log(provider);
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+    const [modelList, setModelList] = useState(MODEL_LIST);
+
 
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -135,6 +132,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         // Clear invalid cookie data
         Cookies.remove('apiKeys');
       }
+
+      initializeModelList().then(modelList => {
+        setModelList(modelList);
+      });
     }, []);
 
     const updateApiKey = (provider: string, key: string) => {
@@ -198,18 +199,20 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 })}
               >
                 <ModelSelector
+                  key={provider?.name + ':' + modelList.length}
                   model={model}
                   setModel={setModel}
-                  modelList={MODEL_LIST}
+                  modelList={modelList}
                   provider={provider}
                   setProvider={setProvider}
-                  providerList={providerList}
-                />
-                <APIKeyManager
-                  provider={provider}
-                  apiKey={apiKeys[provider] || ''}
-                  setApiKey={(key) => updateApiKey(provider, key)}
+                  providerList={PROVIDER_LIST}
                 />
+                {provider &&
+                  <APIKeyManager
+                    provider={provider}
+                    apiKey={apiKeys[provider.name] || ''}
+                    setApiKey={(key) => updateApiKey(provider.name, key)}
+                  />}
                 <div
                   className={classNames(
                     'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index a8f94f0a3..31748b3c2 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -11,11 +11,12 @@ import { useChatHistory } from '~/lib/persistence';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { fileModificationsToHTML } from '~/utils/diff';
-import { DEFAULT_MODEL, DEFAULT_PROVIDER } from '~/utils/constants';
+import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROVIDER_LIST } from '~/utils/constants';
 import { cubicEasingFn } from '~/utils/easings';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import { BaseChat } from './BaseChat';
 import Cookies from 'js-cookie';
+import type { ProviderInfo } from '~/utils/types';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -80,7 +81,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
   });
   const [provider, setProvider] = useState(() => {
     const savedProvider = Cookies.get('selectedProvider');
-    return savedProvider || DEFAULT_PROVIDER;
+    return PROVIDER_LIST.find(p => p.name === savedProvider) || DEFAULT_PROVIDER;
   });
 
   const { showChat } = useStore(chatStore);
@@ -96,7 +97,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
     },
     onError: (error) => {
       logger.error('Request failed\n\n', error);
-      toast.error('There was an error processing your request');
+      toast.error('There was an error processing your request: ' + (error.message ? error.message : "No details were returned"));
     },
     onFinish: () => {
       logger.debug('Finished streaming');
@@ -195,7 +196,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
        * manually reset the input and we'd have to manually pass in file attachments. However, those
        * aren't relevant here.
        */
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${diff}\n\n${_input}` });
+      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
 
       /**
        * After sending a new message we reset all modifications since the model
@@ -203,7 +204,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
        */
       workbenchStore.resetAllFileModifications();
     } else {
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${_input}` });
+      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
     }
 
     setInput('');
@@ -227,9 +228,9 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
     Cookies.set('selectedModel', newModel, { expires: 30 });
   };
 
-  const handleProviderChange = (newProvider: string) => {
+  const handleProviderChange = (newProvider: ProviderInfo) => {
     setProvider(newProvider);
-    Cookies.set('selectedProvider', newProvider, { expires: 30 });
+    Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
   };
 
   return (
@@ -263,7 +264,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
       })}
       enhancePrompt={() => {
         enhancePrompt(
-          input, 
+          input,
           (input) => {
             setInput(input);
             scrollTextArea();
diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index 1babe7a2c..6be9d1170 100644
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -6,7 +6,6 @@ import { createOpenAI } from '@ai-sdk/openai';
 import { createGoogleGenerativeAI } from '@ai-sdk/google';
 import { ollama } from 'ollama-ai-provider';
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
-import { mistral } from '@ai-sdk/mistral';
 import { createMistral } from '@ai-sdk/mistral';
 
 export function getAnthropicModel(apiKey: string, model: string) {
@@ -41,9 +40,9 @@ export function getMistralModel(apiKey: string, model: string) {
 }
 
 export function getGoogleModel(apiKey: string, model: string) {
-  const google = createGoogleGenerativeAI(
+  const google = createGoogleGenerativeAI({
     apiKey,
-  );
+  });
 
   return google(model);
 }
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index 473f8c161..47666c703 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -10,12 +10,35 @@ export async function action(args: ActionFunctionArgs) {
   return chatAction(args);
 }
 
+function parseCookies(cookieHeader) {
+  const cookies = {};
+
+  // Split the cookie string by semicolons and spaces
+  const items = cookieHeader.split(";").map(cookie => cookie.trim());
+
+  items.forEach(item => {
+    const [name, ...rest] = item.split("=");
+    if (name && rest) {
+      // Decode the name and value, and join value parts in case it contains '='
+      const decodedName = decodeURIComponent(name.trim());
+      const decodedValue = decodeURIComponent(rest.join("=").trim());
+      cookies[decodedName] = decodedValue;
+    }
+  });
+
+  return cookies;
+}
+
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages, apiKeys } = await request.json<{ 
-    messages: Messages,
-    apiKeys: Record<string, string>
+  const { messages } = await request.json<{
+    messages: Messages
   }>();
 
+  const cookieHeader = request.headers.get("Cookie");
+
+  // Parse the cookie's value (returns an object or null if no cookie exists)
+  const apiKeys = JSON.parse(parseCookies(cookieHeader).apiKeys || "{}");
+
   const stream = new SwitchableStream();
 
   try {
@@ -56,7 +79,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
     });
   } catch (error) {
     console.log(error);
-    
+
     if (error.message?.includes('API key')) {
       throw new Response('Invalid or missing API key', {
         status: 401,
diff --git a/app/types/model.ts b/app/types/model.ts
new file mode 100644
index 000000000..12b6929c5
--- /dev/null
+++ b/app/types/model.ts
@@ -0,0 +1,10 @@
+import type { ModelInfo } from '~/utils/types';
+
+export type ProviderInfo = {
+  staticModels: ModelInfo[],
+  name: string,
+  getDynamicModels?: () => Promise<ModelInfo[]>,
+  getApiKeyLink?: string,
+  labelForGetApiKey?: string,
+  icon?:string,
+};
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 8ac4151d5..fbcf226e0 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -1,4 +1,5 @@
 import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types';
+import type { ProviderInfo } from '~/types/model';
 
 export const WORK_DIR_NAME = 'project';
 export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
@@ -6,50 +7,120 @@ export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
 export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
 export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
 export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
-export const DEFAULT_PROVIDER = 'Anthropic';
-
-const staticModels: ModelInfo[] = [
-  { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
-  { name: 'anthropic/claude-3.5-sonnet', label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'x-ai/grok-beta', label: "xAI Grok Beta (OpenRouter)", provider: 'OpenRouter' },
-  { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' },
-  { name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google' },
-  { name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq' },
-  { name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq' },
-  { name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq' },
-  { name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq' },
-  { name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' },
-  { name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' },
-  { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' },
-  { name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' },
-  { name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' },
-  { name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
-  { name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' },
-  { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
-  { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' },
-  { name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' },
-  { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' },
-  { name: 'grok-beta', label: "xAI Grok Beta", provider: 'xAI' },
-  { name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek'},
-  { name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek'},
-  { name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral' },
-  { name: 'open-mixtral-8x7b', label: 'Mistral 8x7B', provider: 'Mistral' },
-  { name: 'open-mixtral-8x22b', label: 'Mistral 8x22B', provider: 'Mistral' },
-  { name: 'open-codestral-mamba', label: 'Codestral Mamba', provider: 'Mistral' },
-  { name: 'open-mistral-nemo', label: 'Mistral Nemo', provider: 'Mistral' },
-  { name: 'ministral-8b-latest', label: 'Mistral 8B', provider: 'Mistral' },
-  { name: 'mistral-small-latest', label: 'Mistral Small', provider: 'Mistral' },
-  { name: 'codestral-latest', label: 'Codestral', provider: 'Mistral' },
-  { name: 'mistral-large-latest', label: 'Mistral Large Latest', provider: 'Mistral' },
+
+const PROVIDER_LIST: ProviderInfo[] = [
+  {
+    name: 'Anthropic',
+    staticModels: [
+      { name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' },
+      { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' },
+      { name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' },
+      { name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' },
+      { name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
+      { name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' }
+    ],
+    getApiKeyLink: "https://console.anthropic.com/settings/keys",
+  },
+  {
+    name: 'Ollama',
+    staticModels: [],
+    getDynamicModels: getOllamaModels,
+    getApiKeyLink: "https://ollama.com/download",
+    labelForGetApiKey: "Download Ollama",
+    icon: "i-ph:cloud-arrow-down",
+  }, {
+    name: 'OpenAILike',
+    staticModels: [],
+    getDynamicModels: getOpenAILikeModels
+  },
+  {
+    name: 'OpenRouter',
+    staticModels: [
+      { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
+      {
+        name: 'anthropic/claude-3.5-sonnet',
+        label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)',
+        provider: 'OpenRouter'
+      },
+      { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'x-ai/grok-beta', label: 'xAI Grok Beta (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' },
+      { name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' }
+    ],
+    getDynamicModels: getOpenRouterModels,
+    getApiKeyLink: 'https://openrouter.ai/settings/keys',
+
+  }, {
+    name: 'Google',
+    staticModels: [
+      { name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' },
+      { name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google' }
+    ],
+    getApiKeyLink: 'https://aistudio.google.com/app/apikey'
+  }, {
+    name: 'Groq',
+    staticModels: [
+      { name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq' },
+      { name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq' },
+      { name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq' },
+      { name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq' },
+      { name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' }
+    ],
+    getApiKeyLink: 'https://console.groq.com/keys'
+  }, {
+    name: 'OpenAI',
+    staticModels: [
+      { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
+      { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' },
+      { name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' },
+      { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' }
+    ],
+    getApiKeyLink: "https://platform.openai.com/api-keys",
+  }, {
+    name: 'xAI',
+    staticModels: [
+      { name: 'grok-beta', label: 'xAI Grok Beta', provider: 'xAI' }
+    ],
+    getApiKeyLink: 'https://docs.x.ai/docs/quickstart#creating-an-api-key'
+  }, {
+    name: 'Deepseek',
+    staticModels: [
+      { name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek' },
+      { name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek' }
+    ],
+    getApiKeyLink: 'https://platform.deepseek.com/api_keys'
+  }, {
+    name: 'Mistral',
+    staticModels: [
+      { name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral' },
+      { name: 'open-mixtral-8x7b', label: 'Mistral 8x7B', provider: 'Mistral' },
+      { name: 'open-mixtral-8x22b', label: 'Mistral 8x22B', provider: 'Mistral' },
+      { name: 'open-codestral-mamba', label: 'Codestral Mamba', provider: 'Mistral' },
+      { name: 'open-mistral-nemo', label: 'Mistral Nemo', provider: 'Mistral' },
+      { name: 'ministral-8b-latest', label: 'Mistral 8B', provider: 'Mistral' },
+      { name: 'mistral-small-latest', label: 'Mistral Small', provider: 'Mistral' },
+      { name: 'codestral-latest', label: 'Codestral', provider: 'Mistral' },
+      { name: 'mistral-large-latest', label: 'Mistral Large Latest', provider: 'Mistral' }
+    ],
+    getApiKeyLink: 'https://console.mistral.ai/api-keys/'
+  }, {
+    name: 'LMStudio',
+    staticModels: [],
+    getDynamicModels: getLMStudioModels,
+    getApiKeyLink: 'https://lmstudio.ai/',
+    labelForGetApiKey: 'Get LMStudio',
+    icon: "i-ph:cloud-arrow-down",
+  }
 ];
 
+export const DEFAULT_PROVIDER = PROVIDER_LIST[0];
+
+const staticModels: ModelInfo[] = PROVIDER_LIST.map(p => p.staticModels).flat();
+
 export let MODEL_LIST: ModelInfo[] = [...staticModels];
 
 const getOllamaBaseUrl = () => {
@@ -64,7 +135,7 @@ const getOllamaBaseUrl = () => {
   const isDocker = process.env.RUNNING_IN_DOCKER === 'true';
 
   return isDocker
-    ? defaultBaseUrl.replace("localhost", "host.docker.internal")
+    ? defaultBaseUrl.replace('localhost', 'host.docker.internal')
     : defaultBaseUrl;
 };
 
@@ -77,7 +148,7 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
     return data.models.map((model: OllamaModel) => ({
       name: model.name,
       label: `${model.name} (${model.details.parameter_size})`,
-      provider: 'Ollama',
+      provider: 'Ollama'
     }));
   } catch (e) {
     return [];
@@ -86,37 +157,64 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
 
 async function getOpenAILikeModels(): Promise<ModelInfo[]> {
   try {
-    const base_url = import.meta.env.OPENAI_LIKE_API_BASE_URL || "";
+    const base_url = import.meta.env.OPENAI_LIKE_API_BASE_URL || '';
     if (!base_url) {
       return [];
     }
-    const api_key = import.meta.env.OPENAI_LIKE_API_KEY ?? "";
+    const api_key = import.meta.env.OPENAI_LIKE_API_KEY ?? '';
     const response = await fetch(`${base_url}/models`, {
       headers: {
-        Authorization: `Bearer ${api_key}`,
+        Authorization: `Bearer ${api_key}`
       }
     });
     const res = await response.json() as any;
     return res.data.map((model: any) => ({
       name: model.id,
       label: model.id,
-      provider: 'OpenAILike',
+      provider: 'OpenAILike'
     }));
   } catch (e) {
-    return []
+    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 getLMStudioModels(): Promise<ModelInfo[]> {
   try {
-    const base_url = import.meta.env.LMSTUDIO_API_BASE_URL || "http://localhost:1234";
+    const base_url = import.meta.env.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
     const response = await fetch(`${base_url}/v1/models`);
     const data = await response.json() as any;
     return data.data.map((model: any) => ({
       name: model.id,
       label: model.id,
-      provider: 'LMStudio',
+      provider: 'LMStudio'
     }));
   } catch (e) {
     return [];
@@ -124,11 +222,14 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
 }
 
 
-async function initializeModelList(): Promise<void> {
-  const ollamaModels = await getOllamaModels();
-  const openAiLikeModels = await getOpenAILikeModels();
-  const lmstudioModels = await getLMStudioModels();
-  MODEL_LIST = [...ollamaModels,...openAiLikeModels, ...staticModels,...lmstudioModels,];
+
+async function initializeModelList(): Promise<ModelInfo[]> {
+  MODEL_LIST = [...(await Promise.all(
+    PROVIDER_LIST
+      .filter((p): p is ProviderInfo & { getDynamicModels: () => Promise<ModelInfo[]> } => !!p.getDynamicModels)
+      .map(p => p.getDynamicModels())))
+    .flat(), ...staticModels];
+  return MODEL_LIST;
 }
-initializeModelList().then();
-export { getOllamaModels,getOpenAILikeModels,getLMStudioModels,initializeModelList };
\ No newline at end of file
+
+export { getOllamaModels, getOpenAILikeModels, getLMStudioModels, initializeModelList, getOpenRouterModels, PROVIDER_LIST };
diff --git a/app/utils/types.ts b/app/utils/types.ts
index 5fcd2de25..a5f9fc18b 100644
--- a/app/utils/types.ts
+++ b/app/utils/types.ts
@@ -26,3 +26,12 @@ export interface ModelInfo {
   label: string;
   provider: string;
 }
+
+export interface ProviderInfo {
+  staticModels: ModelInfo[],
+  name: string,
+  getDynamicModels?: () => Promise<ModelInfo[]>,
+  getApiKeyLink?: string,
+  labelForGetApiKey?: string,
+  icon?:string,
+};