diff --git a/frontend/src/api/models.ts b/frontend/src/api/models.ts
new file mode 100644
index 00000000000..971c1bd883f
--- /dev/null
+++ b/frontend/src/api/models.ts
@@ -0,0 +1,38 @@
+/**
+ * Models API endpoints
+ * Handles fetching available models for the user
+ */
+
+import { apiClient } from './client'
+
+export interface Model {
+  id: string
+  type: string
+  display_name: string
+  created_at: string
+}
+
+export interface ModelsResponse {
+  object: string
+  data: Model[]
+}
+
+/**
+ * Get available models using an API key
+ * @param apiKey - The API key to use for authentication
+ * @returns List of available models
+ */
+export async function getAvailableModels(apiKey: string): Promise<ModelsResponse> {
+  const { data } = await apiClient.get<ModelsResponse>('/v1/models', {
+    headers: {
+      'x-api-key': apiKey
+    }
+  })
+  return data
+}
+
+export const modelsAPI = {
+  getAvailableModels
+}
+
+export default modelsAPI
diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue
index 92dcc519015..7efe05263e8 100644
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -264,6 +264,21 @@ const ChartIcon = {
     )
 }
 
+const CubeIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9'
+        })
+      ]
+    )
+}
+
 const GiftIcon = {
   render: () =>
     h(
@@ -569,6 +584,7 @@ const userNavItems = computed((): NavItem[] => {
   const items: NavItem[] = [
     { path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
     { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
+    { path: '/models', label: t('nav.models'), icon: CubeIcon },
     { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
     { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
     ...(appStore.cachedPublicSettings?.payment_enabled
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 8213cb0fd97..2c10ad41656 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -335,6 +335,7 @@ export default {
     dashboard: 'Dashboard',
     announcements: 'Announcements',
     apiKeys: 'API Keys',
+    models: 'Models',
     usage: 'Usage',
     redeem: 'Redeem',
     profile: 'Profile',
@@ -5625,4 +5626,28 @@ export default {
     },
   },
 
+  // Models
+  models: {
+    title: 'Available Models',
+    description: 'View the list of AI models you can use and usage instructions',
+    selectApiKey: 'Select API Key',
+    selectApiKeyHint: 'Select an API key to view available models',
+    selectApiKeyPlaceholder: 'Please select an API key',
+    noApiKeys: 'No API Keys',
+    noApiKeysDesc: 'You have not created any API keys yet. Please create one to view available models',
+    createApiKey: 'Create API Key',
+    usageGuide: 'Usage Guide',
+    apiEndpoint: 'API Endpoint',
+    yourApiKey: 'Your API Key',
+    exampleRequest: 'Example Request',
+    availableModels: 'Available Models',
+    modelCount: '{count} models available',
+    modelId: 'Model ID',
+    displayName: 'Display Name',
+    actions: 'Actions',
+    noModels: 'No Models Available',
+    noModelsDesc: 'No models are available for the selected API key',
+    loadFailed: 'Failed to load models',
+  },
+
 }
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 5f936965801..8998af1720b 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -335,6 +335,7 @@ export default {
     dashboard: '仪表盘',
     announcements: '公告',
     apiKeys: 'API 密钥',
+    models: '可用模型',
     usage: '使用记录',
     redeem: '兑换',
     profile: '个人资料',
@@ -5812,4 +5813,28 @@ export default {
     },
   },
 
+  // Models
+  models: {
+    title: '可用模型',
+    description: '查看您可以使用的 AI 模型列表和使用说明',
+    selectApiKey: '选择 API 密钥',
+    selectApiKeyHint: '选择一个 API 密钥来查看可用的模型列表',
+    selectApiKeyPlaceholder: '请选择 API 密钥',
+    noApiKeys: '暂无 API 密钥',
+    noApiKeysDesc: '您还没有创建任何 API 密钥，请先创建一个密钥来查看可用模型',
+    createApiKey: '创建 API 密钥',
+    usageGuide: '使用指南',
+    apiEndpoint: 'API 端点',
+    yourApiKey: '您的 API 密钥',
+    exampleRequest: '请求示例',
+    availableModels: '可用模型',
+    modelCount: '共 {count} 个模型',
+    modelId: '模型 ID',
+    displayName: '显示名称',
+    actions: '操作',
+    noModels: '暂无可用模型',
+    noModelsDesc: '当前 API 密钥没有可用的模型',
+    loadFailed: '加载模型列表失败',
+  },
+
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index ad6e71c448a..67178653cdb 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -174,6 +174,18 @@ const routes: RouteRecordRaw[] = [
       descriptionKey: 'redeem.description'
     }
   },
+  {
+    path: '/models',
+    name: 'Models',
+    component: () => import('@/views/user/ModelsView.vue'),
+    meta: {
+      requiresAuth: true,
+      requiresAdmin: false,
+      title: 'Available Models',
+      titleKey: 'models.title',
+      descriptionKey: 'models.description'
+    }
+  },
   {
     path: '/profile',
     name: 'Profile',
diff --git a/frontend/src/views/user/ModelsView.vue b/frontend/src/views/user/ModelsView.vue
new file mode 100644
index 00000000000..b020b278048
--- /dev/null
+++ b/frontend/src/views/user/ModelsView.vue
@@ -0,0 +1,302 @@
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <!-- Loading State -->
+      <div v-if="loadingKeys" class="flex justify-center py-12">
+        <LoadingSpinner />
+      </div>
+
+      <!-- No API Keys State -->
+      <div v-else-if="apiKeys.length === 0" class="card p-12 text-center">
+        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700">
+          <Icon name="key" size="xl" class="text-gray-400" />
+        </div>
+        <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+          {{ t('models.noApiKeys') }}
+        </h3>
+        <p class="mb-4 text-gray-500 dark:text-dark-400">
+          {{ t('models.noApiKeysDesc') }}
+        </p>
+        <button @click="$router.push('/keys')" class="btn btn-primary">
+          <Icon name="plus" size="sm" class="mr-2" />
+          {{ t('models.createApiKey') }}
+        </button>
+      </div>
+
+      <!-- API Key Selection -->
+      <template v-else>
+        <div class="card">
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('models.selectApiKey') }}</h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-dark-400">{{ t('models.selectApiKeyHint') }}</p>
+          </div>
+          <div class="p-6">
+            <Select
+              v-model="selectedKeyId"
+              :options="apiKeyOptions"
+              :placeholder="t('models.selectApiKeyPlaceholder')"
+              class="w-full sm:w-96"
+              @update:model-value="onApiKeyChange"
+            />
+          </div>
+        </div>
+
+        <!-- Models Content -->
+        <template v-if="selectedApiKey">
+          <!-- Loading Models -->
+          <div v-if="loading" class="flex justify-center py-12">
+            <LoadingSpinner />
+          </div>
+
+          <!-- Error State -->
+          <div v-else-if="error" class="card p-6">
+            <div class="flex items-start gap-3">
+              <div class="rounded-lg bg-red-100 p-2 dark:bg-red-900/30">
+                <Icon name="x" size="md" class="text-red-600 dark:text-red-400" />
+              </div>
+              <div class="flex-1">
+                <h3 class="font-semibold text-red-900 dark:text-red-200">{{ t('models.loadFailed') }}</h3>
+                <p class="mt-1 text-sm text-red-700 dark:text-red-300">{{ error }}</p>
+                <button @click="loadModels" class="btn btn-secondary mt-3">
+                  <Icon name="refresh" size="sm" class="mr-2" />
+                  {{ t('common.retry') }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- No Models -->
+          <div v-else-if="models.length === 0" class="card p-12 text-center">
+            <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700">
+              <Icon name="inbox" size="xl" class="text-gray-400" />
+            </div>
+            <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('models.noModels') }}
+            </h3>
+            <p class="text-gray-500 dark:text-dark-400">
+              {{ t('models.noModelsDesc') }}
+            </p>
+          </div>
+
+          <!-- Models List & Usage Guide -->
+          <template v-else>
+            <!-- Usage Guide -->
+            <div class="card">
+              <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('models.usageGuide') }}</h2>
+              </div>
+              <div class="space-y-6 p-6">
+                <!-- API Endpoint -->
+                <div>
+                  <label class="input-label">{{ t('models.apiEndpoint') }}</label>
+                  <div class="flex items-center gap-2">
+                    <div class="code flex-1 overflow-x-auto">{{ apiBaseUrl }}</div>
+                    <button
+                      @click="copyToClipboard(apiBaseUrl)"
+                      class="btn btn-secondary shrink-0"
+                      :title="t('common.copy')"
+                    >
+                      <Icon name="clipboard" size="sm" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- API Key -->
+                <div>
+                  <label class="input-label">{{ t('models.yourApiKey') }}</label>
+                  <div class="flex items-center gap-2">
+                    <div class="code flex-1 overflow-x-auto">{{ selectedApiKey.key }}</div>
+                    <button
+                      @click="copyToClipboard(selectedApiKey.key)"
+                      class="btn btn-secondary shrink-0"
+                      :title="t('common.copy')"
+                    >
+                      <Icon name="clipboard" size="sm" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Example Request -->
+                <div>
+                  <label class="input-label">{{ t('models.exampleRequest') }}</label>
+                  <div class="relative">
+                    <pre class="code overflow-x-auto rounded-lg bg-gray-900 p-4 text-xs text-gray-100 dark:bg-black"><code>{{ exampleCode }}</code></pre>
+                    <button
+                      @click="copyToClipboard(exampleCode)"
+                      class="absolute right-2 top-2 rounded-lg bg-gray-800 p-2 text-gray-400 transition-colors hover:bg-gray-700 hover:text-white"
+                      :title="t('common.copy')"
+                    >
+                      <Icon name="clipboard" size="sm" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Available Models -->
+            <div class="card">
+              <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+                <div class="flex items-center justify-between">
+                  <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+                    {{ t('models.availableModels') }} ({{ models.length }})
+                  </h2>
+                  <button @click="loadModels" :disabled="loading" class="btn btn-secondary">
+                    <Icon name="refresh" size="sm" :class="loading ? 'animate-spin' : ''" />
+                  </button>
+                </div>
+              </div>
+              <div class="overflow-x-auto">
+                <table class="w-full">
+                  <thead class="border-b border-gray-100 bg-gray-50 dark:border-dark-700 dark:bg-dark-800/50">
+                    <tr>
+                      <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
+                        {{ t('models.modelId') }}
+                      </th>
+                      <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
+                        {{ t('models.displayName') }}
+                      </th>
+                      <th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
+                        {{ t('models.actions') }}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="divide-y divide-gray-100 dark:divide-dark-700">
+                    <tr
+                      v-for="model in models"
+                      :key="model.id"
+                      class="transition-colors hover:bg-gray-50 dark:hover:bg-dark-800/50"
+                    >
+                      <td class="px-6 py-4">
+                        <code class="code text-sm">{{ model.id }}</code>
+                      </td>
+                      <td class="px-6 py-4">
+                        <span class="text-sm text-gray-900 dark:text-white">
+                          {{ model.display_name || model.id }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 text-right">
+                        <button
+                          @click="copyToClipboard(model.id)"
+                          class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dark-700"
+                        >
+                          <Icon name="clipboard" size="sm" />
+                          {{ t('common.copy') }}
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { useClipboard } from '@/composables/useClipboard'
+import { list as listApiKeys } from '@/api/keys'
+import axios from 'axios'
+import type { ClaudeModel, ApiKey } from '@/types'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+import Icon from '@/components/icons/Icon.vue'
+import Select from '@/components/common/Select.vue'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const { copyToClipboard } = useClipboard()
+
+const apiKeys = ref<ApiKey[]>([])
+const selectedKeyId = ref<number | null>(null)
+const models = ref<ClaudeModel[]>([])
+const loading = ref(false)
+const loadingKeys = ref(false)
+const error = ref<string | null>(null)
+
+const selectedApiKey = computed(() => apiKeys.value.find(k => k.id === selectedKeyId.value) || null)
+const apiBaseUrl = computed(() => appStore.cachedPublicSettings?.api_base_url || 'https://api.example.com')
+
+const apiKeyOptions = computed(() => [
+  ...apiKeys.value.map(key => ({
+    value: key.id,
+    label: `${key.name} (${maskKey(key.key)})`
+  }))
+])
+
+const exampleCode = computed(() => {
+  if (!selectedApiKey.value) return ''
+  const modelId = models.value[0]?.id || 'claude-3-5-sonnet-20241022'
+  return `curl ${apiBaseUrl.value}/v1/messages \\
+  -H "Content-Type: application/json" \\
+  -H "x-api-key: ${selectedApiKey.value.key}" \\
+  -H "anthropic-version: 2023-06-01" \\
+  -d '{
+    "model": "${modelId}",
+    "max_tokens": 1024,
+    "messages": [
+      {"role": "user", "content": "Hello, Claude"}
+    ]
+  }'`
+})
+
+function maskKey(key: string): string {
+  if (key.length <= 12) return key
+  return key.substring(0, 8) + '...' + key.substring(key.length - 4)
+}
+
+async function loadApiKeysData() {
+  loadingKeys.value = true
+  try {
+    const response = await listApiKeys()
+    apiKeys.value = response.items.filter((key: ApiKey) => key.status === 'active')
+
+    // Auto-select first key if available
+    if (apiKeys.value.length > 0 && !selectedKeyId.value) {
+      selectedKeyId.value = apiKeys.value[0].id
+      await loadModels()
+    }
+  } catch (err: any) {
+    console.error('Failed to load API keys:', err)
+  } finally {
+    loadingKeys.value = false
+  }
+}
+
+async function onApiKeyChange(value: string | number | boolean | null) {
+  const keyId = typeof value === 'number' ? value : null
+  selectedKeyId.value = keyId
+  if (keyId) {
+    await loadModels()
+  }
+}
+
+async function loadModels() {
+  if (!selectedApiKey.value) return
+
+  loading.value = true
+  error.value = null
+  try {
+    const response = await axios.get('/v1/models', {
+      headers: {
+        'x-api-key': selectedApiKey.value.key
+      }
+    })
+    models.value = response.data.data || []
+  } catch (err: any) {
+    console.error('Failed to load models:', err)
+    error.value = err.response?.data?.message || err.message || t('models.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadApiKeysData()
+})
+</script>