diff --git a/README.md b/README.md
index ed40e7f..ecbc752 100644
--- a/README.md
+++ b/README.md
@@ -101,7 +101,6 @@ services:
       - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # App name
       - NUXT_PUBLIC_TYPEWRITER=true # Enable typewriter effect, default is false
       - NUXT_PUBLIC_TYPEWRITER_DELAY=100 # Typewriter effect delay time, default is 50ms
-      - NUXT_PUBLIC_CUSTOM_API_KEY=false # [true|false] Whether to enable the API Key setting module (default: false)
     depends_on:
       - backend-web-server
     ports:
diff --git a/docker-compose.yml b/docker-compose.yml
index bc674fc..c412c4a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,7 +7,6 @@ services:
       - NUXT_PUBLIC_APP_NAME='ChatGPT UI'
       - NUXT_PUBLIC_TYPEWRITER=true
       - NUXT_PUBLIC_TYPEWRITER_DELAY=100
-      - NUXT_PUBLIC_CUSTOM_API_KEY=false # [true|false] Whether to enable the API Key setting module (default: false)
     depends_on:
       - backend-web-server
     ports:
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 6908542..0ec483b 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -98,7 +98,6 @@ services:
       - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # App 名称，默认为 ChatGPT UI
       - NUXT_PUBLIC_TYPEWRITER=true # 是否启用打字机效果，默认关闭
       - NUXT_PUBLIC_TYPEWRITER_DELAY=100 # 打字机效果的延迟时间，默认 50毫秒
-      - NUXT_PUBLIC_CUSTOM_API_KEY=false # [true|false] 是否开启客户端设置 API 密钥功能，默认关闭
     depends_on:
       - backend-web-server
     ports:
diff --git a/layouts/default.vue b/layouts/default.vue
index 6b61920..95291df 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -98,6 +98,15 @@ const signOut = async () => {
   }
 }
 
+const settings = useSettings()
+const showApiKeySetting = ref(false)
+watchEffect(() => {
+  if (settings.value) {
+    const settingsValue = toRaw(settings.value)
+    showApiKeySetting.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
+  }
+})
+
 onMounted(async () => {
   loadConversations()
   loadSettings()
@@ -240,7 +249,7 @@ onMounted(async () => {
             </v-dialog>
 
             <ApiKeyDialog
-                v-if="runtimeConfig.public.customApiKey"
+                v-if="showApiKeySetting"
             />
 
             <ModelParameters/>
diff --git a/pages/index.vue b/pages/index.vue
index 00e4b97..9217972 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -60,7 +60,7 @@ const fetchReply = async (message) => {
   }
 
   const data = Object.assign({}, currentModel.value, {
-    openaiApiKey: openaiApiKey.value,
+    openaiApiKey: enableCustomApiKey.value ? openaiApiKey.value : null,
     message: message,
     conversationId: currentConversation.value.id
   }, webSearchParams)
@@ -165,6 +165,7 @@ const deleteMessage = (index) => {
 
 const showWebSearchToggle = ref(false)
 const enableWebSearch = ref(false)
+const enableCustomApiKey = ref(false)
 
 const settings = useSettings()
 
@@ -172,6 +173,7 @@ watchEffect(() => {
   if (settings.value) {
     const settingsValue = toRaw(settings.value)
     showWebSearchToggle.value = settingsValue.open_web_search && settingsValue.open_web_search === 'True'
+    enableCustomApiKey.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
   }
 })