feat: Add MCP settings export and copy functionality (#367 )

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: samanhappy <2755122+samanhappy@users.noreply.github.com> Co-authored-by: samanhappy <samanhappy@gmail.com>
fix: assign server name from key in getMarketServers function (#369 )
2025-12-24 10:49:35 -05:00 · 2025-10-13 19:39:01 +08:00 · 2025-10-13 18:19:21 +08:00 · 2025-10-12 16:51:02 +08:00 · 2025-10-12 15:30:40 +08:00 · 2025-10-12 11:31:44 +08:00
23 changed files with 1032 additions and 181 deletions
--- a/.github/DOCKER_CLI_TEST.md
+++ b/.github/DOCKER_CLI_TEST.md
@@ -0,0 +1,88 @@
+# Docker CLI Installation Test Procedure
+
+This document describes how to test the Docker CLI installation feature added with the `INSTALL_EXT=true` build argument.
+
+## Test 1: Build with INSTALL_EXT=false (default)
+
+```bash
+# Build without extended features
+docker build -t mcphub:base .
+
+# Run the container
+docker run --rm mcphub:base docker --version
+```
+
+**Expected Result**: `docker: not found` error (Docker CLI is NOT installed)
+
+## Test 2: Build with INSTALL_EXT=true
+
+```bash
+# Build with extended features
+docker build --build-arg INSTALL_EXT=true -t mcphub:extended .
+
+# Test Docker CLI is available
+docker run --rm mcphub:extended docker --version
+```
+
+**Expected Result**: Docker version output (e.g., `Docker version 27.x.x, build xxxxx`)
+
+## Test 3: Docker-in-Docker Workflow
+
+```bash
+# Build with extended features
+docker build --build-arg INSTALL_EXT=true -t mcphub:extended .
+
+# Run with Docker socket mounted
+docker run -d \
+  --name mcphub-test \
+  -p 3000:3000 \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  mcphub:extended
+
+# Test Docker commands from inside the container
+docker exec mcphub-test docker ps
+docker exec mcphub-test docker images
+
+# Cleanup
+docker stop mcphub-test
+docker rm mcphub-test
+```
+
+**Expected Result**: Docker commands should work and show the host's containers and images
+
+## Test 4: Verify Image Size
+
+```bash
+# Build both versions
+docker build -t mcphub:base .
+docker build --build-arg INSTALL_EXT=true -t mcphub:extended .
+
+# Compare image sizes
+docker images mcphub:*
+```
+
+**Expected Result**: 
+- The `extended` image should be larger than the `base` image
+- The size difference should be reasonable (Docker CLI adds ~60-80MB)
+
+## Test 5: Architecture Support
+
+```bash
+# On AMD64/x86_64
+docker build --build-arg INSTALL_EXT=true --platform linux/amd64 -t mcphub:extended-amd64 .
+
+# On ARM64
+docker build --build-arg INSTALL_EXT=true --platform linux/arm64 -t mcphub:extended-arm64 .
+```
+
+**Expected Result**: 
+- Both builds should succeed
+- AMD64 includes Chrome/Playwright + Docker CLI
+- ARM64 includes Docker CLI only (Chrome installation is skipped)
+
+## Notes
+
+- The Docker CLI installation follows the official Docker documentation
+- The installation uses the Debian Bookworm repository
+- All temporary files are cleaned up to minimize image size
+- The feature is opt-in via the `INSTALL_EXT` build argument
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,5 @@ yarn-error.log*
 *.log
 coverage/

-data/
+data/
+temp-test-config/
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
-  "semi": true,
+  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
-}
+}
--- a/10
+++ b/10
@@ -22,6 +22,16 @@ RUN if [ "$INSTALL_EXT" = "true" ]; then \
  else \
  echo "Skipping Chrome installation on non-amd64 architecture: $ARCH"; \
  fi; \
+  # Install Docker CLI \
+  apt-get update && \
+  apt-get install -y ca-certificates curl && \
+  install -m 0755 -d /etc/apt/keyrings && \
+  curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc && \
+  chmod a+r /etc/apt/keyrings/docker.asc && \
+  echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian bookworm stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null && \
+  apt-get update && \
+  apt-get install -y docker-ce-cli && \
+  apt-get clean && rm -rf /var/lib/apt/lists/*; \
  fi

 RUN uv tool install mcp-server-fetch
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -1,8 +1,7 @@
 #!/usr/bin/env node

 import path from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
+import { fileURLToPath, pathToFileURL } from 'url';
 import fs from 'fs';

 // Enable debug logging if needed
@@ -90,7 +89,10 @@ checkFrontend(projectRoot);

 // Start the server
 console.log('🚀 Starting MCPHub server...');
-import(path.join(projectRoot, 'dist', 'index.js')).catch(err => {
+const entryPath = path.join(projectRoot, 'dist', 'index.js');
+// Convert to file:// URL for cross-platform ESM compatibility (required on Windows)
+const entryUrl = pathToFileURL(entryPath).href;
+import(entryUrl).catch(err => {
  console.error('Failed to start MCPHub:', err);
  process.exit(1);
 });
--- a/docs/configuration/docker-setup.mdx
+++ b/docs/configuration/docker-setup.mdx
@@ -41,6 +41,38 @@ docker run -d \
  mcphub:local
 ```

+### Building with Extended Features
+
+The Docker image supports an `INSTALL_EXT` build argument to include additional tools:
+
+```bash
+# Build with extended features (includes Docker CLI, Chrome/Playwright)
+docker build --build-arg INSTALL_EXT=true -t mcphub:extended .
+
+# Run the container with Docker socket mounted (for Docker-in-Docker workflows)
+docker run -d \
+  --name mcphub \
+  -p 3000:3000 \
+  -v $(pwd)/mcp_settings.json:/app/mcp_settings.json \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  mcphub:extended
+
+# Verify Docker CLI is available
+docker exec mcphub docker --version
+```
+
+<Note>
+  **What's included with INSTALL_EXT=true:**
+  - **Docker CLI**: For container management and Docker-based workflows
+  - **Chrome/Playwright** (amd64 only): For browser automation tasks
+  
+  The extended image is larger but provides additional capabilities for advanced use cases.
+</Note>
+
+<Warning>
+  When mounting the Docker socket (`/var/run/docker.sock`), the container gains access to the host's Docker daemon. Only use this in trusted environments.
+</Warning>
+
 ## Docker Compose Setup

 ### Basic Configuration
--- a/docs/zh/configuration/docker-setup.mdx
+++ b/docs/zh/configuration/docker-setup.mdx
@@ -41,6 +41,38 @@ docker run -d \
  mcphub:local
 ```

+### 构建扩展功能版本
+
+Docker 镜像支持 `INSTALL_EXT` 构建参数以包含额外工具：
+
+```bash
+# 构建扩展功能版本（包含 Docker CLI、Chrome/Playwright）
+docker build --build-arg INSTALL_EXT=true -t mcphub:extended .
+
+# 运行容器并挂载 Docker socket（用于 Docker-in-Docker 工作流）
+docker run -d \
+  --name mcphub \
+  -p 3000:3000 \
+  -v $(pwd)/mcp_settings.json:/app/mcp_settings.json \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  mcphub:extended
+
+# 验证 Docker CLI 可用
+docker exec mcphub docker --version
+```
+
+<Note>
+  **INSTALL_EXT=true 包含的功能：**
+  - **Docker CLI**：用于容器管理和基于 Docker 的工作流
+  - **Chrome/Playwright**（仅 amd64）：用于浏览器自动化任务
+  
+  扩展镜像较大，但为高级用例提供了额外功能。
+</Note>
+
+<Warning>
+  挂载 Docker socket（`/var/run/docker.sock`）时，容器将获得访问主机 Docker 守护进程的权限。仅在可信环境中使用此功能。
+</Warning>
+
 ## Docker Compose 设置

 ### 基本配置
--- a/frontend/src/components/ServerCard.tsx
+++ b/frontend/src/components/ServerCard.tsx
@@ -7,6 +7,7 @@ import ToolCard from '@/components/ui/ToolCard'
 import PromptCard from '@/components/ui/PromptCard'
 import DeleteDialog from '@/components/ui/DeleteDialog'
 import { useToast } from '@/contexts/ToastContext'
+import { useSettingsData } from '@/hooks/useSettingsData'

 interface ServerCardProps {
  server: Server
@@ -39,6 +40,8 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
    }
  }, [])

+  const { exportMCPSettings } = useSettingsData()
+
  const handleRemove = (e: React.MouseEvent) => {
    e.stopPropagation()
    setShowDeleteDialog(true)
@@ -99,6 +102,39 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
    }
  }

+  const handleCopyServerConfig = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      const result = await exportMCPSettings(server.name)
+      const configJson = JSON.stringify(result.data, null, 2)
+
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(configJson)
+        showToast(t('common.copySuccess') || 'Copied to clipboard', 'success')
+      } else {
+        // Fallback for HTTP or unsupported clipboard API
+        const textArea = document.createElement('textarea')
+        textArea.value = configJson
+        textArea.style.position = 'fixed'
+        textArea.style.left = '-9999px'
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        try {
+          document.execCommand('copy')
+          showToast(t('common.copySuccess') || 'Copied to clipboard', 'success')
+        } catch (err) {
+          showToast(t('common.copyFailed') || 'Copy failed', 'error')
+          console.error('Copy to clipboard failed:', err)
+        }
+        document.body.removeChild(textArea)
+      }
+    } catch (error) {
+      console.error('Error copying server configuration:', error)
+      showToast(t('common.copyFailed') || 'Copy failed', 'error')
+    }
+  }
+
  const handleConfirmDelete = () => {
    onRemove(server.name)
    setShowDeleteDialog(false)
@@ -111,7 +147,7 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
      if (result.success) {
        showToast(
          t(enabled ? 'tool.enableSuccess' : 'tool.disableSuccess', { name: toolName }),
-          'success'
+          'success',
        )
        // Trigger refresh to update the tool's state in the UI
        if (onRefresh) {
@@ -133,7 +169,7 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
      if (result.success) {
        showToast(
          t(enabled ? 'tool.enableSuccess' : 'tool.disableSuccess', { name: promptName }),
-          'success'
+          'success',
        )
        // Trigger refresh to update the prompt's state in the UI
        if (onRefresh) {
@@ -150,21 +186,33 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar

  return (
    <>
-      <div className={`bg-white shadow rounded-lg p-6 mb-6 page-card transition-all duration-200 ${server.enabled === false ? 'opacity-60' : ''}`}>
+      <div
+        className={`bg-white shadow rounded-lg p-6 mb-6 page-card transition-all duration-200 ${server.enabled === false ? 'opacity-60' : ''}`}
+      >
        <div
          className="flex justify-between items-center cursor-pointer"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          <div className="flex items-center space-x-3">
-            <h2 className={`text-xl font-semibold ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'}`}>{server.name}</h2>
+            <h2
+              className={`text-xl font-semibold ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'}`}
+            >
+              {server.name}
+            </h2>
            <StatusBadge status={server.status} />

            {/* Tool count display */}
            <div className="flex items-center px-2 py-1 bg-blue-50 text-blue-700 rounded-full text-sm btn-primary">
              <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
+                <path
+                  fillRule="evenodd"
+                  d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
+                  clipRule="evenodd"
+                />
              </svg>
-              <span>{server.tools?.length || 0} {t('server.tools')}</span>
+              <span>
+                {server.tools?.length || 0} {t('server.tools')}
+              </span>
            </div>

            {/* Prompt count display */}
@@ -173,7 +221,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
                <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
                <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
              </svg>
-              <span>{server.prompts?.length || 0} {t('server.prompts')}</span>
+              <span>
+                {server.prompts?.length || 0} {t('server.prompts')}
+              </span>
            </div>

            {server.error && (
@@ -196,19 +246,25 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
                      maxHeight: '300px',
                      overflowY: 'auto',
                      width: '480px',
-                      transform: 'translateX(50%)'
+                      transform: 'translateX(50%)',
                    }}
                    onClick={(e) => e.stopPropagation()}
                  >
                    <div className="flex justify-between items-center sticky top-0 bg-white py-2 px-4 border-b border-gray-200 z-20 shadow-sm">
                      <div className="flex items-center space-x-2">
-                        <h4 className="text-sm font-medium text-red-600">{t('server.errorDetails')}</h4>
+                        <h4 className="text-sm font-medium text-red-600">
+                          {t('server.errorDetails')}
+                        </h4>
                        <button
                          onClick={copyToClipboard}
                          className="p-1 text-gray-400 hover:text-gray-600 transition-colors btn-secondary"
                          title={t('common.copy')}
                        >
-                          {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
+                          {copied ? (
+                            <Check size={14} className="text-green-500" />
+                          ) : (
+                            <Copy size={14} />
+                          )}
                        </button>
                      </div>
                      <button
@@ -222,7 +278,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
                      </button>
                    </div>
                    <div className="p-4 pt-2">
-                      <pre className="text-sm text-gray-700 break-words whitespace-pre-wrap">{server.error}</pre>
+                      <pre className="text-sm text-gray-700 break-words whitespace-pre-wrap">
+                        {server.error}
+                      </pre>
                    </div>
                  </div>
                )}
@@ -230,6 +288,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
            )}
          </div>
          <div className="flex space-x-2">
+            <button onClick={handleCopyServerConfig} className={`px-3 py-1 btn-secondary`}>
+              {t('server.copy')}
+            </button>
            <button
              onClick={handleEdit}
              className="px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 text-sm btn-primary"
@@ -239,20 +300,20 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
            <div className="flex items-center">
              <button
                onClick={handleToggle}
-                className={`px-3 py-1 text-sm rounded transition-colors ${isToggling
-                  ? 'bg-gray-200 text-gray-500'
-                  : server.enabled !== false
-                    ? 'bg-green-100 text-green-800 hover:bg-green-200 btn-secondary'
-                    : 'bg-gray-100 text-gray-800 hover:bg-gray-200 btn-primary'
-                  }`}
+                className={`px-3 py-1 text-sm rounded transition-colors ${
+                  isToggling
+                    ? 'bg-gray-200 text-gray-500'
+                    : server.enabled !== false
+                      ? 'bg-green-100 text-green-800 hover:bg-green-200 btn-secondary'
+                      : 'bg-gray-100 text-gray-800 hover:bg-gray-200 btn-primary'
+                }`}
                disabled={isToggling}
              >
                {isToggling
                  ? t('common.processing')
                  : server.enabled !== false
                    ? t('server.disable')
-                    : t('server.enable')
-                }
+                    : t('server.enable')}
              </button>
            </div>
            <button
@@ -271,10 +332,19 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
          <>
            {server.tools && (
              <div className="mt-6">
-                <h6 className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}>{t('server.tools')}</h6>
+                <h6
+                  className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}
+                >
+                  {t('server.tools')}
+                </h6>
                <div className="space-y-4">
                  {server.tools.map((tool, index) => (
-                    <ToolCard key={index} server={server.name} tool={tool} onToggle={handleToolToggle} />
+                    <ToolCard
+                      key={index}
+                      server={server.name}
+                      tool={tool}
+                      onToggle={handleToolToggle}
+                    />
                  ))}
                </div>
              </div>
@@ -282,14 +352,18 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar

            {server.prompts && (
              <div className="mt-6">
-                <h6 className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}>{t('server.prompts')}</h6>
+                <h6
+                  className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}
+                >
+                  {t('server.prompts')}
+                </h6>
                <div className="space-y-4">
                  {server.prompts.map((prompt, index) => (
-                    <PromptCard 
-                      key={index} 
-                      server={server.name} 
-                      prompt={prompt} 
-                      onToggle={handlePromptToggle} 
+                    <PromptCard
+                      key={index}
+                      server={server.name}
+                      prompt={prompt}
+                      onToggle={handlePromptToggle}
                    />
                  ))}
                </div>
@@ -309,4 +383,4 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh }: ServerCar
  )
 }

-export default ServerCard
+export default ServerCard
--- a/frontend/src/constants/permissions.ts
+++ b/frontend/src/constants/permissions.ts
@@ -4,6 +4,7 @@ export const PERMISSIONS = {
  SETTINGS_SMART_ROUTING: 'settings:smart_routing',
  SETTINGS_SKIP_AUTH: 'settings:skip_auth',
  SETTINGS_INSTALL_CONFIG: 'settings:install_config',
+  SETTINGS_EXPORT_CONFIG: 'settings:export_config',
 } as const;

 export default PERMISSIONS;
--- a/frontend/src/hooks/useSettingsData.ts
+++ b/frontend/src/hooks/useSettingsData.ts
@@ -420,6 +420,21 @@ export const useSettingsData = () => {
    }
  };

+  const exportMCPSettings = async (serverName?: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await apiGet(`/mcp-settings/export?serverName=${serverName ? serverName : ''}`);
+    } catch (error) {
+      console.error('Failed to export MCP settings:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Failed to export MCP settings';
+      setError(errorMessage);
+      showToast(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
  // Fetch settings when the component mounts or refreshKey changes
  useEffect(() => {
    fetchSettings();
@@ -454,5 +469,6 @@ export const useSettingsData = () => {
    updateMCPRouterConfig,
    updateMCPRouterConfigBatch,
    updateNameSeparator,
+    exportMCPSettings,
  };
 };
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -1,54 +1,55 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import ChangePasswordForm from '@/components/ChangePasswordForm';
-import { Switch } from '@/components/ui/ToggleGroup';
-import { useSettingsData } from '@/hooks/useSettingsData';
-import { useToast } from '@/contexts/ToastContext';
-import { generateRandomKey } from '@/utils/key';
-import { PermissionChecker } from '@/components/PermissionChecker';
-import { PERMISSIONS } from '@/constants/permissions';
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import ChangePasswordForm from '@/components/ChangePasswordForm'
+import { Switch } from '@/components/ui/ToggleGroup'
+import { useSettingsData } from '@/hooks/useSettingsData'
+import { useToast } from '@/contexts/ToastContext'
+import { generateRandomKey } from '@/utils/key'
+import { PermissionChecker } from '@/components/PermissionChecker'
+import { PERMISSIONS } from '@/constants/permissions'
+import { Copy, Check, Download } from 'lucide-react'

 const SettingsPage: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { showToast } = useToast();
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { showToast } = useToast()

  const [installConfig, setInstallConfig] = useState<{
-    pythonIndexUrl: string;
-    npmRegistry: string;
-    baseUrl: string;
+    pythonIndexUrl: string
+    npmRegistry: string
+    baseUrl: string
  }>({
    pythonIndexUrl: '',
    npmRegistry: '',
    baseUrl: 'http://localhost:3000',
-  });
+  })

  const [tempSmartRoutingConfig, setTempSmartRoutingConfig] = useState<{
-    dbUrl: string;
-    openaiApiBaseUrl: string;
-    openaiApiKey: string;
-    openaiApiEmbeddingModel: string;
+    dbUrl: string
+    openaiApiBaseUrl: string
+    openaiApiKey: string
+    openaiApiEmbeddingModel: string
  }>({
    dbUrl: '',
    openaiApiBaseUrl: '',
    openaiApiKey: '',
    openaiApiEmbeddingModel: '',
-  });
+  })

  const [tempMCPRouterConfig, setTempMCPRouterConfig] = useState<{
-    apiKey: string;
-    referer: string;
-    title: string;
-    baseUrl: string;
+    apiKey: string
+    referer: string
+    title: string
+    baseUrl: string
  }>({
    apiKey: '',
    referer: 'https://www.mcphubx.com',
    title: 'MCPHub',
    baseUrl: 'https://api.mcprouter.to/v1',
-  });
+  })

-  const [tempNameSeparator, setTempNameSeparator] = useState<string>('-');
+  const [tempNameSeparator, setTempNameSeparator] = useState<string>('-')

  const {
    routingConfig,
@@ -66,14 +67,15 @@ const SettingsPage: React.FC = () => {
    updateSmartRoutingConfigBatch,
    updateMCPRouterConfig,
    updateNameSeparator,
-  } = useSettingsData();
+    exportMCPSettings,
+  } = useSettingsData()

  // Update local installConfig when savedInstallConfig changes
  useEffect(() => {
    if (savedInstallConfig) {
-      setInstallConfig(savedInstallConfig);
+      setInstallConfig(savedInstallConfig)
    }
-  }, [savedInstallConfig]);
+  }, [savedInstallConfig])

  // Update local tempSmartRoutingConfig when smartRoutingConfig changes
  useEffect(() => {
@@ -83,9 +85,9 @@ const SettingsPage: React.FC = () => {
        openaiApiBaseUrl: smartRoutingConfig.openaiApiBaseUrl || '',
        openaiApiKey: smartRoutingConfig.openaiApiKey || '',
        openaiApiEmbeddingModel: smartRoutingConfig.openaiApiEmbeddingModel || '',
-      });
+      })
    }
-  }, [smartRoutingConfig]);
+  }, [smartRoutingConfig])

  // Update local tempMCPRouterConfig when mcpRouterConfig changes
  useEffect(() => {
@@ -95,14 +97,14 @@ const SettingsPage: React.FC = () => {
        referer: mcpRouterConfig.referer || 'https://www.mcphubx.com',
        title: mcpRouterConfig.title || 'MCPHub',
        baseUrl: mcpRouterConfig.baseUrl || 'https://api.mcprouter.to/v1',
-      });
+      })
    }
-  }, [mcpRouterConfig]);
+  }, [mcpRouterConfig])

  // Update local tempNameSeparator when nameSeparator changes
  useEffect(() => {
-    setTempNameSeparator(nameSeparator);
-  }, [nameSeparator]);
+    setTempNameSeparator(nameSeparator)
+  }, [nameSeparator])

  const [sectionsVisible, setSectionsVisible] = useState({
    routingConfig: false,
@@ -110,138 +112,244 @@ const SettingsPage: React.FC = () => {
    smartRoutingConfig: false,
    mcpRouterConfig: false,
    nameSeparator: false,
-    password: false
-  });
+    password: false,
+    exportConfig: false,
+  })

-  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'mcpRouterConfig' | 'nameSeparator' | 'password') => {
-    setSectionsVisible(prev => ({
+  const toggleSection = (
+    section:
+      | 'routingConfig'
+      | 'installConfig'
+      | 'smartRoutingConfig'
+      | 'mcpRouterConfig'
+      | 'nameSeparator'
+      | 'password'
+      | 'exportConfig',
+  ) => {
+    setSectionsVisible((prev) => ({
      ...prev,
-      [section]: !prev[section]
-    }));
-  };
+      [section]: !prev[section],
+    }))
+  }

-  const handleRoutingConfigChange = async (key: 'enableGlobalRoute' | 'enableGroupNameRoute' | 'enableBearerAuth' | 'bearerAuthKey' | 'skipAuth', value: boolean | string) => {
+  const handleRoutingConfigChange = async (
+    key:
+      | 'enableGlobalRoute'
+      | 'enableGroupNameRoute'
+      | 'enableBearerAuth'
+      | 'bearerAuthKey'
+      | 'skipAuth',
+    value: boolean | string,
+  ) => {
    // If enableBearerAuth is turned on and there's no key, generate one first
    if (key === 'enableBearerAuth' && value === true) {
      if (!tempRoutingConfig.bearerAuthKey && !routingConfig.bearerAuthKey) {
-        const newKey = generateRandomKey();
-        handleBearerAuthKeyChange(newKey);
+        const newKey = generateRandomKey()
+        handleBearerAuthKeyChange(newKey)

        // Update both enableBearerAuth and bearerAuthKey in a single call
        const success = await updateRoutingConfigBatch({
          enableBearerAuth: true,
-          bearerAuthKey: newKey
-        });
+          bearerAuthKey: newKey,
+        })

        if (success) {
          // Update tempRoutingConfig to reflect the saved values
-          setTempRoutingConfig(prev => ({
+          setTempRoutingConfig((prev) => ({
            ...prev,
-            bearerAuthKey: newKey
-          }));
+            bearerAuthKey: newKey,
+          }))
        }
-        return;
+        return
      }
    }

-    await updateRoutingConfig(key, value);
-  };
+    await updateRoutingConfig(key, value)
+  }

  const handleBearerAuthKeyChange = (value: string) => {
-    setTempRoutingConfig(prev => ({
+    setTempRoutingConfig((prev) => ({
      ...prev,
-      bearerAuthKey: value
-    }));
-  };
+      bearerAuthKey: value,
+    }))
+  }

  const saveBearerAuthKey = async () => {
-    await updateRoutingConfig('bearerAuthKey', tempRoutingConfig.bearerAuthKey);
-  };
+    await updateRoutingConfig('bearerAuthKey', tempRoutingConfig.bearerAuthKey)
+  }

-  const handleInstallConfigChange = (key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl', value: string) => {
+  const handleInstallConfigChange = (
+    key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl',
+    value: string,
+  ) => {
    setInstallConfig({
      ...installConfig,
-      [key]: value
-    });
-  };
+      [key]: value,
+    })
+  }

  const saveInstallConfig = async (key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl') => {
-    await updateInstallConfig(key, installConfig[key]);
-  };
+    await updateInstallConfig(key, installConfig[key])
+  }

-  const handleSmartRoutingConfigChange = (key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel', value: string) => {
+  const handleSmartRoutingConfigChange = (
+    key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel',
+    value: string,
+  ) => {
    setTempSmartRoutingConfig({
      ...tempSmartRoutingConfig,
-      [key]: value
-    });
-  };
+      [key]: value,
+    })
+  }

-  const saveSmartRoutingConfig = async (key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel') => {
-    await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key]);
-  };
+  const saveSmartRoutingConfig = async (
+    key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel',
+  ) => {
+    await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key])
+  }

-  const handleMCPRouterConfigChange = (key: 'apiKey' | 'referer' | 'title' | 'baseUrl', value: string) => {
+  const handleMCPRouterConfigChange = (
+    key: 'apiKey' | 'referer' | 'title' | 'baseUrl',
+    value: string,
+  ) => {
    setTempMCPRouterConfig({
      ...tempMCPRouterConfig,
-      [key]: value
-    });
-  };
+      [key]: value,
+    })
+  }

  const saveMCPRouterConfig = async (key: 'apiKey' | 'referer' | 'title' | 'baseUrl') => {
-    await updateMCPRouterConfig(key, tempMCPRouterConfig[key]);
-  };
+    await updateMCPRouterConfig(key, tempMCPRouterConfig[key])
+  }

  const saveNameSeparator = async () => {
-    await updateNameSeparator(tempNameSeparator);
-  };
+    await updateNameSeparator(tempNameSeparator)
+  }

  const handleSmartRoutingEnabledChange = async (value: boolean) => {
    // If enabling Smart Routing, validate required fields and save any unsaved changes
    if (value) {
-      const currentDbUrl = tempSmartRoutingConfig.dbUrl || smartRoutingConfig.dbUrl;
-      const currentOpenaiApiKey = tempSmartRoutingConfig.openaiApiKey || smartRoutingConfig.openaiApiKey;
+      const currentDbUrl = tempSmartRoutingConfig.dbUrl || smartRoutingConfig.dbUrl
+      const currentOpenaiApiKey =
+        tempSmartRoutingConfig.openaiApiKey || smartRoutingConfig.openaiApiKey

      if (!currentDbUrl || !currentOpenaiApiKey) {
-        const missingFields = [];
-        if (!currentDbUrl) missingFields.push(t('settings.dbUrl'));
-        if (!currentOpenaiApiKey) missingFields.push(t('settings.openaiApiKey'));
+        const missingFields = []
+        if (!currentDbUrl) missingFields.push(t('settings.dbUrl'))
+        if (!currentOpenaiApiKey) missingFields.push(t('settings.openaiApiKey'))

-        showToast(t('settings.smartRoutingValidationError', {
-          fields: missingFields.join(', ')
-        }));
-        return;
+        showToast(
+          t('settings.smartRoutingValidationError', {
+            fields: missingFields.join(', '),
+          }),
+        )
+        return
      }

      // Prepare updates object with unsaved changes and enabled status
-      const updates: any = { enabled: value };
+      const updates: any = { enabled: value }

      // Check for unsaved changes and include them in the batch update
      if (tempSmartRoutingConfig.dbUrl !== smartRoutingConfig.dbUrl) {
-        updates.dbUrl = tempSmartRoutingConfig.dbUrl;
+        updates.dbUrl = tempSmartRoutingConfig.dbUrl
      }
      if (tempSmartRoutingConfig.openaiApiBaseUrl !== smartRoutingConfig.openaiApiBaseUrl) {
-        updates.openaiApiBaseUrl = tempSmartRoutingConfig.openaiApiBaseUrl;
+        updates.openaiApiBaseUrl = tempSmartRoutingConfig.openaiApiBaseUrl
      }
      if (tempSmartRoutingConfig.openaiApiKey !== smartRoutingConfig.openaiApiKey) {
-        updates.openaiApiKey = tempSmartRoutingConfig.openaiApiKey;
+        updates.openaiApiKey = tempSmartRoutingConfig.openaiApiKey
      }
-      if (tempSmartRoutingConfig.openaiApiEmbeddingModel !== smartRoutingConfig.openaiApiEmbeddingModel) {
-        updates.openaiApiEmbeddingModel = tempSmartRoutingConfig.openaiApiEmbeddingModel;
+      if (
+        tempSmartRoutingConfig.openaiApiEmbeddingModel !==
+        smartRoutingConfig.openaiApiEmbeddingModel
+      ) {
+        updates.openaiApiEmbeddingModel = tempSmartRoutingConfig.openaiApiEmbeddingModel
      }

      // Save all changes in a single batch update
-      await updateSmartRoutingConfigBatch(updates);
+      await updateSmartRoutingConfigBatch(updates)
    } else {
      // If disabling, just update the enabled status
-      await updateSmartRoutingConfig('enabled', value);
+      await updateSmartRoutingConfig('enabled', value)
    }
-  };
+  }

  const handlePasswordChangeSuccess = () => {
    setTimeout(() => {
-      navigate('/');
-    }, 2000);
-  };
+      navigate('/')
+    }, 2000)
+  }
+
+  const [copiedConfig, setCopiedConfig] = useState(false)
+  const [mcpSettingsJson, setMcpSettingsJson] = useState<string>('')
+
+  const fetchMcpSettings = async () => {
+    try {
+      const result = await exportMCPSettings()
+      console.log('Fetched MCP settings:', result)
+      const configJson = JSON.stringify(result, null, 2)
+      setMcpSettingsJson(configJson)
+    } catch (error) {
+      console.error('Error fetching MCP settings:', error)
+      showToast(t('settings.exportError') || 'Failed to fetch settings', 'error')
+    }
+  }
+
+  useEffect(() => {
+    if (sectionsVisible.exportConfig && !mcpSettingsJson) {
+      fetchMcpSettings()
+    }
+  }, [sectionsVisible.exportConfig])
+
+  const handleCopyConfig = async () => {
+    if (!mcpSettingsJson) return
+
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(mcpSettingsJson)
+        setCopiedConfig(true)
+        showToast(t('common.copySuccess') || 'Copied to clipboard', 'success')
+        setTimeout(() => setCopiedConfig(false), 2000)
+      } else {
+        // Fallback for HTTP or unsupported clipboard API
+        const textArea = document.createElement('textarea')
+        textArea.value = mcpSettingsJson
+        textArea.style.position = 'fixed'
+        textArea.style.left = '-9999px'
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        try {
+          document.execCommand('copy')
+          setCopiedConfig(true)
+          showToast(t('common.copySuccess') || 'Copied to clipboard', 'success')
+          setTimeout(() => setCopiedConfig(false), 2000)
+        } catch (err) {
+          showToast(t('common.copyFailed') || 'Copy failed', 'error')
+          console.error('Copy to clipboard failed:', err)
+        }
+        document.body.removeChild(textArea)
+      }
+    } catch (error) {
+      console.error('Error copying configuration:', error)
+      showToast(t('common.copyFailed') || 'Copy failed', 'error')
+    }
+  }
+
+  const handleDownloadConfig = () => {
+    if (!mcpSettingsJson) return
+
+    const blob = new Blob([mcpSettingsJson], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'mcp_settings.json'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+    showToast(t('settings.exportSuccess') || 'Settings exported successfully', 'success')
+  }

  return (
    <div className="container mx-auto">
@@ -265,7 +373,9 @@ const SettingsPage: React.FC = () => {
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.enableSmartRouting')}</h3>
-                  <p className="text-sm text-gray-500">{t('settings.enableSmartRoutingDescription')}</p>
+                  <p className="text-sm text-gray-500">
+                    {t('settings.enableSmartRoutingDescription')}
+                  </p>
                </div>
                <Switch
                  disabled={loading}
@@ -277,7 +387,8 @@ const SettingsPage: React.FC = () => {
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">
-                    <span className="text-red-500 px-1">*</span>{t('settings.dbUrl')}
+                    <span className="text-red-500 px-1">*</span>
+                    {t('settings.dbUrl')}
                  </h3>
                </div>
                <div className="flex items-center gap-3">
@@ -302,7 +413,8 @@ const SettingsPage: React.FC = () => {
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">
-                    <span className="text-red-500 px-1">*</span>{t('settings.openaiApiKey')}
+                    <span className="text-red-500 px-1">*</span>
+                    {t('settings.openaiApiKey')}
                  </h3>
                </div>
                <div className="flex items-center gap-3">
@@ -332,7 +444,9 @@ const SettingsPage: React.FC = () => {
                  <input
                    type="text"
                    value={tempSmartRoutingConfig.openaiApiBaseUrl}
-                    onChange={(e) => handleSmartRoutingConfigChange('openaiApiBaseUrl', e.target.value)}
+                    onChange={(e) =>
+                      handleSmartRoutingConfigChange('openaiApiBaseUrl', e.target.value)
+                    }
                    placeholder={t('settings.openaiApiBaseUrlPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
@@ -349,13 +463,17 @@ const SettingsPage: React.FC = () => {

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
-                  <h3 className="font-medium text-gray-700">{t('settings.openaiApiEmbeddingModel')}</h3>
+                  <h3 className="font-medium text-gray-700">
+                    {t('settings.openaiApiEmbeddingModel')}
+                  </h3>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={tempSmartRoutingConfig.openaiApiEmbeddingModel}
-                    onChange={(e) => handleSmartRoutingConfigChange('openaiApiEmbeddingModel', e.target.value)}
+                    onChange={(e) =>
+                      handleSmartRoutingConfigChange('openaiApiEmbeddingModel', e.target.value)
+                    }
                    placeholder={t('settings.openaiApiEmbeddingModelPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
@@ -392,7 +510,9 @@ const SettingsPage: React.FC = () => {
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.mcpRouterApiKey')}</h3>
-                  <p className="text-sm text-gray-500">{t('settings.mcpRouterApiKeyDescription')}</p>
+                  <p className="text-sm text-gray-500">
+                    {t('settings.mcpRouterApiKeyDescription')}
+                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
@@ -416,7 +536,9 @@ const SettingsPage: React.FC = () => {
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.mcpRouterBaseUrl')}</h3>
-                  <p className="text-sm text-gray-500">{t('settings.mcpRouterBaseUrlDescription')}</p>
+                  <p className="text-sm text-gray-500">
+                    {t('settings.mcpRouterBaseUrlDescription')}
+                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
@@ -448,9 +570,7 @@ const SettingsPage: React.FC = () => {
          onClick={() => toggleSection('nameSeparator')}
        >
          <h2 className="font-semibold text-gray-800">{t('settings.systemSettings')}</h2>
-          <span className="text-gray-500">
-            {sectionsVisible.nameSeparator ? '▼' : '►'}
-          </span>
+          <span className="text-gray-500">{sectionsVisible.nameSeparator ? '▼' : '►'}</span>
        </div>

        {sectionsVisible.nameSeparator && (
@@ -490,9 +610,7 @@ const SettingsPage: React.FC = () => {
          onClick={() => toggleSection('routingConfig')}
        >
          <h2 className="font-semibold text-gray-800">{t('pages.settings.routeConfig')}</h2>
-          <span className="text-gray-500">
-            {sectionsVisible.routingConfig ? '▼' : '►'}
-          </span>
+          <span className="text-gray-500">{sectionsVisible.routingConfig ? '▼' : '►'}</span>
        </div>

        {sectionsVisible.routingConfig && (
@@ -505,7 +623,9 @@ const SettingsPage: React.FC = () => {
              <Switch
                disabled={loading}
                checked={routingConfig.enableBearerAuth}
-                onCheckedChange={(checked) => handleRoutingConfigChange('enableBearerAuth', checked)}
+                onCheckedChange={(checked) =>
+                  handleRoutingConfigChange('enableBearerAuth', checked)
+                }
              />
            </div>

@@ -538,24 +658,32 @@ const SettingsPage: React.FC = () => {
            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
              <div>
                <h3 className="font-medium text-gray-700">{t('settings.enableGlobalRoute')}</h3>
-                <p className="text-sm text-gray-500">{t('settings.enableGlobalRouteDescription')}</p>
+                <p className="text-sm text-gray-500">
+                  {t('settings.enableGlobalRouteDescription')}
+                </p>
              </div>
              <Switch
                disabled={loading}
                checked={routingConfig.enableGlobalRoute}
-                onCheckedChange={(checked) => handleRoutingConfigChange('enableGlobalRoute', checked)}
+                onCheckedChange={(checked) =>
+                  handleRoutingConfigChange('enableGlobalRoute', checked)
+                }
              />
            </div>

            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
              <div>
                <h3 className="font-medium text-gray-700">{t('settings.enableGroupNameRoute')}</h3>
-                <p className="text-sm text-gray-500">{t('settings.enableGroupNameRouteDescription')}</p>
+                <p className="text-sm text-gray-500">
+                  {t('settings.enableGroupNameRouteDescription')}
+                </p>
              </div>
              <Switch
                disabled={loading}
                checked={routingConfig.enableGroupNameRoute}
-                onCheckedChange={(checked) => handleRoutingConfigChange('enableGroupNameRoute', checked)}
+                onCheckedChange={(checked) =>
+                  handleRoutingConfigChange('enableGroupNameRoute', checked)
+                }
              />
            </div>

@@ -572,7 +700,6 @@ const SettingsPage: React.FC = () => {
                />
              </div>
            </PermissionChecker>
-
          </div>
        )}
      </div>
@@ -585,9 +712,7 @@ const SettingsPage: React.FC = () => {
            onClick={() => toggleSection('installConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('settings.installConfig')}</h2>
-            <span className="text-gray-500">
-              {sectionsVisible.installConfig ? '▼' : '►'}
-            </span>
+            <span className="text-gray-500">{sectionsVisible.installConfig ? '▼' : '►'}</span>
          </div>

          {sectionsVisible.installConfig && (
@@ -675,9 +800,7 @@ const SettingsPage: React.FC = () => {
          onClick={() => toggleSection('password')}
        >
          <h2 className="font-semibold text-gray-800">{t('auth.changePassword')}</h2>
-          <span className="text-gray-500">
-            {sectionsVisible.password ? '▼' : '►'}
-          </span>
+          <span className="text-gray-500">{sectionsVisible.password ? '▼' : '►'}</span>
        </div>

        {sectionsVisible.password && (
@@ -686,8 +809,61 @@ const SettingsPage: React.FC = () => {
          </div>
        )}
      </div>
-    </div >
-  );
-};

-export default SettingsPage;
+      {/* Export MCP Settings */}
+      <PermissionChecker permissions={PERMISSIONS.SETTINGS_EXPORT_CONFIG}>
+        <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
+          <div
+            className="flex justify-between items-center cursor-pointer"
+            onClick={() => toggleSection('exportConfig')}
+          >
+            <h2 className="font-semibold text-gray-800">{t('settings.exportMcpSettings')}</h2>
+            <span className="text-gray-500">{sectionsVisible.exportConfig ? '▼' : '►'}</span>
+          </div>
+
+          {sectionsVisible.exportConfig && (
+            <div className="space-y-4 mt-4">
+              <div className="p-3 bg-gray-50 rounded-md">
+                <div className="mb-4">
+                  <h3 className="font-medium text-gray-700">{t('settings.mcpSettingsJson')}</h3>
+                  <p className="text-sm text-gray-500">
+                    {t('settings.mcpSettingsJsonDescription')}
+                  </p>
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <button
+                      onClick={handleCopyConfig}
+                      disabled={!mcpSettingsJson}
+                      className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                    >
+                      {copiedConfig ? <Check size={16} /> : <Copy size={16} />}
+                      {copiedConfig ? t('common.copied') : t('settings.copyToClipboard')}
+                    </button>
+                    <button
+                      onClick={handleDownloadConfig}
+                      disabled={!mcpSettingsJson}
+                      className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                    >
+                      <Download size={16} />
+                      {t('settings.downloadJson')}
+                    </button>
+                  </div>
+                  {mcpSettingsJson && (
+                    <div className="mt-3">
+                      <pre className="bg-gray-900 text-gray-100 p-4 rounded-md overflow-x-auto text-xs max-h-96">
+                        {mcpSettingsJson}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </PermissionChecker>
+    </div>
+  )
+}
+
+export default SettingsPage
--- a/locales/en.json
+++ b/locales/en.json
@@ -75,6 +75,7 @@
    "addServer": "Add Server",
    "add": "Add",
    "edit": "Edit",
+    "copy": "Copy",
    "delete": "Delete",
    "confirmDelete": "Are you sure you want to delete this server?",
    "deleteWarning": "Deleting server '{{name}}' will remove it and all its data. This action cannot be undone.",
@@ -124,6 +125,7 @@
    "argumentsPlaceholder": "Enter arguments",
    "errorDetails": "Error Details",
    "viewErrorDetails": "View error details",
+    "copyConfig": "Copy Configuration",
    "confirmVariables": "Confirm Variable Configuration",
    "variablesDetected": "Variables detected in configuration. Please confirm these variables are properly configured:",
    "detectedVariables": "Detected Variables",
@@ -200,6 +202,7 @@
    "copyJson": "Copy JSON",
    "copySuccess": "Copied to clipboard",
    "copyFailed": "Copy failed",
+    "copied": "Copied",
    "close": "Close",
    "confirm": "Confirm",
    "language": "Language",
@@ -502,7 +505,14 @@
    "systemSettings": "System Settings",
    "nameSeparatorLabel": "Name Separator",
    "nameSeparatorDescription": "Character used to separate server name and tool/prompt name (default: -)",
-    "restartRequired": "Configuration saved. It is recommended to restart the application to ensure all services load the new settings correctly."
+    "restartRequired": "Configuration saved. It is recommended to restart the application to ensure all services load the new settings correctly.",
+    "exportMcpSettings": "Export Settings",
+    "mcpSettingsJson": "MCP Settings JSON",
+    "mcpSettingsJsonDescription": "View, copy, or download your current mcp_settings.json configuration for backup or migration to other tools",
+    "copyToClipboard": "Copy to Clipboard",
+    "downloadJson": "Download JSON",
+    "exportSuccess": "Settings exported successfully",
+    "exportError": "Failed to fetch settings"
  },
  "dxt": {
    "upload": "Upload",
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -75,6 +75,7 @@
    "addServer": "Ajouter un serveur",
    "add": "Ajouter",
    "edit": "Modifier",
+    "copy": "Copier",
    "delete": "Supprimer",
    "confirmDelete": "Êtes-vous sûr de vouloir supprimer ce serveur ?",
    "deleteWarning": "La suppression du serveur '{{name}}' le supprimera ainsi que toutes ses données. Cette action est irréversible.",
@@ -124,6 +125,7 @@
    "argumentsPlaceholder": "Entrez les arguments",
    "errorDetails": "Détails de l'erreur",
    "viewErrorDetails": "Voir les détails de l'erreur",
+    "copyConfig": "Copier la configuration",
    "confirmVariables": "Confirmer la configuration des variables",
    "variablesDetected": "Variables détectées dans la configuration. Veuillez confirmer que ces variables sont correctement configurées :",
    "detectedVariables": "Variables détectées",
@@ -200,6 +202,7 @@
    "copyJson": "Copier le JSON",
    "copySuccess": "Copié dans le presse-papiers",
    "copyFailed": "Échec de la copie",
+    "copied": "Copié",
    "close": "Fermer",
    "confirm": "Confirmer",
    "language": "Langue",
@@ -502,7 +505,14 @@
    "systemSettings": "Paramètres système",
    "nameSeparatorLabel": "Séparateur de noms",
    "nameSeparatorDescription": "Caractère utilisé pour séparer le nom du serveur et le nom de l'outil/prompt (par défaut : -)",
-    "restartRequired": "Configuration enregistrée. Il est recommandé de redémarrer l'application pour s'assurer que tous les services chargent correctement les nouveaux paramètres."
+    "restartRequired": "Configuration enregistrée. Il est recommandé de redémarrer l'application pour s'assurer que tous les services chargent correctement les nouveaux paramètres.",
+    "exportMcpSettings": "Exporter les paramètres",
+    "mcpSettingsJson": "JSON des paramètres MCP",
+    "mcpSettingsJsonDescription": "Afficher, copier ou télécharger votre configuration mcp_settings.json actuelle pour la sauvegarde ou la migration vers d'autres outils",
+    "copyToClipboard": "Copier dans le presse-papiers",
+    "downloadJson": "Télécharger JSON",
+    "exportSuccess": "Paramètres exportés avec succès",
+    "exportError": "Échec de la récupération des paramètres"
  },
  "dxt": {
    "upload": "Télécharger",
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -75,6 +75,7 @@
    "addServer": "添加服务器",
    "add": "添加",
    "edit": "编辑",
+    "copy": "复制",
    "delete": "删除",
    "confirmDelete": "您确定要删除此服务器吗？",
    "deleteWarning": "删除服务器 '{{name}}' 将会移除该服务器及其所有数据。此操作无法撤销。",
@@ -124,6 +125,7 @@
    "argumentsPlaceholder": "请输入参数",
    "errorDetails": "错误详情",
    "viewErrorDetails": "查看错误详情",
+    "copyConfig": "复制配置",
    "confirmVariables": "确认变量配置",
    "variablesDetected": "检测到配置中包含变量，请确认这些变量是否已正确配置：",
    "detectedVariables": "检测到的变量",
@@ -201,6 +203,7 @@
    "copyJson": "复制JSON",
    "copySuccess": "已复制到剪贴板",
    "copyFailed": "复制失败",
+    "copied": "已复制",
    "close": "关闭",
    "confirm": "确认",
    "language": "语言",
@@ -504,7 +507,14 @@
    "systemSettings": "系统设置",
    "nameSeparatorLabel": "名称分隔符",
    "nameSeparatorDescription": "用于分隔服务器名称和工具/提示名称（默认：-）",
-    "restartRequired": "配置已保存。为确保所有服务正确加载新设置，建议重启应用。"
+    "restartRequired": "配置已保存。为确保所有服务正确加载新设置，建议重启应用。",
+    "exportMcpSettings": "导出配置",
+    "mcpSettingsJson": "MCP 配置 JSON",
+    "mcpSettingsJsonDescription": "查看、复制或下载当前的 mcp_settings.json 配置，可用于备份或迁移到其他工具",
+    "copyToClipboard": "复制到剪贴板",
+    "downloadJson": "下载 JSON",
+    "exportSuccess": "配置导出成功",
+    "exportError": "获取配置失败"
  },
  "dxt": {
    "upload": "上传",
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
    "dotenv-expand": "^12.0.2",
    "express": "^4.21.2",
    "express-validator": "^7.2.1",
+    "i18next": "^25.5.0",
    "i18next-fs-backend": "^2.6.0",
    "jsonwebtoken": "^9.0.2",
    "multer": "^2.0.2",
@@ -99,7 +100,6 @@
    "clsx": "^2.1.1",
    "concurrently": "^9.2.0",
    "eslint": "^8.57.1",
-    "i18next": "^25.5.0",
    "i18next-browser-languagedetector": "^8.2.0",
    "jest": "^30.2.0",
    "jest-environment-node": "^30.0.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
      express-validator:
        specifier: ^7.2.1
        version: 7.2.1
+      i18next:
+        specifier: ^25.5.0
+        version: 25.5.0(typescript@5.9.2)
      i18next-fs-backend:
        specifier: ^2.6.0
        version: 2.6.0
@@ -169,9 +172,6 @@ importers:
      eslint:
        specifier: ^8.57.1
        version: 8.57.1
-      i18next:
-        specifier: ^25.5.0
-        version: 25.5.0(typescript@5.9.2)
      i18next-browser-languagedetector:
        specifier: ^8.2.0
        version: 8.2.0
@@ -693,78 +693,92 @@ packages:
    resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-libvips-linux-arm@1.2.0':
    resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
    cpu: [arm]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-libvips-linux-ppc64@1.2.0':
    resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-libvips-linux-s390x@1.2.0':
    resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-libvips-linux-x64@1.2.0':
    resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
    resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
    resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@img/sharp-linux-arm64@0.34.3':
    resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-linux-arm@0.34.3':
    resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-linux-ppc64@0.34.3':
    resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-linux-s390x@0.34.3':
    resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-linux-x64@0.34.3':
    resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@img/sharp-linuxmusl-arm64@0.34.3':
    resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@img/sharp-linuxmusl-x64@0.34.3':
    resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@img/sharp-wasm32@0.34.3':
    resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==}
@@ -956,24 +970,28 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@next/swc-linux-arm64-musl@15.5.2':
    resolution: {integrity: sha512-s6N8k8dF9YGc5T01UPQ08yxsK6fUow5gG1/axWc1HVVBYQBgOjca4oUZF7s4p+kwhkB1bDSGR8QznWrFZ/Rt5g==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@next/swc-linux-x64-gnu@15.5.2':
    resolution: {integrity: sha512-o1RV/KOODQh6dM6ZRJGZbc+MOAHww33Vbs5JC9Mp1gDk8cpEO+cYC/l7rweiEalkSm5/1WGa4zY7xrNwObN4+Q==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@next/swc-linux-x64-musl@15.5.2':
    resolution: {integrity: sha512-/VUnh7w8RElYZ0IV83nUcP/J4KJ6LLYliiBIri3p3aW2giF+PAVgZb6mk8jbQSB3WlTai8gEmCAr7kptFa1H6g==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@next/swc-win32-arm64-msvc@15.5.2':
    resolution: {integrity: sha512-sMPyTvRcNKXseNQ/7qRfVRLa0VhR0esmQ29DD6pqvG71+JdVnESJaHPA8t7bc67KD5spP3+DOCNLhqlEI2ZgQg==}
@@ -1191,56 +1209,67 @@ packages:
    resolution: {integrity: sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==}
    cpu: [arm]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.50.1':
    resolution: {integrity: sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==}
    cpu: [arm]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.50.1':
    resolution: {integrity: sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.50.1':
    resolution: {integrity: sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-loongarch64-gnu@4.50.1':
    resolution: {integrity: sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==}
    cpu: [loong64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-ppc64-gnu@4.50.1':
    resolution: {integrity: sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.50.1':
    resolution: {integrity: sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.50.1':
    resolution: {integrity: sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.50.1':
    resolution: {integrity: sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.50.1':
    resolution: {integrity: sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.50.1':
    resolution: {integrity: sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-openharmony-arm64@4.50.1':
    resolution: {integrity: sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==}
@@ -1301,24 +1330,28 @@ packages:
    engines: {node: '>=10'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@swc/core-linux-arm64-musl@1.13.5':
    resolution: {integrity: sha512-9+ZxFN5GJag4CnYnq6apKTnnezpfJhCumyz0504/JbHLo+Ue+ZtJnf3RhyA9W9TINtLE0bC4hKpWi8ZKoETyOQ==}
    engines: {node: '>=10'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@swc/core-linux-x64-gnu@1.13.5':
    resolution: {integrity: sha512-WD530qvHrki8Ywt/PloKUjaRKgstQqNGvmZl54g06kA+hqtSE2FTG9gngXr3UJxYu/cNAjJYiBifm7+w4nbHbA==}
    engines: {node: '>=10'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@swc/core-linux-x64-musl@1.13.5':
    resolution: {integrity: sha512-Luj8y4OFYx4DHNQTWjdIuKTq2f5k6uSXICqx+FSabnXptaOBAbJHNbHT/06JZh6NRUouaf0mYXN0mcsqvkhd7Q==}
    engines: {node: '>=10'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@swc/core-win32-arm64-msvc@1.13.5':
    resolution: {integrity: sha512-cZ6UpumhF9SDJvv4DA2fo9WIzlNFuKSkZpZmPG1c+4PFSEMy5DFOjBSllCvnqihCabzXzpn6ykCwBmHpy31vQw==}
@@ -1438,48 +1471,56 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
    resolution: {integrity: sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-arm64-musl@4.1.12':
    resolution: {integrity: sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
    resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-linux-x64-gnu@4.1.12':
    resolution: {integrity: sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
    resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-x64-musl@4.1.12':
    resolution: {integrity: sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
    resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-wasm32-wasi@4.1.12':
    resolution: {integrity: sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==}
@@ -1816,41 +1857,49 @@ packages:
    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -3197,24 +3246,28 @@ packages:
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  lightningcss-linux-arm64-musl@1.30.1:
    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  lightningcss-linux-x64-gnu@1.30.1:
    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  lightningcss-linux-x64-musl@1.30.1:
    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  lightningcss-win32-arm64-msvc@1.30.1:
    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -42,8 +42,9 @@ export const loadOriginalSettings = (): McpSettings => {

    console.log(`Loaded settings from ${settingsPath}`);
    return settings;
-  } catch (error) {
-    console.error(`Failed to load settings from ${settingsPath}:`, error);
+  } catch (error: unknown) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.warn(`Failed to load settings from ${settingsPath}:`, errorMessage);
    const defaultSettings = { mcpServers: {}, users: [] };

    // Cache default settings
--- a/src/controllers/configController.ts
+++ b/src/controllers/configController.ts
@@ -1,6 +1,6 @@
 import { Request, Response } from 'express';
 import config from '../config/index.js';
-import { loadSettings } from '../config/index.js';
+import { loadSettings, loadOriginalSettings } from '../config/index.js';
 import { getDataService } from '../services/services.js';
 import { DataService } from '../services/dataService.js';
 import { IUser } from '../types/index.js';
@@ -72,3 +72,46 @@ export const getPublicConfig = (req: Request, res: Response): void => {
    });
  }
 };
+
+/**
+ * Get MCP settings in JSON format for export/copy
+ * Supports both full settings and individual server configuration
+ */
+export const getMcpSettingsJson = (req: Request, res: Response): void => {
+  try {
+    const { serverName } = req.query;
+    const settings = loadOriginalSettings();
+    if (serverName && typeof serverName === 'string') {
+      // Return individual server configuration
+      const serverConfig = settings.mcpServers[serverName];
+      if (!serverConfig) {
+        res.status(404).json({
+          success: false,
+          message: `Server '${serverName}' not found`,
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        data: {
+          mcpServers: {
+            [serverName]: serverConfig,
+          },
+        },
+      });
+    } else {
+      // Return full settings
+      res.json({
+        success: true,
+        data: settings,
+      });
+    }
+  } catch (error) {
+    console.error('Error getting MCP settings JSON:', error);
+    res.status(500).json({
+      success: false,
+      message: 'Failed to get MCP settings',
+    });
+  }
+};
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -58,7 +58,7 @@ import {
 } from '../controllers/cloudController.js';
 import { login, register, getCurrentUser, changePassword } from '../controllers/authController.js';
 import { getAllLogs, clearLogs, streamLogs } from '../controllers/logController.js';
-import { getRuntimeConfig, getPublicConfig } from '../controllers/configController.js';
+import { getRuntimeConfig, getPublicConfig, getMcpSettingsJson } from '../controllers/configController.js';
 import { callTool } from '../controllers/toolController.js';
 import { getPrompt } from '../controllers/promptController.js';
 import { uploadDxtFile, uploadMiddleware } from '../controllers/dxtController.js';
@@ -149,6 +149,9 @@ export const initRoutes = (app: express.Application): void => {
  router.delete('/logs', clearLogs);
  router.get('/logs/stream', streamLogs);

+  // MCP settings export route
+  router.get('/mcp-settings/export', getMcpSettingsJson);
+
  // Auth routes - move to router instead of app directly
  router.post(
    '/auth/login',
--- a/src/services/marketService.ts
+++ b/src/services/marketService.ts
@@ -14,6 +14,11 @@ export const getMarketServers = (): Record<string, MarketServer> => {
    const data = fs.readFileSync(serversJsonPath, 'utf8');
    const serversObj = JSON.parse(data) as Record<string, MarketServer>;

+    // use key as name field
+    Object.entries(serversObj).forEach(([key, server]) => {
+      server.name = key;
+    });
+
    const sortedEntries = Object.entries(serversObj).sort(([, serverA], [, serverB]) => {
      if (serverA.is_official && !serverB.is_official) return -1;
      if (!serverA.is_official && serverB.is_official) return 1;
--- a/src/utils/path.ts
+++ b/src/utils/path.ts
@@ -5,6 +5,13 @@ import { dirname } from 'path';
 // Project root directory - use process.cwd() as a simpler alternative
 const rootDir = process.cwd();

+function getParentPath(p: string, filename: string): string {
+  if (p.endsWith(filename)) {
+    p = p.slice(0, -filename.length);
+  }
+  return path.resolve(p);
+}
+
 /**
 * Find the path to a configuration file by checking multiple potential locations.
 * @param filename The name of the file to locate (e.g., 'servers.json', 'mcp_settings.json')
@@ -15,11 +22,18 @@ export const getConfigFilePath = (filename: string, description = 'Configuration
  if (filename === 'mcp_settings.json') {
    const envPath = process.env.MCPHUB_SETTING_PATH;
    if (envPath) {
-      // check envPath is file or directory
-      const stats = fs.statSync(envPath);
-      if (stats.isFile()) {
+      // Ensure directory exists
+      const dir = getParentPath(envPath, filename);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+        console.log(`Created directory for settings at ${dir}`);
+      }
+
+      // if full path, return as is
+      if (envPath?.endsWith(filename)) {
        return envPath;
      }
+
      // if directory, return path under that directory
      return path.resolve(envPath, filename);
    }
--- a/tests/controllers/configController.test.ts
+++ b/tests/controllers/configController.test.ts
@@ -0,0 +1,139 @@
+import { getMcpSettingsJson } from '../../src/controllers/configController.js'
+import * as config from '../../src/config/index.js'
+import { Request, Response } from 'express'
+
+// Mock the config module
+jest.mock('../../src/config/index.js')
+
+describe('ConfigController - getMcpSettingsJson', () => {
+  let mockRequest: Partial<Request>
+  let mockResponse: Partial<Response>
+  let mockJson: jest.Mock
+  let mockStatus: jest.Mock
+
+  beforeEach(() => {
+    mockJson = jest.fn()
+    mockStatus = jest.fn().mockReturnThis()
+    mockRequest = {
+      query: {},
+    }
+    mockResponse = {
+      json: mockJson,
+      status: mockStatus,
+    }
+
+    // Reset mocks
+    jest.clearAllMocks()
+  })
+
+  describe('Full Settings Export', () => {
+    it('should handle settings without users array', () => {
+      const mockSettings = {
+        mcpServers: {
+          'test-server': {
+            command: 'test',
+            args: ['--test'],
+          },
+        },
+      }
+
+      ;(config.loadOriginalSettings as jest.Mock).mockReturnValue(mockSettings)
+
+      getMcpSettingsJson(mockRequest as Request, mockResponse as Response)
+
+      expect(mockJson).toHaveBeenCalledWith({
+        success: true,
+        data: {
+          mcpServers: mockSettings.mcpServers,
+          users: undefined,
+        },
+      })
+    })
+  })
+
+  describe('Individual Server Export', () => {
+    it('should return individual server configuration when serverName is specified', () => {
+      const mockSettings = {
+        mcpServers: {
+          'test-server': {
+            command: 'test',
+            args: ['--test'],
+            env: {
+              TEST_VAR: 'test-value',
+            },
+          },
+          'another-server': {
+            command: 'another',
+            args: ['--another'],
+          },
+        },
+        users: [
+          {
+            username: 'admin',
+            password: '$2b$10$hashedpassword',
+            isAdmin: true,
+          },
+        ],
+      }
+
+      mockRequest.query = { serverName: 'test-server' }
+      ;(config.loadOriginalSettings as jest.Mock).mockReturnValue(mockSettings)
+
+      getMcpSettingsJson(mockRequest as Request, mockResponse as Response)
+
+      expect(mockJson).toHaveBeenCalledWith({
+        success: true,
+        data: {
+          mcpServers: {
+            'test-server': {
+              command: 'test',
+              args: ['--test'],
+              env: {
+                TEST_VAR: 'test-value',
+              },
+            },
+          },
+        },
+      })
+    })
+
+    it('should return 404 when server does not exist', () => {
+      const mockSettings = {
+        mcpServers: {
+          'test-server': {
+            command: 'test',
+            args: ['--test'],
+          },
+        },
+      }
+
+      mockRequest.query = { serverName: 'non-existent-server' }
+      ;(config.loadOriginalSettings as jest.Mock).mockReturnValue(mockSettings)
+
+      getMcpSettingsJson(mockRequest as Request, mockResponse as Response)
+
+      expect(mockStatus).toHaveBeenCalledWith(404)
+      expect(mockJson).toHaveBeenCalledWith({
+        success: false,
+        message: "Server 'non-existent-server' not found",
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should handle errors gracefully and return 500', () => {
+      const errorMessage = 'Failed to load settings'
+      ;(config.loadOriginalSettings as jest.Mock).mockImplementation(() => {
+        throw new Error(errorMessage)
+      })
+
+      getMcpSettingsJson(mockRequest as Request, mockResponse as Response)
+
+      expect(mockStatus).toHaveBeenCalledWith(500)
+      expect(mockJson).toHaveBeenCalledWith({
+        success: false,
+        message: 'Failed to get MCP settings',
+      })
+    })
+  })
+})
--- a/tests/utils/cliPathHandling.test.ts
+++ b/tests/utils/cliPathHandling.test.ts
@@ -0,0 +1,131 @@
+// Test for CLI path handling functionality
+import path from 'path';
+import { pathToFileURL } from 'url';
+
+describe('CLI Path Handling', () => {
+  describe('Cross-platform ESM URL conversion', () => {
+    it('should convert Unix-style absolute path to file:// URL', () => {
+      const unixPath = '/home/user/project/dist/index.js';
+      const fileUrl = pathToFileURL(unixPath).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      expect(fileUrl).toContain('index.js');
+    });
+
+    it('should handle relative paths correctly', () => {
+      const relativePath = path.join(process.cwd(), 'dist', 'index.js');
+      const fileUrl = pathToFileURL(relativePath).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      expect(fileUrl).toContain('dist');
+      expect(fileUrl).toContain('index.js');
+    });
+
+    it('should produce valid URL format', () => {
+      const testPath = path.join(process.cwd(), 'test', 'file.js');
+      const fileUrl = pathToFileURL(testPath).href;
+      
+      // Should be a valid URL
+      expect(() => new URL(fileUrl)).not.toThrow();
+      
+      // Should start with file://
+      expect(fileUrl.startsWith('file://')).toBe(true);
+    });
+
+    it('should handle paths with spaces', () => {
+      const pathWithSpaces = path.join(process.cwd(), 'my folder', 'dist', 'index.js');
+      const fileUrl = pathToFileURL(pathWithSpaces).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      expect(fileUrl).toContain('index.js');
+      // Spaces should be URL-encoded
+      expect(fileUrl).toContain('%20');
+    });
+
+    it('should handle paths with special characters', () => {
+      const pathWithSpecialChars = path.join(process.cwd(), 'test@dir', 'file#1.js');
+      const fileUrl = pathToFileURL(pathWithSpecialChars).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      // Special characters should be URL-encoded
+      expect(() => new URL(fileUrl)).not.toThrow();
+    });
+
+    // Windows-specific path handling simulation
+    it('should handle Windows-style paths correctly', () => {
+      // Simulate a Windows path structure
+      // Note: On non-Windows systems, this creates a relative path,
+      // but the test verifies the conversion mechanism works
+      const mockWindowsPath = 'C:\\Users\\User\\project\\dist\\index.js';
+      
+      // On Windows, pathToFileURL would convert C:\ to file:///C:/
+      // On Unix, it treats it as a relative path, but the conversion still works
+      const fileUrl = pathToFileURL(mockWindowsPath).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      expect(fileUrl).toContain('index.js');
+    });
+  });
+
+  describe('Path normalization', () => {
+    it('should normalize path separators', () => {
+      const mixedPath = path.join('dist', 'index.js');
+      const fileUrl = pathToFileURL(path.resolve(mixedPath)).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      // All separators should be forward slashes in URL
+      expect(fileUrl.split('file://')[1]).not.toContain('\\');
+    });
+
+    it('should handle multiple consecutive slashes', () => {
+      const messyPath = path.normalize('/dist//index.js');
+      const fileUrl = pathToFileURL(path.resolve(messyPath)).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      expect(() => new URL(fileUrl)).not.toThrow();
+    });
+  });
+
+  describe('Path resolution for CLI use case', () => {
+    it('should convert package root path to valid import URL', () => {
+      const packageRoot = process.cwd();
+      const entryPath = path.join(packageRoot, 'dist', 'index.js');
+      const entryUrl = pathToFileURL(entryPath).href;
+      
+      expect(entryUrl).toMatch(/^file:\/\//);
+      expect(entryUrl).toContain('dist');
+      expect(entryUrl).toContain('index.js');
+      expect(() => new URL(entryUrl)).not.toThrow();
+    });
+
+    it('should handle nested directory structures', () => {
+      const deepPath = path.join(process.cwd(), 'a', 'b', 'c', 'd', 'file.js');
+      const fileUrl = pathToFileURL(deepPath).href;
+      
+      expect(fileUrl).toMatch(/^file:\/\//);
+      expect(fileUrl).toContain('file.js');
+      expect(() => new URL(fileUrl)).not.toThrow();
+    });
+
+    it('should produce URL compatible with dynamic import()', () => {
+      // This test verifies the exact pattern used in bin/cli.js
+      const projectRoot = process.cwd();
+      const entryPath = path.join(projectRoot, 'dist', 'index.js');
+      const entryUrl = pathToFileURL(entryPath).href;
+      
+      // The URL should be valid for import()
+      expect(entryUrl).toMatch(/^file:\/\//);
+      expect(typeof entryUrl).toBe('string');
+      
+      // Verify the URL format is valid
+      const urlObj = new URL(entryUrl);
+      expect(urlObj.protocol).toBe('file:');
+      expect(urlObj.href).toBe(entryUrl);
+      
+      // On Windows, pathToFileURL converts 'C:\path' to 'file:///C:/path'
+      // On Unix, it converts '/path' to 'file:///path'
+      // Both formats are valid for dynamic import()
+      expect(entryUrl).toContain('index.js');
+    });
+  });
+});
Author	SHA1	Message	Date
Copilot	4d736c543d	feat: Add MCP settings export and copy functionality (#367 ) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: samanhappy <2755122+samanhappy@users.noreply.github.com> Co-authored-by: samanhappy <samanhappy@gmail.com>	2025-10-13 19:39:01 +08:00
samanhappy	f53c4a0e3b	fix: assign server name from key in getMarketServers function (#369 )	2025-10-13 18:19:21 +08:00
Copilot	d4bdb099d0	Add Docker CLI support to Docker image with INSTALL_EXT build argument (#366 ) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: samanhappy <2755122+samanhappy@users.noreply.github.com>	2025-10-12 16:51:02 +08:00
samanhappy	435227cbd4	fix: improve error handling and directory creation for settings path (#364 )	2025-10-12 15:30:40 +08:00
Copilot	6a59becd8d	Fix Windows startup error: Convert paths to file:// URLs for ESM dynamic imports (#363 ) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: samanhappy <2755122+samanhappy@users.noreply.github.com> Co-authored-by: samanhappy <samanhappy@gmail.com>	2025-10-12 11:31:44 +08:00