feat: introduce cloud server market (#260)

frontend/src/App.tsx

@@ -12,6 +12,7 @@ import GroupsPage from './pages/GroupsPage';
 import UsersPage from './pages/UsersPage';
 import SettingsPage from './pages/SettingsPage';
 import MarketPage from './pages/MarketPage';
+import CloudPage from './pages/CloudPage';
 import LogsPage from './pages/LogsPage';
 import { getBasePath } from './utils/runtime';
 
@@ -35,6 +36,8 @@ function App() {
                   <Route path="/users" element={<UsersPage />} />
                   <Route path="/market" element={<MarketPage />} />
                   <Route path="/market/:serverName" element={<MarketPage />} />
+                  <Route path="/cloud" element={<CloudPage />} />
+                  <Route path="/cloud/:serverName" element={<CloudPage />} />
                   <Route path="/logs" element={<LogsPage />} />
                   <Route path="/settings" element={<SettingsPage />} />
                 </Route>

frontend/src/components/CloudServerCard.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { CloudServer } from '@/types';
+
+interface CloudServerCardProps {
+  server: CloudServer;
+  onClick: (server: CloudServer) => void;
+}
+
+const CloudServerCard: React.FC<CloudServerCardProps> = ({ server, onClick }) => {
+  const { t } = useTranslation();
+
+  const handleClick = () => {
+    onClick(server);
+  };
+
+  // Extract a brief description from content if description is too long
+  const getDisplayDescription = () => {
+    if (server.description && server.description.length <= 150) {
+      return server.description;
+    }
+
+    // Try to extract a summary from content
+    if (server.content) {
+      const lines = server.content.split('\n').filter(line => line.trim());
+      for (const line of lines) {
+        if (line.length > 50 && line.length <= 150) {
+          return line;
+        }
+      }
+    }
+
+    return server.description ?
+      server.description.slice(0, 150) + '...' :
+      t('cloud.noDescription');
+  };
+
+  // Format date for display
+  const formatDate = (dateString: string) => {
+    try {
+      const date = new Date(dateString);
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      return `${year}/${month}/${day}`;
+    } catch {
+      return '';
+    }
+  };
+
+  // Get initials for avatar
+  const getAuthorInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map(word => word.charAt(0))
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  return (
+    <div
+      className="bg-white border border-gray-200 rounded-xl p-6 hover:shadow-lg hover:border-blue-400 hover:-translate-y-1 transition-all duration-300 cursor-pointer group relative overflow-hidden h-full flex flex-col"
+      onClick={handleClick}
+    >
+      {/* Background gradient overlay on hover */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/0 to-purple-50/0 group-hover:from-blue-50/30 group-hover:to-purple-50/30 transition-all duration-300 pointer-events-none" />
+
+      {/* Server Header */}
+      <div className="relative z-10 flex-1 flex flex-col">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex-1">
+            <h3 className="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-200 mb-2 line-clamp-2">
+              {server.title || server.name}
+            </h3>
+
+            {/* Author Section */}
+            <div className="flex items-center space-x-3 mb-3">
+              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-semibold">
+                {getAuthorInitials(server.author_name)}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-gray-700">{server.author_name}</p>
+                {server.updated_at && (
+                  <p className="text-xs text-gray-500">
+                    {t('cloud.updated')} {formatDate(server.updated_at)}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Server Type Badge */}
+          <div className="flex flex-col items-end space-y-2">
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+              MCP Server
+            </span>
+          </div>
+        </div>
+
+        {/* Description */}
+        <div className="mb-4 flex-1">
+          <p className="text-gray-600 text-sm leading-relaxed line-clamp-3">
+            {getDisplayDescription()}
+          </p>
+        </div>
+
+        {/* Tools Info */}
+        {server.tools && server.tools.length > 0 && (
+          <div className="mb-4">
+            <div className="flex items-center space-x-2">
+              <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              <span className="text-sm text-gray-600 font-medium">
+                {server.tools.length} {server.tools.length === 1 ? t('cloud.tool') : t('cloud.tools')}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Footer - 固定在底部 */}
+        <div className="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
+          <div className="flex items-center space-x-2 text-xs text-gray-500">
+            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
+            </svg>
+            <span>{formatDate(server.created_at)}</span>
+          </div>
+
+          <div className="flex items-center text-blue-600 text-sm font-medium group-hover:text-blue-700 transition-colors">
+            <span>{t('cloud.viewDetails')}</span>
+            <svg className="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CloudServerCard;

frontend/src/components/CloudServerDetail.tsx

@@ -0,0 +1,573 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CloudServer, CloudServerTool, ServerConfig } from '@/types';
+import { apiGet } from '@/utils/fetchInterceptor';
+import { useSettingsData } from '@/hooks/useSettingsData';
+import MCPRouterApiKeyError from './MCPRouterApiKeyError';
+import ServerForm from './ServerForm';
+
+interface CloudServerDetailProps {
+  serverName: string;
+  onBack: () => void;
+  onCallTool?: (serverName: string, toolName: string, args: Record<string, any>) => Promise<any>;
+  fetchServerTools?: (serverName: string) => Promise<CloudServerTool[]>;
+  onInstall?: (server: CloudServer, config: ServerConfig) => void;
+  installing?: boolean;
+  isInstalled?: boolean;
+}
+
+const CloudServerDetail: React.FC<CloudServerDetailProps> = ({
+  serverName,
+  onBack,
+  onCallTool,
+  fetchServerTools,
+  onInstall,
+  installing = false,
+  isInstalled = false
+}) => {
+  const { t } = useTranslation();
+  const { mcpRouterConfig } = useSettingsData();
+  const [server, setServer] = useState<CloudServer | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tools, setTools] = useState<CloudServerTool[]>([]);
+  const [loadingTools, setLoadingTools] = useState(false);
+  const [toolsApiKeyError, setToolsApiKeyError] = useState(false);
+  const [toolCallLoading, setToolCallLoading] = useState<string | null>(null);
+  const [toolCallResults, setToolCallResults] = useState<Record<string, any>>({});
+  const [toolArgs, setToolArgs] = useState<Record<string, Record<string, any>>>({});
+  const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({});
+  const [modalVisible, setModalVisible] = useState(false);
+  const [installError, setInstallError] = useState<string | null>(null);
+
+  // Helper function to check if error is MCPRouter API key not configured
+  const isMCPRouterApiKeyError = (errorMessage: string) => {
+    console.error('Checking for MCPRouter API key error:', errorMessage);
+    return errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
+      errorMessage.toLowerCase().includes('mcprouter api key not configured');
+  };
+
+  // Helper function to determine button state for install
+  const getInstallButtonProps = () => {
+    if (isInstalled) {
+      return {
+        className: "bg-green-600 cursor-default px-4 py-2 rounded text-sm font-medium text-white",
+        disabled: true,
+        text: t('market.installed')
+      };
+    } else if (installing) {
+      return {
+        className: "bg-gray-400 cursor-not-allowed px-4 py-2 rounded text-sm font-medium text-white",
+        disabled: true,
+        text: t('market.installing')
+      };
+    } else {
+      return {
+        className: "bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium text-white transition-colors",
+        disabled: false,
+        text: t('market.install')
+      };
+    }
+  };
+
+  // Handle install button click
+  const handleInstall = () => {
+    if (!isInstalled && onInstall) {
+      setModalVisible(true);
+      setInstallError(null);
+    }
+  };
+
+  // Handle modal close
+  const handleModalClose = () => {
+    setModalVisible(false);
+    setInstallError(null);
+  };
+
+  // Handle install form submission
+  const handleInstallSubmit = async (payload: any) => {
+    try {
+      if (!server || !onInstall) return;
+
+      setInstallError(null);
+      onInstall(server, payload.config);
+      setModalVisible(false);
+    } catch (err) {
+      console.error('Error installing server:', err);
+      setInstallError(t('errors.serverInstall'));
+    }
+  };
+
+  // Load server details
+  useEffect(() => {
+    const loadServerDetails = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const response = await apiGet(`/cloud/servers/${serverName}`);
+
+        if (response && response.success && response.data) {
+          setServer(response.data);
+          setTools(response.data.tools || []);
+        } else {
+          setError(t('cloud.serverNotFound'));
+        }
+      } catch (err) {
+        console.error('Failed to load server details:', err);
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadServerDetails();
+  }, [serverName, t]);
+
+  // Load tools if not already loaded
+  useEffect(() => {
+    const loadTools = async () => {
+      if (server && (!server.tools || server.tools.length === 0) && fetchServerTools) {
+        setLoadingTools(true);
+        setToolsApiKeyError(false);
+        try {
+          const fetchedTools = await fetchServerTools(server.name);
+          setTools(fetchedTools);
+        } catch (error) {
+          console.error('Failed to load tools:', error);
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          if (isMCPRouterApiKeyError(errorMessage)) {
+            setToolsApiKeyError(true);
+          }
+        } finally {
+          setLoadingTools(false);
+        }
+      }
+    };
+
+    loadTools();
+  }, [server?.name, server?.tools, fetchServerTools]);
+
+  // Format creation date
+  const formatDate = (dateStr: string) => {
+    try {
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    } catch {
+      return dateStr;
+    }
+  };
+
+  // Handle tool argument changes
+  const handleArgChange = (toolName: string, argName: string, value: any) => {
+    setToolArgs(prev => ({
+      ...prev,
+      [toolName]: {
+        ...prev[toolName],
+        [argName]: value
+      }
+    }));
+  };
+
+  // Handle tool call
+  const handleCallTool = async (toolName: string) => {
+    if (!onCallTool || !server) return;
+
+    setToolCallLoading(toolName);
+    try {
+      const args = toolArgs[toolName] || {};
+      const result = await onCallTool(server.server_key, toolName, args);
+      setToolCallResults(prev => ({
+        ...prev,
+        [toolName]: result
+      }));
+    } catch (error) {
+      console.error('Tool call failed:', error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      setToolCallResults(prev => ({
+        ...prev,
+        [toolName]: { error: errorMessage }
+      }));
+    } finally {
+      setToolCallLoading(null);
+    }
+  };
+
+  // Toggle schema visibility
+  const toggleSchema = (toolName: string) => {
+    setExpandedSchemas(prev => ({
+      ...prev,
+      [toolName]: !prev[toolName]
+    }));
+  };
+
+  // Render tool input field based on schema
+  const renderToolInput = (tool: CloudServerTool, propName: string, propSchema: any) => {
+    const currentValue = toolArgs[tool.name]?.[propName] || '';
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+      let value: any = e.target.value;
+
+      // Convert value based on schema type
+      if (propSchema.type === 'number' || propSchema.type === 'integer') {
+        value = value === '' ? undefined : Number(value);
+      } else if (propSchema.type === 'boolean') {
+        value = e.target.value === 'true';
+      }
+
+      handleArgChange(tool.name, propName, value);
+    };
+
+    if (propSchema.type === 'boolean') {
+      return (
+        <select
+          value={currentValue === true ? 'true' : currentValue === false ? 'false' : ''}
+          onChange={handleChange}
+          className="w-full border rounded-md px-3 py-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 form-input"
+        >
+          <option value=""></option>
+          <option value="true">True</option>
+          <option value="false">False</option>
+        </select>
+      );
+    } else if (propSchema.type === 'number' || propSchema.type === 'integer') {
+      return (
+        <input
+          type="number"
+          step={propSchema.type === 'integer' ? '1' : 'any'}
+          value={currentValue || ''}
+          onChange={handleChange}
+          className="w-full border rounded-md px-3 py-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 form-input"
+        />
+      );
+    } else {
+      return (
+        <input
+          type="text"
+          value={currentValue || ''}
+          onChange={handleChange}
+          className="w-full border rounded-md px-3 py-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 form-input"
+        />
+      );
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6">
+      <div className="mb-6">
+        <button
+          onClick={onBack}
+          className="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors group"
+        >
+          <svg className="h-5 w-5 mr-2 transform group-hover:-translate-x-1 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
+          </svg>
+          {t('cloud.backToList')}
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="bg-white rounded-xl shadow-sm p-12">
+          <div className="flex flex-col items-center">
+            <svg className="animate-spin h-12 w-12 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <p className="text-gray-600 text-lg">{t('app.loading')}</p>
+          </div>
+        </div>
+      ) : error && !isMCPRouterApiKeyError(error) ? (
+        <div className="bg-white rounded-xl shadow-sm p-6">
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+            <div className="flex items-center">
+              <svg className="h-5 w-5 text-red-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+              <p className="text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      ) : !server ? (
+        <div className="bg-white rounded-xl shadow-sm p-12">
+          <div className="text-center">
+            <svg className="h-12 w-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+            </svg>
+            <p className="text-gray-600 text-lg">{t('cloud.serverNotFound')}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {/* Server Header Card */}
+          <div className="bg-white rounded-xl shadow-sm overflow-hidden">
+            <div className="bg-gradient-to-r from-gray-100 to-gray-200 px-6 py-4">
+              <div className="flex justify-between items-end">
+                <div className="flex-1">
+                  <h1 className="text-2xl font-bold text-gray-800 mb-2">
+                    {server.title || server.name}
+                  </h1>
+                  <div className="flex flex-wrap items-center gap-4 text-gray-600">
+                    <span className="text-sm bg-white/60 text-gray-700 px-3 py-1 rounded-full">
+                      {server.name}
+                    </span>
+                    <div className="flex items-center">
+                      <svg className="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                      </svg>
+                      {t('cloud.by')} {server.author_name}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="text-right flex flex-col items-end gap-3">
+                  <div className="text-xs text-gray-500">
+                    {t('cloud.updated')}: {formatDate(server.updated_at)}
+                  </div>
+                  {onInstall && !isMCPRouterApiKeyError(error || '') && !toolsApiKeyError && (
+                    <button
+                      onClick={handleInstall}
+                      disabled={getInstallButtonProps().disabled}
+                      className={getInstallButtonProps().className}
+                    >
+                      {getInstallButtonProps().text}
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Description Card */}
+          <div className="bg-white rounded-xl shadow-sm p-6">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
+              <svg className="h-5 w-5 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              {t('cloud.description')}
+            </h2>
+            <p className="text-gray-700 leading-relaxed">{server.description}</p>
+          </div>
+
+          {/* Content Card */}
+          {server.content && (
+            <div className="bg-white rounded-xl shadow-sm p-6">
+              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
+                <svg className="h-5 w-5 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                {t('cloud.details')}
+              </h2>
+              <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 overflow-auto">
+                <pre className="text-sm text-gray-800 whitespace-pre-wrap">{server.content}</pre>
+              </div>
+            </div>
+          )}
+
+          {/* Tools Card */}
+          <div className="bg-white rounded-xl shadow-sm p-6">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
+              <svg className="h-5 w-5 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              {t('cloud.tools')}
+              {tools.length > 0 && (
+                <span className="ml-2 bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
+                  {tools.length}
+                </span>
+              )}
+            </h2>
+
+            {/* Check for API key error */}
+            {toolsApiKeyError && (
+              <MCPRouterApiKeyError />
+            )}
+
+            {loadingTools ? (
+              <div className="flex items-center justify-center py-12">
+                <svg className="animate-spin h-8 w-8 text-blue-500 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span className="text-gray-600">{t('cloud.loadingTools')}</span>
+              </div>
+            ) : tools.length === 0 && !toolsApiKeyError ? (
+              <div className="text-center py-12">
+                <svg className="h-12 w-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                </svg>
+                <p className="text-gray-600">{t('cloud.noTools')}</p>
+              </div>
+            ) : tools.length > 0 ? (
+              <div className="space-y-4">
+                {tools.map((tool, index) => (
+                  <div key={index} className="border border-gray-200 rounded-lg p-6 hover:border-gray-300 transition-colors">
+                    <div className="flex justify-between items-start mb-4">
+                      <div className="flex-1">
+                        <h3 className="text-lg font-medium text-gray-900 mb-2 flex items-center">
+                          <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded mr-3">
+                            TOOL
+                          </span>
+                          {tool.name}
+                        </h3>
+                        <p className="text-gray-600 leading-relaxed whitespace-pre-wrap">{tool.description}</p>
+                      </div>
+                      {onCallTool && (
+                        <button
+                          onClick={() => handleCallTool(tool.name)}
+                          disabled={toolCallLoading === tool.name}
+                          className="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center min-w-[100px] justify-center"
+                        >
+                          {toolCallLoading === tool.name ? (
+                            <>
+                              <svg className="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                              </svg>
+                              {t('cloud.calling')}
+                            </>
+                          ) : (
+                            <>
+                              <svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h6m2 8l4-4H7l4 4z" />
+                              </svg>
+                              {t('cloud.callTool')}
+                            </>
+                          )}
+                        </button>
+                      )}
+                    </div>
+
+                    {/* Tool inputs */}
+                    {tool.inputSchema && tool.inputSchema.properties && Object.keys(tool.inputSchema.properties).length > 0 && (
+                      <div className="border-t border-gray-100 pt-4">
+                        <div className="flex items-center gap-3 mb-4">
+                          <h4 className="text-sm font-medium text-gray-700">{t('cloud.parameters')}</h4>
+                          <button
+                            onClick={() => toggleSchema(tool.name)}
+                            className="text-sm text-blue-600 hover:text-blue-800 focus:outline-none flex items-center gap-1 transition-colors"
+                          >
+                            {t('cloud.viewSchema')}
+                            <svg
+                              className={`h-3 w-3 transition-transform duration-200 ${expandedSchemas[tool.name] ? 'rotate-90' : 'rotate-0'}`}
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                            >
+                              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                            </svg>
+                          </button>
+                        </div>
+
+                        {/* Schema content */}
+                        {expandedSchemas[tool.name] && (
+                          <div className="mb-4">
+                            <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 overflow-auto">
+                              <pre className="text-sm text-gray-800">
+                                {JSON.stringify(tool.inputSchema, null, 2)}
+                              </pre>
+                            </div>
+                          </div>
+                        )}
+
+                        <div className="space-y-4">
+                          {Object.entries(tool.inputSchema.properties).map(([propName, propSchema]: [string, any]) => (
+                            <div key={propName} className="space-y-2">
+                              <label className="block text-sm font-medium text-gray-700">
+                                {propName}
+                                {tool.inputSchema.required?.includes(propName) && (
+                                  <span className="text-red-500 ml-1">*</span>
+                                )}
+                              </label>
+                              {propSchema.description && (
+                                <p className="text-xs text-gray-500">{propSchema.description}</p>
+                              )}
+                              {renderToolInput(tool, propName, propSchema)}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Tool call result */}
+                    {toolCallResults[tool.name] && (
+                      <div className="border-t border-gray-100 pt-4 mt-4">
+                        {toolCallResults[tool.name].error ? (
+                          <>
+                            {isMCPRouterApiKeyError(toolCallResults[tool.name].error) ? (
+                              <MCPRouterApiKeyError />
+                            ) : (
+                              <>
+                                <h4 className="text-sm font-medium text-red-600 mb-3 flex items-center">
+                                  <svg className="h-4 w-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                                  </svg>
+                                  {t('cloud.error')}
+                                </h4>
+                                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+                                  <pre className="text-sm text-red-800 whitespace-pre-wrap overflow-auto">
+                                    {toolCallResults[tool.name].error}
+                                  </pre>
+                                </div>
+                              </>
+                            )}
+                          </>
+                        ) : (
+                          <>
+                            <h4 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
+                              <svg className="h-4 w-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                              </svg>
+                              {t('cloud.result')}
+                            </h4>
+                            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+                              <pre className="text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
+                                {JSON.stringify(toolCallResults[tool.name], null, 2)}
+                              </pre>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+
+      {/* Install Modal */}
+      {modalVisible && server && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <ServerForm
+            onSubmit={handleInstallSubmit}
+            onCancel={handleModalClose}
+            modalTitle={t('cloud.installServer', { name: server.title || server.name })}
+            formError={installError}
+            initialData={{
+              name: server.name,
+              status: 'disconnected',
+              config: {
+                type: 'streamable-http',
+                url: server.server_url,
+                headers: {
+                  'Authorization': `Bearer ${mcpRouterConfig.apiKey || '<MCPROUTER_API_KEY>'}`,
+                  'HTTP-Referer': mcpRouterConfig.referer || '<YOUR_APP_URL>',
+                  'X-Title': mcpRouterConfig.title || '<YOUR_APP_NAME>'
+                }
+              }
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CloudServerDetail;

frontend/src/components/MCPRouterApiKeyError.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+const MCPRouterApiKeyError: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const handleConfigureSettings = () => {
+    navigate('/settings');
+  };
+
+  const handleGetApiKey = () => {
+    window.open('https://mcprouter.co', '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <div className="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
+      <div className="flex items-start">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-amber-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3 flex-1">
+          <h3 className="text-sm font-medium text-amber-800">
+            {t('cloud.apiKeyNotConfigured')}
+          </h3>
+          <div className="mt-2 text-sm text-amber-700">
+            <p>{t('cloud.apiKeyNotConfiguredDescription')}</p>
+          </div>
+          <div className="mt-4 flex flex-wrap gap-2">
+            <button
+              onClick={handleGetApiKey}
+              className="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+            >
+              <svg
+                className="w-4 h-4 mr-1.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+              {t('cloud.getApiKey')}
+            </button>
+            <button
+              onClick={handleConfigureSettings}
+              className="inline-flex items-center px-3 py-2 text-sm font-medium text-amber-800 bg-amber-100 border border-amber-300 rounded-md hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200"
+            >
+              <svg
+                className="w-4 h-4 mr-1.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+              {t('cloud.configureInSettings')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MCPRouterApiKeyError;

frontend/src/components/layout/Sidebar.tsx

@@ -61,6 +61,15 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
         </svg>
       ),
     }] : []),
+    {
+      path: '/cloud',
+      label: t('nav.cloud'),
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z" clipRule="evenodd" />
+        </svg>
+      ),
+    },
     {
       path: '/market',
       label: t('nav.market'),

frontend/src/hooks/useCloudData.ts

@@ -0,0 +1,350 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CloudServer, ApiResponse, CloudServerTool } from '@/types';
+import { apiGet, apiPost } from '../utils/fetchInterceptor';
+
+export const useCloudData = () => {
+  const { t } = useTranslation();
+  const [servers, setServers] = useState<CloudServer[]>([]);
+  const [allServers, setAllServers] = useState<CloudServer[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [selectedTag, setSelectedTag] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentServer, setCurrentServer] = useState<CloudServer | null>(null);
+
+  // Pagination states
+  const [currentPage, setCurrentPage] = useState(1);
+  const [serversPerPage, setServersPerPage] = useState(9);
+  const [totalPages, setTotalPages] = useState(1);
+
+  // Fetch all cloud market servers
+  const fetchCloudServers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data: ApiResponse<CloudServer[]> = await apiGet('/cloud/servers');
+
+      if (data && data.success && Array.isArray(data.data)) {
+        setAllServers(data.data);
+        // Apply pagination to the fetched data
+        applyPagination(data.data, currentPage);
+      } else {
+        console.error('Invalid cloud market servers data format:', data);
+        setError(t('cloud.fetchError'));
+      }
+    } catch (err) {
+      console.error('Error fetching cloud market servers:', err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      // Keep the original error message for API key errors
+      if (
+        errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
+        errorMessage.toLowerCase().includes('mcprouter api key not configured')
+      ) {
+        setError(errorMessage);
+      } else {
+        setError(errorMessage);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  // Apply pagination to data
+  const applyPagination = useCallback(
+    (data: CloudServer[], page: number, itemsPerPage = serversPerPage) => {
+      const totalItems = data.length;
+      const calculatedTotalPages = Math.ceil(totalItems / itemsPerPage);
+      setTotalPages(calculatedTotalPages);
+
+      // Ensure current page is valid
+      const validPage = Math.max(1, Math.min(page, calculatedTotalPages));
+      if (validPage !== page) {
+        setCurrentPage(validPage);
+      }
+
+      const startIndex = (validPage - 1) * itemsPerPage;
+      const paginatedServers = data.slice(startIndex, startIndex + itemsPerPage);
+      setServers(paginatedServers);
+    },
+    [serversPerPage],
+  );
+
+  // Change page
+  const changePage = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      applyPagination(allServers, page, serversPerPage);
+    },
+    [allServers, applyPagination, serversPerPage],
+  );
+
+  // Fetch all categories
+  const fetchCategories = useCallback(async () => {
+    try {
+      const data: ApiResponse<string[]> = await apiGet('/cloud/categories');
+
+      if (data && data.success && Array.isArray(data.data)) {
+        setCategories(data.data);
+      } else {
+        console.error('Invalid cloud market categories data format:', data);
+      }
+    } catch (err) {
+      console.error('Error fetching cloud market categories:', err);
+    }
+  }, []);
+
+  // Fetch all tags
+  const fetchTags = useCallback(async () => {
+    try {
+      const data: ApiResponse<string[]> = await apiGet('/cloud/tags');
+
+      if (data && data.success && Array.isArray(data.data)) {
+        setTags(data.data);
+      } else {
+        console.error('Invalid cloud market tags data format:', data);
+      }
+    } catch (err) {
+      console.error('Error fetching cloud market tags:', err);
+    }
+  }, []);
+
+  // Fetch server by name
+  const fetchServerByName = useCallback(
+    async (name: string) => {
+      try {
+        setLoading(true);
+        const data: ApiResponse<CloudServer> = await apiGet(`/cloud/servers/${name}`);
+
+        if (data && data.success && data.data) {
+          setCurrentServer(data.data);
+          return data.data;
+        } else {
+          console.error('Invalid cloud server data format:', data);
+          setError(t('cloud.serverNotFound'));
+          return null;
+        }
+      } catch (err) {
+        console.error(`Error fetching cloud server ${name}:`, err);
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        // Keep the original error message for API key errors
+        if (
+          errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
+          errorMessage.toLowerCase().includes('mcprouter api key not configured')
+        ) {
+          setError(errorMessage);
+        } else {
+          setError(errorMessage);
+        }
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [t],
+  );
+
+  // Search servers by query
+  const searchServers = useCallback(
+    async (query: string) => {
+      try {
+        setLoading(true);
+        setSearchQuery(query);
+
+        if (!query.trim()) {
+          // Fetch fresh data from server instead of just applying pagination
+          fetchCloudServers();
+          return;
+        }
+
+        const data: ApiResponse<CloudServer[]> = await apiGet(
+          `/cloud/servers/search?query=${encodeURIComponent(query)}`,
+        );
+
+        if (data && data.success && Array.isArray(data.data)) {
+          setAllServers(data.data);
+          setCurrentPage(1);
+          applyPagination(data.data, 1);
+        } else {
+          console.error('Invalid cloud search results format:', data);
+          setError(t('cloud.searchError'));
+        }
+      } catch (err) {
+        console.error('Error searching cloud servers:', err);
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [t, allServers, applyPagination, fetchCloudServers],
+  );
+
+  // Filter servers by category
+  const filterByCategory = useCallback(
+    async (category: string) => {
+      try {
+        setLoading(true);
+        setSelectedCategory(category);
+        setSelectedTag(''); // Reset tag filter when filtering by category
+
+        if (!category) {
+          fetchCloudServers();
+          return;
+        }
+
+        const data: ApiResponse<CloudServer[]> = await apiGet(
+          `/cloud/categories/${encodeURIComponent(category)}`,
+        );
+
+        if (data && data.success && Array.isArray(data.data)) {
+          setAllServers(data.data);
+          setCurrentPage(1);
+          applyPagination(data.data, 1);
+        } else {
+          console.error('Invalid cloud category filter results format:', data);
+          setError(t('cloud.filterError'));
+        }
+      } catch (err) {
+        console.error('Error filtering cloud servers by category:', err);
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [t, fetchCloudServers, applyPagination],
+  );
+
+  // Filter servers by tag
+  const filterByTag = useCallback(
+    async (tag: string) => {
+      try {
+        setLoading(true);
+        setSelectedTag(tag);
+        setSelectedCategory(''); // Reset category filter when filtering by tag
+
+        if (!tag) {
+          fetchCloudServers();
+          return;
+        }
+
+        const data: ApiResponse<CloudServer[]> = await apiGet(
+          `/cloud/tags/${encodeURIComponent(tag)}`,
+        );
+
+        if (data && data.success && Array.isArray(data.data)) {
+          setAllServers(data.data);
+          setCurrentPage(1);
+          applyPagination(data.data, 1);
+        } else {
+          console.error('Invalid cloud tag filter results format:', data);
+          setError(t('cloud.tagFilterError'));
+        }
+      } catch (err) {
+        console.error('Error filtering cloud servers by tag:', err);
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [t, fetchCloudServers, applyPagination],
+  );
+
+  // Fetch tools for a specific server
+  const fetchServerTools = useCallback(async (serverName: string) => {
+    try {
+      const data: ApiResponse<CloudServerTool[]> = await apiGet(
+        `/cloud/servers/${serverName}/tools`,
+      );
+
+      if (!data.success) {
+        console.error('Failed to fetch cloud server tools:', data);
+        throw new Error(data.message || 'Failed to fetch cloud server tools');
+      }
+
+      if (data && data.success && Array.isArray(data.data)) {
+        return data.data;
+      } else {
+        console.error('Invalid cloud server tools data format:', data);
+        return [];
+      }
+    } catch (err) {
+      console.error(`Error fetching tools for cloud server ${serverName}:`, err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      // Re-throw API key errors so they can be handled by the component
+      if (
+        errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
+        errorMessage.toLowerCase().includes('mcprouter api key not configured')
+      ) {
+        throw err;
+      }
+      return [];
+    }
+  }, []);
+
+  // Call a tool on a cloud server
+  const callServerTool = useCallback(
+    async (serverName: string, toolName: string, args: Record<string, any>) => {
+      try {
+        const data = await apiPost(`/cloud/servers/${serverName}/tools/${toolName}/call`, {
+          arguments: args,
+        });
+
+        if (data && data.success) {
+          return data.data;
+        } else {
+          throw new Error(data.message || 'Failed to call tool');
+        }
+      } catch (err) {
+        console.error(`Error calling tool ${toolName} on cloud server ${serverName}:`, err);
+        throw err;
+      }
+    },
+    [],
+  );
+
+  // Change servers per page
+  const changeServersPerPage = useCallback(
+    (perPage: number) => {
+      setServersPerPage(perPage);
+      setCurrentPage(1);
+      applyPagination(allServers, 1, perPage);
+    },
+    [allServers, applyPagination],
+  );
+
+  // Load initial data
+  useEffect(() => {
+    fetchCloudServers();
+    fetchCategories();
+    fetchTags();
+  }, [fetchCloudServers, fetchCategories, fetchTags]);
+
+  return {
+    servers,
+    allServers,
+    categories,
+    tags,
+    selectedCategory,
+    selectedTag,
+    searchQuery,
+    loading,
+    error,
+    setError,
+    currentServer,
+    fetchCloudServers: fetchCloudServers,
+    fetchServerByName,
+    searchServers,
+    filterByCategory,
+    filterByTag,
+    fetchServerTools,
+    callServerTool,
+    // Pagination properties and methods
+    currentPage,
+    totalPages,
+    serversPerPage,
+    changePage,
+    changeServersPerPage,
+  };
+};

frontend/src/hooks/useSettingsData.ts

@@ -27,11 +27,19 @@ interface SmartRoutingConfig {
   openaiApiEmbeddingModel: string;
 }
 
+interface MCPRouterConfig {
+  apiKey: string;
+  referer: string;
+  title: string;
+  baseUrl: string;
+}
+
 interface SystemSettings {
   systemConfig?: {
     routing?: RoutingConfig;
     install?: InstallConfig;
     smartRouting?: SmartRoutingConfig;
+    mcpRouter?: MCPRouterConfig;
   };
 }
 
@@ -69,6 +77,13 @@ export const useSettingsData = () => {
     openaiApiEmbeddingModel: '',
   });
 
+  const [mcpRouterConfig, setMCPRouterConfig] = useState<MCPRouterConfig>({
+    apiKey: '',
+    referer: 'https://mcphub.app',
+    title: 'MCPHub',
+    baseUrl: 'https://api.mcprouter.to/v1',
+  });
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
@@ -112,6 +127,14 @@ export const useSettingsData = () => {
             data.data.systemConfig.smartRouting.openaiApiEmbeddingModel || '',
         });
       }
+      if (data.success && data.data?.systemConfig?.mcpRouter) {
+        setMCPRouterConfig({
+          apiKey: data.data.systemConfig.mcpRouter.apiKey || '',
+          referer: data.data.systemConfig.mcpRouter.referer || 'https://mcphub.app',
+          title: data.data.systemConfig.mcpRouter.title || 'MCPHub',
+          baseUrl: data.data.systemConfig.mcpRouter.baseUrl || 'https://api.mcprouter.to/v1',
+        });
+      }
     } catch (error) {
       console.error('Failed to fetch settings:', error);
       setError(error instanceof Error ? error.message : 'Failed to fetch settings');
@@ -290,6 +313,77 @@ export const useSettingsData = () => {
     }
   };
 
+  // Update MCPRouter configuration
+  const updateMCPRouterConfig = async <T extends keyof MCPRouterConfig>(
+    key: T,
+    value: MCPRouterConfig[T],
+  ) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await apiPut('/system-config', {
+        mcpRouter: {
+          [key]: value,
+        },
+      });
+
+      if (data.success) {
+        setMCPRouterConfig({
+          ...mcpRouterConfig,
+          [key]: value,
+        });
+        showToast(t('settings.systemConfigUpdated'));
+        return true;
+      } else {
+        showToast(data.message || t('errors.failedToUpdateSystemConfig'));
+        return false;
+      }
+    } catch (error) {
+      console.error('Failed to update MCPRouter config:', error);
+      const errorMessage =
+        error instanceof Error ? error.message : 'Failed to update MCPRouter config';
+      setError(errorMessage);
+      showToast(errorMessage);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Update multiple MCPRouter configuration fields at once
+  const updateMCPRouterConfigBatch = async (updates: Partial<MCPRouterConfig>) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await apiPut('/system-config', {
+        mcpRouter: updates,
+      });
+
+      if (data.success) {
+        setMCPRouterConfig({
+          ...mcpRouterConfig,
+          ...updates,
+        });
+        showToast(t('settings.systemConfigUpdated'));
+        return true;
+      } else {
+        showToast(data.message || t('errors.failedToUpdateSystemConfig'));
+        return false;
+      }
+    } catch (error) {
+      console.error('Failed to update MCPRouter config:', error);
+      const errorMessage =
+        error instanceof Error ? error.message : 'Failed to update MCPRouter config';
+      setError(errorMessage);
+      showToast(errorMessage);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // Fetch settings when the component mounts or refreshKey changes
   useEffect(() => {
     fetchSettings();
@@ -309,6 +403,7 @@ export const useSettingsData = () => {
     setTempRoutingConfig,
     installConfig,
     smartRoutingConfig,
+    mcpRouterConfig,
     loading,
     error,
     setError,
@@ -319,5 +414,7 @@ export const useSettingsData = () => {
     updateSmartRoutingConfig,
     updateSmartRoutingConfigBatch,
     updateRoutingConfigBatch,
+    updateMCPRouterConfig,
+    updateMCPRouterConfigBatch,
   };
 };

frontend/src/index.css

@@ -442,6 +442,30 @@ tbody tr:hover {
   color: rgba(239, 154, 154, 0.9) !important;
 }
 
+/* External link styles */
+.external-link {
+  color: #2563eb !important; /* Blue-600 for light mode */
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.external-link:hover {
+  color: #1d4ed8 !important; /* Blue-700 for light mode */
+  border-bottom-color: #1d4ed8;
+  text-decoration: none;
+}
+
+.dark .external-link {
+  color: #60a5fa !important; /* Blue-400 for dark mode */
+}
+
+.dark .external-link:hover {
+  color: #93c5fd !important; /* Blue-300 for dark mode */
+  border-bottom-color: #93c5fd;
+}
+
 .border-red {
   border-color: #937d7d; /* Tailwind red-800 for light mode */
 }

frontend/src/pages/CloudPage.tsx

@@ -0,0 +1,344 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { CloudServer, ServerConfig } from '@/types';
+import { useCloudData } from '@/hooks/useCloudData';
+import { useToast } from '@/contexts/ToastContext';
+import { apiPost } from '@/utils/fetchInterceptor';
+import CloudServerCard from '@/components/CloudServerCard';
+import CloudServerDetail from '@/components/CloudServerDetail';
+import MCPRouterApiKeyError from '@/components/MCPRouterApiKeyError';
+import Pagination from '@/components/ui/Pagination';
+
+const CloudPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { serverName } = useParams<{ serverName?: string }>();
+  const { showToast } = useToast();
+  const [installing, setInstalling] = useState(false);
+  const [installedServers, setInstalledServers] = useState<Set<string>>(new Set());
+
+  const {
+    servers,
+    allServers,
+    // categories,
+    loading,
+    error,
+    setError,
+    // searchServers,
+    // filterByCategory,
+    // filterByTag,
+    // selectedCategory,
+    // selectedTag,
+    fetchServerTools,
+    callServerTool,
+    // Pagination
+    currentPage,
+    totalPages,
+    changePage,
+    serversPerPage,
+    changeServersPerPage
+  } = useCloudData();
+
+  // const [searchQuery, setSearchQuery] = useState('');
+
+  // const handleSearch = (e: React.FormEvent) => {
+  //   e.preventDefault();
+  //   searchServers(searchQuery);
+  // };
+
+  // const handleCategoryClick = (category: string) => {
+  //   filterByCategory(category);
+  // };
+
+  // const handleClearFilters = () => {
+  //   setSearchQuery('');
+  //   filterByCategory('');
+  //   filterByTag('');
+  // };
+
+  const handleServerClick = (server: CloudServer) => {
+    navigate(`/cloud/${server.name}`);
+  };
+
+  const handleBackToList = () => {
+    navigate('/cloud');
+  };
+
+  const handleCallTool = async (serverName: string, toolName: string, args: Record<string, any>) => {
+    try {
+      const result = await callServerTool(serverName, toolName, args);
+      showToast(t('cloud.toolCallSuccess', { toolName }), 'success');
+      return result;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      // Don't show toast for API key errors, let the component handle it
+      if (!isMCPRouterApiKeyError(errorMessage)) {
+        showToast(t('cloud.toolCallError', { toolName, error: errorMessage }), 'error');
+      }
+      throw error;
+    }
+  };
+
+  // Helper function to check if error is MCPRouter API key not configured
+  const isMCPRouterApiKeyError = (errorMessage: string) => {
+    return errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
+      errorMessage.toLowerCase().includes('mcprouter api key not configured');
+  };
+
+  const handlePageChange = (page: number) => {
+    changePage(page);
+    // Scroll to top of page when changing pages
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleChangeItemsPerPage = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newValue = parseInt(e.target.value, 10);
+    changeServersPerPage(newValue);
+  };
+
+  // Handle cloud server installation
+  const handleInstallCloudServer = async (server: CloudServer, config: ServerConfig) => {
+    try {
+      setInstalling(true);
+
+      const payload = {
+        name: server.name,
+        config: config
+      };
+
+      const result = await apiPost('/servers', payload);
+
+      if (!result.success) {
+        const errorMessage = result?.message || t('server.addError');
+        showToast(errorMessage, 'error');
+        return;
+      }
+
+      // Update installed servers set
+      setInstalledServers(prev => new Set(prev).add(server.name));
+      showToast(t('cloud.installSuccess', { name: server.title || server.name }), 'success');
+
+    } catch (error) {
+      console.error('Error installing cloud server:', error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      showToast(t('cloud.installError', { error: errorMessage }), 'error');
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  // Render detailed view if a server name is in the URL
+  if (serverName) {
+    return (
+      <CloudServerDetail
+        serverName={serverName}
+        onBack={handleBackToList}
+        onCallTool={handleCallTool}
+        fetchServerTools={fetchServerTools}
+        onInstall={handleInstallCloudServer}
+        installing={installing}
+        isInstalled={installedServers.has(serverName)}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 flex items-center">
+            {t('cloud.title')}
+            <span className="text-sm text-gray-500 font-normal ml-2">
+              {t('cloud.subtitle').includes('提供支持') ? '由 ' : 'Powered by '}
+              <a
+                href="https://mcprouter.co/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="external-link"
+              >
+                MCPRouter
+              </a>
+              {t('cloud.subtitle').includes('提供支持') ? ' 提供支持' : ''}
+            </span>
+          </h1>
+        </div>
+      </div>
+
+      {error && (
+        <>
+          {isMCPRouterApiKeyError(error) ? (
+            <MCPRouterApiKeyError />
+          ) : (
+            <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 error-box rounded-lg">
+              <div className="flex items-center justify-between">
+                <p>{error}</p>
+                <button
+                  onClick={() => setError(null)}
+                  className="text-red-700 hover:text-red-900 transition-colors duration-200"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M4.293 4.293a1 1 011.414 0L10 8.586l4.293-4.293a1 1 01.414 1.414L11.414 10l4.293 4.293a1 1 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 01-1.414-1.414L8.586 10 4.293 5.707a1 1 010-1.414z" clipRule="evenodd" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Search bar at the top 
+      <div className="bg-white shadow rounded-lg p-6 mb-6 page-card">
+        <form onSubmit={handleSearch} className="flex space-x-4 mb-0">
+          <div className="flex-grow">
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={t('cloud.searchPlaceholder')}
+              className="shadow appearance-none border border-gray-200 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline form-input"
+            />
+          </div>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center btn-primary transition-all duration-200"
+          >
+            {t('cloud.search')}
+          </button>
+          {(searchQuery || selectedCategory || selectedTag) && (
+            <button
+              type="button"
+              onClick={handleClearFilters}
+              className="border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded hover:bg-gray-50 btn-secondary transition-all duration-200"
+            >
+              {t('cloud.clearFilters')}
+            </button>
+          )}
+        </form>
+      </div>
+      */}
+
+      <div className="flex flex-col md:flex-row gap-6">
+        {/* Left sidebar for filters 
+        <div className="md:w-48 flex-shrink-0">
+          <div className="bg-white shadow rounded-lg p-4 mb-6 sticky top-4 page-card">
+            {categories.length > 0 ? (
+              <div className="mb-6">
+                <div className="flex justify-between items-center mb-3">
+                  <h3 className="font-medium text-gray-900">{t('cloud.categories')}</h3>
+                  {selectedCategory && (
+                    <span className="text-xs text-blue-600 cursor-pointer hover:underline transition-colors duration-200" onClick={() => filterByCategory('')}>
+                      {t('cloud.clearCategoryFilter')}
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-col gap-2">
+                  {categories.map((category) => (
+                    <button
+                      key={category}
+                      onClick={() => handleCategoryClick(category)}
+                      className={`px-3 py-2 rounded text-sm text-left transition-all duration-200 ${selectedCategory === category
+                        ? 'bg-blue-100 text-blue-800 font-medium btn-primary'
+                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200 btn-secondary'
+                        }`}
+                    >
+                      {category}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : loading ? (
+              <div className="mb-6">
+                <div className="mb-3">
+                  <h3 className="font-medium text-gray-900">{t('cloud.categories')}</h3>
+                </div>
+                <div className="flex flex-col gap-2 items-center py-4 loading-container">
+                  <svg className="animate-spin h-6 w-6 text-blue-500 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  <p className="text-sm text-gray-600">{t('app.loading')}</p>
+                </div>
+              </div>
+            ) : (
+              <div className="mb-6">
+                <div className="mb-3">
+                  <h3 className="font-medium text-gray-900">{t('cloud.categories')}</h3>
+                </div>
+                <p className="text-sm text-gray-600 py-2">{t('cloud.noCategories')}</p>
+              </div>
+            )}
+          </div>
+        </div>
+        */}
+
+        {/* Main content area */}
+        <div className="flex-grow">
+          {loading ? (
+            <div className="bg-white shadow rounded-lg p-6 flex items-center justify-center">
+              <div className="flex flex-col items-center">
+                <svg className="animate-spin h-10 w-10 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <p className="text-gray-600">{t('app.loading')}</p>
+              </div>
+            </div>
+          ) : servers.length === 0 ? (
+            <div className="bg-white shadow rounded-lg p-6">
+              <p className="text-gray-600">{t('cloud.noServers')}</p>
+            </div>
+          ) : (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                {servers.map((server, index) => (
+                  <CloudServerCard
+                    key={index}
+                    server={server}
+                    onClick={handleServerClick}
+                  />
+                ))}
+              </div>
+
+              <div className="flex justify-between items-center mb-4">
+                <div className="text-sm text-gray-500">
+                  {t('cloud.showing', {
+                    from: (currentPage - 1) * serversPerPage + 1,
+                    to: Math.min(currentPage * serversPerPage, allServers.length),
+                    total: allServers.length
+                  })}
+                </div>
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={handlePageChange}
+                />
+                <div className="flex items-center space-x-2">
+                  <label htmlFor="perPage" className="text-sm text-gray-600">
+                    {t('cloud.perPage')}:
+                  </label>
+                  <select
+                    id="perPage"
+                    value={serversPerPage}
+                    onChange={handleChangeItemsPerPage}
+                    className="border rounded p-1 text-sm btn-secondary outline-none"
+                  >
+                    <option value="6">6</option>
+                    <option value="9">9</option>
+                    <option value="12">12</option>
+                    <option value="24">24</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="mt-6">
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CloudPage;

frontend/src/pages/ServersPage.tsx

@@ -60,6 +60,15 @@ const ServersPage: React.FC = () => {
       <div className="flex justify-between items-center mb-8">
         <h1 className="text-2xl font-bold text-gray-900">{t('pages.servers.title')}</h1>
         <div className="flex space-x-4">
+          <button
+            onClick={() => navigate('/cloud')}
+            className="px-4 py-2 bg-green-100 text-green-800 rounded hover:bg-green-200 flex items-center btn-primary transition-all duration-200"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16H11v-3.586l.293.293a1 1 0 001.414-1.414l-2-2a1 1 0 00-1.414 0l-2 2a1 1 0 001.414 1.414L9 12.414V16H5.5z" />
+            </svg>
+            {t('nav.cloud')}
+          </button>
           <button
             onClick={() => navigate('/market')}
             className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center btn-primary transition-all duration-200"

frontend/src/pages/SettingsPage.tsx

@@ -36,18 +36,32 @@ const SettingsPage: React.FC = () => {
     openaiApiEmbeddingModel: '',
   });
 
+  const [tempMCPRouterConfig, setTempMCPRouterConfig] = useState<{
+    apiKey: string;
+    referer: string;
+    title: string;
+    baseUrl: string;
+  }>({
+    apiKey: '',
+    referer: 'https://mcphub.app',
+    title: 'MCPHub',
+    baseUrl: 'https://api.mcprouter.to/v1',
+  });
+
   const {
     routingConfig,
     tempRoutingConfig,
     setTempRoutingConfig,
     installConfig: savedInstallConfig,
     smartRoutingConfig,
+    mcpRouterConfig,
     loading,
     updateRoutingConfig,
     updateRoutingConfigBatch,
     updateInstallConfig,
     updateSmartRoutingConfig,
-    updateSmartRoutingConfigBatch
+    updateSmartRoutingConfigBatch,
+    updateMCPRouterConfig
   } = useSettingsData();
 
   // Update local installConfig when savedInstallConfig changes
@@ -69,14 +83,27 @@ const SettingsPage: React.FC = () => {
     }
   }, [smartRoutingConfig]);
 
+  // Update local tempMCPRouterConfig when mcpRouterConfig changes
+  useEffect(() => {
+    if (mcpRouterConfig) {
+      setTempMCPRouterConfig({
+        apiKey: mcpRouterConfig.apiKey || '',
+        referer: mcpRouterConfig.referer || 'https://mcphub.app',
+        title: mcpRouterConfig.title || 'MCPHub',
+        baseUrl: mcpRouterConfig.baseUrl || 'https://api.mcprouter.to/v1',
+      });
+    }
+  }, [mcpRouterConfig]);
+
   const [sectionsVisible, setSectionsVisible] = useState({
     routingConfig: false,
     installConfig: false,
     smartRoutingConfig: false,
+    mcpRouterConfig: false,
     password: false
   });
 
-  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'password') => {
+  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'mcpRouterConfig' | 'password') => {
     setSectionsVisible(prev => ({
       ...prev,
       [section]: !prev[section]
@@ -143,6 +170,17 @@ const SettingsPage: React.FC = () => {
     await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key]);
   };
 
+  const handleMCPRouterConfigChange = (key: 'apiKey' | 'referer' | 'title' | 'baseUrl', value: string) => {
+    setTempMCPRouterConfig({
+      ...tempMCPRouterConfig,
+      [key]: value
+    });
+  };
+
+  const saveMCPRouterConfig = async (key: 'apiKey' | 'referer' | 'title' | 'baseUrl') => {
+    await updateMCPRouterConfig(key, tempMCPRouterConfig[key]);
+  };
+
   const handleSmartRoutingEnabledChange = async (value: boolean) => {
     // If enabling Smart Routing, validate required fields and save any unsaved changes
     if (value) {
@@ -197,7 +235,7 @@ const SettingsPage: React.FC = () => {
 
       {/* Smart Routing Configuration Settings */}
       <PermissionChecker permissions={PERMISSIONS.SETTINGS_SMART_ROUTING}>
-        <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 page-card">
+        <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 page-card dashboard-card">
           <div
             className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600"
             onClick={() => toggleSection('smartRoutingConfig')}
@@ -322,8 +360,123 @@ const SettingsPage: React.FC = () => {
         </div>
       </PermissionChecker>
 
+      {/* MCPRouter Configuration Settings */}
+      <PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
+        <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 page-card dashboard-card">
+          <div
+            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600"
+            onClick={() => toggleSection('mcpRouterConfig')}
+          >
+            <h2 className="font-semibold text-gray-800">{t('settings.mcpRouterConfig')}</h2>
+            <span className="text-gray-500 transition-transform duration-200">
+              {sectionsVisible.mcpRouterConfig ? '▼' : '►'}
+            </span>
+          </div>
+
+          {sectionsVisible.mcpRouterConfig && (
+            <div className="space-y-4 mt-4">
+              <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>
+                </div>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="password"
+                    value={tempMCPRouterConfig.apiKey}
+                    onChange={(e) => handleMCPRouterConfigChange('apiKey', e.target.value)}
+                    placeholder={t('settings.mcpRouterApiKeyPlaceholder')}
+                    className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 form-input"
+                    disabled={loading}
+                  />
+                  <button
+                    onClick={() => saveMCPRouterConfig('apiKey')}
+                    disabled={loading}
+                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                  >
+                    {t('common.save')}
+                  </button>
+                </div>
+              </div>
+
+              <div className="p-3 bg-gray-50 rounded-md">
+                <div className="mb-2">
+                  <h3 className="font-medium text-gray-700">{t('settings.mcpRouterReferer')}</h3>
+                  <p className="text-sm text-gray-500">{t('settings.mcpRouterRefererDescription')}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="text"
+                    value={tempMCPRouterConfig.referer}
+                    onChange={(e) => handleMCPRouterConfigChange('referer', e.target.value)}
+                    placeholder={t('settings.mcpRouterRefererPlaceholder')}
+                    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}
+                  />
+                  <button
+                    onClick={() => saveMCPRouterConfig('referer')}
+                    disabled={loading}
+                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                  >
+                    {t('common.save')}
+                  </button>
+                </div>
+              </div>
+
+              <div className="p-3 bg-gray-50 rounded-md">
+                <div className="mb-2">
+                  <h3 className="font-medium text-gray-700">{t('settings.mcpRouterTitle')}</h3>
+                  <p className="text-sm text-gray-500">{t('settings.mcpRouterTitleDescription')}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="text"
+                    value={tempMCPRouterConfig.title}
+                    onChange={(e) => handleMCPRouterConfigChange('title', e.target.value)}
+                    placeholder={t('settings.mcpRouterTitlePlaceholder')}
+                    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}
+                  />
+                  <button
+                    onClick={() => saveMCPRouterConfig('title')}
+                    disabled={loading}
+                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                  >
+                    {t('common.save')}
+                  </button>
+                </div>
+              </div>
+
+              <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>
+                </div>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="text"
+                    value={tempMCPRouterConfig.baseUrl}
+                    onChange={(e) => handleMCPRouterConfigChange('baseUrl', e.target.value)}
+                    placeholder={t('settings.mcpRouterBaseUrlPlaceholder')}
+                    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}
+                  />
+                  <button
+                    onClick={() => saveMCPRouterConfig('baseUrl')}
+                    disabled={loading}
+                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                  >
+                    {t('common.save')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </PermissionChecker>
+
       {/* Route Configuration Settings */}
-      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
+      <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('routingConfig')}
@@ -418,7 +571,7 @@ const SettingsPage: React.FC = () => {
 
       {/* Installation Configuration Settings */}
       <PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
-        <div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
+        <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('installConfig')}
@@ -508,7 +661,7 @@ const SettingsPage: React.FC = () => {
       </PermissionChecker>
 
       {/* Change Password */}
-      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
+      <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('password')}

frontend/src/types/index.ts

@@ -55,6 +55,27 @@ export interface MarketServer {
   is_official?: boolean;
 }
 
+// Cloud Server types (for MCPRouter API)
+export interface CloudServer {
+  created_at: string;
+  updated_at: string;
+  name: string;
+  author_name: string;
+  title: string;
+  description: string;
+  content: string;
+  server_key: string;
+  config_name: string;
+  server_url: string;
+  tools?: CloudServerTool[];
+}
+
+export interface CloudServerTool {
+  name: string;
+  description: string;
+  inputSchema: Record<string, any>;
+}
+
 // Tool input schema types
 export interface ToolInputSchema {
   type: string;

frontend/tailwind.config.js

@@ -1,12 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class', // Use class strategy for dark mode
   theme: {
     extend: {},
   },
-  plugins: [],
-}
+  plugins: [require('@tailwindcss/line-clamp')],
+};