diff --git a/src/renderer/src/services/ModelService.ts b/src/renderer/src/services/ModelService.ts
index 52049f229..c26ba75cf 100644
--- a/src/renderer/src/services/ModelService.ts
+++ b/src/renderer/src/services/ModelService.ts
@@ -1,5 +1,6 @@
 import store from '@renderer/store'
 import { Model } from '@renderer/types'
+import { ApiModel } from '@renderer/types/apiModels'
 import { pick } from 'lodash'
 
 import { getProviderName } from './ProviderService'
@@ -18,12 +19,19 @@ export const hasModel = (m?: Model) => {
   return allModels.find((model) => model.id === m?.id)
 }
 
-export function getModelName(model?: Model) {
-  const provider = store.getState().llm.providers.find((p) => p.id === model?.provider)
+export function getModelName(model?: Model | ApiModel) {
   const modelName = model?.name || model?.id || ''
 
+  // For API models that have provider_name field, use it directly
+  const apiModel = model as ApiModel
+  if (apiModel?.provider_name) {
+    return `${modelName} | ${apiModel.provider_name}`
+  }
+
+  // For legacy models, look up the provider in the store
+  const provider = store.getState().llm.providers.find((p) => p.id === model?.provider)
   if (provider) {
-    const providerName = getProviderName(model)
+    const providerName = getProviderName(model as Model)
     return `${modelName} | ${providerName}`
   }