feat: Add OpenAPI support with comprehensive configuration options and client integration (#184)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

frontend/src/components/ServerForm.tsx

@@ -26,7 +26,7 @@ const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formEr
     }
   };
 
-  const [serverType, setServerType] = useState<'stdio' | 'sse' | 'streamable-http'>(getInitialServerType());
+  const [serverType, setServerType] = useState<'stdio' | 'sse' | 'streamable-http' | 'openapi'>(getInitialServerType());
 
   const [formData, setFormData] = useState<ServerFormData>({
     name: (initialData && initialData.name) || '',
@@ -46,6 +46,32 @@ const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formEr
       timeout: (initialData && initialData.config && initialData.config.options && initialData.config.options.timeout) || 60000,
       resetTimeoutOnProgress: (initialData && initialData.config && initialData.config.options && initialData.config.options.resetTimeoutOnProgress) || false,
       maxTotalTimeout: (initialData && initialData.config && initialData.config.options && initialData.config.options.maxTotalTimeout) || undefined,
+    },
+    // OpenAPI configuration initialization
+    openapi: initialData && initialData.config && initialData.config.openapi ? {
+      url: initialData.config.openapi.url || '',
+      schema: initialData.config.openapi.schema ? JSON.stringify(initialData.config.openapi.schema, null, 2) : '',
+      inputMode: initialData.config.openapi.url ? 'url' : (initialData.config.openapi.schema ? 'schema' : 'url'),
+      version: initialData.config.openapi.version || '3.1.0',
+      securityType: initialData.config.openapi.security?.type || 'none',
+      // API Key initialization
+      apiKeyName: initialData.config.openapi.security?.apiKey?.name || '',
+      apiKeyIn: initialData.config.openapi.security?.apiKey?.in || 'header',
+      apiKeyValue: initialData.config.openapi.security?.apiKey?.value || '',
+      // HTTP auth initialization
+      httpScheme: initialData.config.openapi.security?.http?.scheme || 'bearer',
+      httpCredentials: initialData.config.openapi.security?.http?.credentials || '',
+      // OAuth2 initialization
+      oauth2Token: initialData.config.openapi.security?.oauth2?.token || '',
+      // OpenID Connect initialization
+      openIdConnectUrl: initialData.config.openapi.security?.openIdConnect?.url || '',
+      openIdConnectToken: initialData.config.openapi.security?.openIdConnect?.token || ''
+    } : {
+      inputMode: 'url',
+      url: '',
+      schema: '',
+      version: '3.1.0',
+      securityType: 'none'
     }
   })
 
@@ -76,7 +102,7 @@ const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formEr
     setFormData({ ...formData, arguments: value, args })
   }
 
-  const updateServerType = (type: 'stdio' | 'sse' | 'streamable-http') => {
+  const updateServerType = (type: 'stdio' | 'sse' | 'streamable-http' | 'openapi') => {
     setServerType(type);
     setFormData(prev => ({ ...prev, type }));
   }
@@ -160,16 +186,69 @@ const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formEr
         name: formData.name,
         config: {
           type: serverType, // Always include the type
-          ...(serverType === 'sse' || serverType === 'streamable-http'
+          ...(serverType === 'openapi'
             ? {
-              url: formData.url,
+              openapi: (() => {
+                const openapi: any = {
+                  version: formData.openapi?.version || '3.1.0'
+                };
+
+                // Add URL or schema based on input mode
+                if (formData.openapi?.inputMode === 'url') {
+                  openapi.url = formData.openapi?.url || '';
+                } else if (formData.openapi?.inputMode === 'schema' && formData.openapi?.schema) {
+                  try {
+                    openapi.schema = JSON.parse(formData.openapi.schema);
+                  } catch (e) {
+                    throw new Error('Invalid JSON schema format');
+                  }
+                }
+
+                // Add security configuration if provided
+                if (formData.openapi?.securityType && formData.openapi.securityType !== 'none') {
+                  openapi.security = {
+                    type: formData.openapi.securityType,
+                    ...(formData.openapi.securityType === 'apiKey' && {
+                      apiKey: {
+                        name: formData.openapi.apiKeyName || '',
+                        in: formData.openapi.apiKeyIn || 'header',
+                        value: formData.openapi.apiKeyValue || ''
+                      }
+                    }),
+                    ...(formData.openapi.securityType === 'http' && {
+                      http: {
+                        scheme: formData.openapi.httpScheme || 'bearer',
+                        credentials: formData.openapi.httpCredentials || ''
+                      }
+                    }),
+                    ...(formData.openapi.securityType === 'oauth2' && {
+                      oauth2: {
+                        token: formData.openapi.oauth2Token || ''
+                      }
+                    }),
+                    ...(formData.openapi.securityType === 'openIdConnect' && {
+                      openIdConnect: {
+                        url: formData.openapi.openIdConnectUrl || '',
+                        token: formData.openapi.openIdConnectToken || ''
+                      }
+                    })
+                  };
+                }
+
+                return openapi;
+              })(),
               ...(Object.keys(headers).length > 0 ? { headers } : {})
             }
-            : {
-              command: formData.command,
-              args: formData.args,
-              env: Object.keys(env).length > 0 ? env : undefined,
-            }
+            : serverType === 'sse' || serverType === 'streamable-http'
+              ? {
+                url: formData.url,
+                ...(Object.keys(headers).length > 0 ? { headers } : {})
+              }
+              : {
+                command: formData.command,
+                args: formData.args,
+                env: Object.keys(env).length > 0 ? env : undefined,
+              }
           ),
           ...(Object.keys(options).length > 0 ? { options } : {})
         }
@@ -253,10 +332,291 @@ const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formEr
               />
               <label htmlFor="streamable-http">Streamable HTTP</label>
             </div>
+            <div>
+              <input
+                type="radio"
+                id="openapi"
+                name="serverType"
+                value="openapi"
+                checked={serverType === 'openapi'}
+                onChange={() => updateServerType('openapi')}
+                className="mr-1"
+              />
+              <label htmlFor="openapi">OpenAPI</label>
+            </div>
           </div>
         </div>
 
-        {serverType === 'sse' || serverType === 'streamable-http' ? (
+        {serverType === 'openapi' ? (
+          <>
+            {/* Input Mode Selection */}
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">
+                {t('server.openapi.inputMode')}
+              </label>
+              <div className="flex space-x-4">
+                <div>
+                  <input
+                    type="radio"
+                    id="input-mode-url"
+                    name="inputMode"
+                    value="url"
+                    checked={formData.openapi?.inputMode === 'url'}
+                    onChange={() => setFormData(prev => ({
+                      ...prev,
+                      openapi: { ...prev.openapi!, inputMode: 'url' }
+                    }))}
+                    className="mr-1"
+                  />
+                  <label htmlFor="input-mode-url">{t('server.openapi.inputModeUrl')}</label>
+                </div>
+                <div>
+                  <input
+                    type="radio"
+                    id="input-mode-schema"
+                    name="inputMode"
+                    value="schema"
+                    checked={formData.openapi?.inputMode === 'schema'}
+                    onChange={() => setFormData(prev => ({
+                      ...prev,
+                      openapi: { ...prev.openapi!, inputMode: 'schema' }
+                    }))}
+                    className="mr-1"
+                  />
+                  <label htmlFor="input-mode-schema">{t('server.openapi.inputModeSchema')}</label>
+                </div>
+              </div>
+            </div>
+
+            {/* URL Input */}
+            {formData.openapi?.inputMode === 'url' && (
+              <div className="mb-4">
+                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="openapi-url">
+                  {t('server.openapi.specUrl')}
+                </label>
+                <input
+                  type="url"
+                  name="openapi-url"
+                  id="openapi-url"
+                  value={formData.openapi?.url || ''}
+                  onChange={(e) => setFormData(prev => ({
+                    ...prev,
+                    openapi: { ...prev.openapi!, url: e.target.value }
+                  }))}
+                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  placeholder="e.g.: https://api.example.com/openapi.json"
+                  required={serverType === 'openapi' && formData.openapi?.inputMode === 'url'}
+                />
+              </div>
+            )}
+
+            {/* Schema Input */}
+            {formData.openapi?.inputMode === 'schema' && (
+              <div className="mb-4">
+                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="openapi-schema">
+                  {t('server.openapi.schema')}
+                </label>
+                <textarea
+                  name="openapi-schema"
+                  id="openapi-schema"
+                  rows={10}
+                  value={formData.openapi?.schema || ''}
+                  onChange={(e) => setFormData(prev => ({
+                    ...prev,
+                    openapi: { ...prev.openapi!, schema: e.target.value }
+                  }))}
+                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-mono text-sm"
+                  placeholder={`{
+  "openapi": "3.1.0",
+  "info": {
+    "title": "API",
+    "version": "1.0.0"
+  },
+  "servers": [
+    {
+      "url": "https://api.example.com"
+    }
+  ],
+  "paths": {
+    ...
+  }
+}`}
+                  required={serverType === 'openapi' && formData.openapi?.inputMode === 'schema'}
+                />
+                <p className="text-xs text-gray-500 mt-1">{t('server.openapi.schemaHelp')}</p>
+              </div>
+            )}
+
+            {/* Security Configuration */}
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">
+                {t('server.openapi.security')}
+              </label>
+              <select
+                value={formData.openapi?.securityType || 'none'}
+                onChange={(e) => setFormData(prev => ({
+                  ...prev,
+                  openapi: {
+                    ...prev.openapi,
+                    securityType: e.target.value as any,
+                    url: prev.openapi?.url || ''
+                  }
+                }))}
+                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              >
+                <option value="none">{t('server.openapi.securityNone')}</option>
+                <option value="apiKey">{t('server.openapi.securityApiKey')}</option>
+                <option value="http">{t('server.openapi.securityHttp')}</option>
+                <option value="oauth2">{t('server.openapi.securityOAuth2')}</option>
+                <option value="openIdConnect">{t('server.openapi.securityOpenIdConnect')}</option>
+              </select>
+            </div>
+
+            {/* API Key Configuration */}
+            {formData.openapi?.securityType === 'apiKey' && (
+              <div className="mb-4 p-4 border rounded bg-gray-50">
+                <h4 className="text-sm font-medium text-gray-700 mb-3">{t('server.openapi.apiKeyConfig')}</h4>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.apiKeyName')}</label>
+                    <input
+                      type="text"
+                      value={formData.openapi?.apiKeyName || ''}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, apiKeyName: e.target.value, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                      placeholder="Authorization"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.apiKeyIn')}</label>
+                    <select
+                      value={formData.openapi?.apiKeyIn || 'header'}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, apiKeyIn: e.target.value as any, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                    >
+                      <option value="header">Header</option>
+                      <option value="query">Query</option>
+                      <option value="cookie">Cookie</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.apiKeyValue')}</label>
+                    <input
+                      type="password"
+                      value={formData.openapi?.apiKeyValue || ''}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, apiKeyValue: e.target.value, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                      placeholder="your-api-key"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* HTTP Authentication Configuration */}
+            {formData.openapi?.securityType === 'http' && (
+              <div className="mb-4 p-4 border rounded bg-gray-50">
+                <h4 className="text-sm font-medium text-gray-700 mb-3">{t('server.openapi.httpAuthConfig')}</h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.httpScheme')}</label>
+                    <select
+                      value={formData.openapi?.httpScheme || 'bearer'}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, httpScheme: e.target.value as any, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                    >
+                      <option value="basic">Basic</option>
+                      <option value="bearer">Bearer</option>
+                      <option value="digest">Digest</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.httpCredentials')}</label>
+                    <input
+                      type="password"
+                      value={formData.openapi?.httpCredentials || ''}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, httpCredentials: e.target.value, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                      placeholder={formData.openapi?.httpScheme === 'basic' ? 'base64-encoded-credentials' : 'bearer-token'}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* OAuth2 Configuration */}
+            {formData.openapi?.securityType === 'oauth2' && (
+              <div className="mb-4 p-4 border rounded bg-gray-50">
+                <h4 className="text-sm font-medium text-gray-700 mb-3">{t('server.openapi.oauth2Config')}</h4>
+                <div className="grid grid-cols-1 gap-3">
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.oauth2Token')}</label>
+                    <input
+                      type="password"
+                      value={formData.openapi?.oauth2Token || ''}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, oauth2Token: e.target.value, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                      placeholder="access-token"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* OpenID Connect Configuration */}
+            {formData.openapi?.securityType === 'openIdConnect' && (
+              <div className="mb-4 p-4 border rounded bg-gray-50">
+                <h4 className="text-sm font-medium text-gray-700 mb-3">{t('server.openapi.openIdConnectConfig')}</h4>
+                <div className="grid grid-cols-1 gap-3">
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.openIdConnectUrl')}</label>
+                    <input
+                      type="url"
+                      value={formData.openapi?.openIdConnectUrl || ''}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, openIdConnectUrl: e.target.value, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                      placeholder="https://example.com/.well-known/openid_configuration"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-600 mb-1">{t('server.openapi.openIdConnectToken')}</label>
+                    <input
+                      type="password"
+                      value={formData.openapi?.openIdConnectToken || ''}
+                      onChange={(e) => setFormData(prev => ({
+                        ...prev,
+                        openapi: { ...prev.openapi, openIdConnectToken: e.target.value, url: prev.openapi?.url || '' }
+                      }))}
+                      className="w-full border rounded px-2 py-1 text-sm"
+                      placeholder="id-token"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        ) : serverType === 'sse' || serverType === 'streamable-http' ? (
           <>
             <div className="mb-4">
               <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="url">
@@ -396,73 +756,75 @@ const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formEr
         )}
 
         {/* Request Options Configuration */}
-        <div className="mb-4">
-          <div
-            className="flex items-center justify-between cursor-pointer bg-gray-50 hover:bg-gray-100 p-3 rounded border"
-            onClick={() => setIsRequestOptionsExpanded(!isRequestOptionsExpanded)}
-          >
-            <label className="text-gray-700 text-sm font-bold">
-              {t('server.requestOptions')}
-            </label>
-            <span className="text-gray-500 text-sm">
-              {isRequestOptionsExpanded ? '▼' : '▶'}
-            </span>
-          </div>
-
-          {isRequestOptionsExpanded && (
-            <div className="border rounded-b p-4 bg-gray-50 border-t-0">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-gray-600 text-sm font-medium mb-1" htmlFor="timeout">
-                    {t('server.timeout')}
-                  </label>
-                  <input
-                    type="number"
-                    id="timeout"
-                    value={formData.options?.timeout || 60000}
-                    onChange={(e) => handleOptionsChange('timeout', parseInt(e.target.value) || 60000)}
-                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                    placeholder="30000"
-                    min="1000"
-                    max="300000"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">{t('server.timeoutDescription')}</p>
-                </div>
-
-                <div>
-                  <label className="block text-gray-600 text-sm font-medium mb-1" htmlFor="maxTotalTimeout">
-                    {t('server.maxTotalTimeout')}
-                  </label>
-                  <input
-                    type="number"
-                    id="maxTotalTimeout"
-                    value={formData.options?.maxTotalTimeout || ''}
-                    onChange={(e) => handleOptionsChange('maxTotalTimeout', e.target.value ? parseInt(e.target.value) : undefined)}
-                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                    placeholder="Optional"
-                    min="1000"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">{t('server.maxTotalTimeoutDescription')}</p>
-                </div>
-              </div>
-
-              <div className="mt-3">
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={formData.options?.resetTimeoutOnProgress || false}
-                    onChange={(e) => handleOptionsChange('resetTimeoutOnProgress', e.target.checked)}
-                    className="mr-2"
-                  />
-                  <span className="text-gray-600 text-sm">{t('server.resetTimeoutOnProgress')}</span>
-                </label>
-                <p className="text-xs text-gray-500 mt-1 ml-6">
-                  {t('server.resetTimeoutOnProgressDescription')}
-                </p>
-              </div>
+        {serverType !== 'openapi' && (
+          <div className="mb-4">
+            <div
+              className="flex items-center justify-between cursor-pointer bg-gray-50 hover:bg-gray-100 p-3 rounded border"
+              onClick={() => setIsRequestOptionsExpanded(!isRequestOptionsExpanded)}
+            >
+              <label className="text-gray-700 text-sm font-bold">
+                {t('server.requestOptions')}
+              </label>
+              <span className="text-gray-500 text-sm">
+                {isRequestOptionsExpanded ? '▼' : '▶'}
+              </span>
             </div>
-          )}
-        </div>
+
+            {isRequestOptionsExpanded && (
+              <div className="border rounded-b p-4 bg-gray-50 border-t-0">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-gray-600 text-sm font-medium mb-1" htmlFor="timeout">
+                      {t('server.timeout')}
+                    </label>
+                    <input
+                      type="number"
+                      id="timeout"
+                      value={formData.options?.timeout || 60000}
+                      onChange={(e) => handleOptionsChange('timeout', parseInt(e.target.value) || 60000)}
+                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                      placeholder="30000"
+                      min="1000"
+                      max="300000"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">{t('server.timeoutDescription')}</p>
+                  </div>
+
+                  <div>
+                    <label className="block text-gray-600 text-sm font-medium mb-1" htmlFor="maxTotalTimeout">
+                      {t('server.maxTotalTimeout')}
+                    </label>
+                    <input
+                      type="number"
+                      id="maxTotalTimeout"
+                      value={formData.options?.maxTotalTimeout || ''}
+                      onChange={(e) => handleOptionsChange('maxTotalTimeout', e.target.value ? parseInt(e.target.value) : undefined)}
+                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                      placeholder="Optional"
+                      min="1000"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">{t('server.maxTotalTimeoutDescription')}</p>
+                  </div>
+                </div>
+
+                <div className="mt-3">
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={formData.options?.resetTimeoutOnProgress || false}
+                      onChange={(e) => handleOptionsChange('resetTimeoutOnProgress', e.target.checked)}
+                      className="mr-2"
+                    />
+                    <span className="text-gray-600 text-sm">{t('server.resetTimeoutOnProgress')}</span>
+                  </label>
+                  <p className="text-xs text-gray-500 mt-1 ml-6">
+                    {t('server.resetTimeoutOnProgressDescription')}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
 
         <div className="flex justify-end mt-6">
           <button

frontend/src/locales/en.json

@@ -116,7 +116,33 @@
     "commandPlaceholder": "Enter command",
     "argumentsPlaceholder": "Enter arguments",
     "errorDetails": "Error Details",
-    "viewErrorDetails": "View error details"
+    "viewErrorDetails": "View error details",
+    "openapi": {
+      "inputMode": "Input Mode",
+      "inputModeUrl": "Specification URL",
+      "inputModeSchema": "JSON Schema",
+      "specUrl": "OpenAPI Specification URL",
+      "schema": "OpenAPI JSON Schema",
+      "schemaHelp": "Paste your complete OpenAPI JSON schema here",
+      "security": "Security Type",
+      "securityNone": "None",
+      "securityApiKey": "API Key",
+      "securityHttp": "HTTP Authentication",
+      "securityOAuth2": "OAuth 2.0",
+      "securityOpenIdConnect": "OpenID Connect",
+      "apiKeyConfig": "API Key Configuration",
+      "apiKeyName": "Header/Parameter Name",
+      "apiKeyIn": "Location",
+      "apiKeyValue": "API Key Value",
+      "httpAuthConfig": "HTTP Authentication Configuration",
+      "httpScheme": "Authentication Scheme",
+      "httpCredentials": "Credentials",
+      "oauth2Config": "OAuth 2.0 Configuration",
+      "oauth2Token": "Access Token",
+      "openIdConnectConfig": "OpenID Connect Configuration",
+      "openIdConnectUrl": "Discovery URL",
+      "openIdConnectToken": "ID Token"
+    }
   },
   "status": {
     "online": "Online",

frontend/src/locales/zh.json

@@ -116,7 +116,33 @@
     "commandPlaceholder": "请输入命令",
     "argumentsPlaceholder": "请输入参数",
     "errorDetails": "错误详情",
-    "viewErrorDetails": "查看错误详情"
+    "viewErrorDetails": "查看错误详情",
+    "openapi": {
+      "inputMode": "输入模式",
+      "inputModeUrl": "规范 URL",
+      "inputModeSchema": "JSON 模式",
+      "specUrl": "OpenAPI 规范 URL",
+      "schema": "OpenAPI JSON 模式",
+      "schemaHelp": "请在此处粘贴完整的 OpenAPI JSON 模式",
+      "security": "安全类型",
+      "securityNone": "无",
+      "securityApiKey": "API 密钥",
+      "securityHttp": "HTTP 认证",
+      "securityOAuth2": "OAuth 2.0",
+      "securityOpenIdConnect": "OpenID Connect",
+      "apiKeyConfig": "API 密钥配置",
+      "apiKeyName": "请求头/参数名称",
+      "apiKeyIn": "位置",
+      "apiKeyValue": "API 密钥值",
+      "httpAuthConfig": "HTTP 认证配置",
+      "httpScheme": "认证方案",
+      "httpCredentials": "凭据",
+      "oauth2Config": "OAuth 2.0 配置",
+      "oauth2Token": "访问令牌",
+      "openIdConnectConfig": "OpenID Connect 配置",
+      "openIdConnectUrl": "发现 URL",
+      "openIdConnectToken": "ID 令牌"
+    }
   },
   "status": {
     "online": "在线",

frontend/src/types/index.ts

@@ -72,7 +72,7 @@ export interface Tool {
 
 // Server config types
 export interface ServerConfig {
-  type?: 'stdio' | 'sse' | 'streamable-http';
+  type?: 'stdio' | 'sse' | 'streamable-http' | 'openapi';
   url?: string;
   command?: string;
   args?: string[];
@@ -85,6 +85,45 @@ export interface ServerConfig {
     resetTimeoutOnProgress?: boolean; // Reset timeout on progress notifications
     maxTotalTimeout?: number; // Maximum total timeout in milliseconds
   }; // MCP request options configuration
+  // OpenAPI specific configuration
+  openapi?: {
+    url?: string; // OpenAPI specification URL
+    schema?: Record<string, any>; // Complete OpenAPI JSON schema
+    version?: string; // OpenAPI version (default: '3.1.0')
+    security?: OpenAPISecurityConfig; // Security configuration for API calls
+  };
+}
+
+// OpenAPI Security Configuration
+export interface OpenAPISecurityConfig {
+  type: 'none' | 'apiKey' | 'http' | 'oauth2' | 'openIdConnect';
+  // API Key authentication
+  apiKey?: {
+    name: string; // Header/query/cookie name
+    in: 'header' | 'query' | 'cookie';
+    value: string; // The API key value
+  };
+  // HTTP authentication (Basic, Bearer, etc.)
+  http?: {
+    scheme: 'basic' | 'bearer' | 'digest'; // HTTP auth scheme
+    bearerFormat?: string; // Bearer token format (e.g., JWT)
+    credentials?: string; // Base64 encoded credentials for basic auth or bearer token
+  };
+  // OAuth2 (simplified - mainly for bearer tokens)
+  oauth2?: {
+    tokenUrl?: string; // Token endpoint for client credentials flow
+    clientId?: string;
+    clientSecret?: string;
+    scopes?: string[]; // Required scopes
+    token?: string; // Pre-obtained access token
+  };
+  // OpenID Connect
+  openIdConnect?: {
+    url: string; // OpenID Connect discovery URL
+    clientId?: string;
+    clientSecret?: string;
+    token?: string; // Pre-obtained ID token
+  };
 }
 
 // Server types
@@ -118,7 +157,7 @@ export interface ServerFormData {
   command: string;
   arguments: string;
   args?: string[]; // Added explicit args field
-  type?: 'stdio' | 'sse' | 'streamable-http'; // Added type field
+  type?: 'stdio' | 'sse' | 'streamable-http' | 'openapi'; // Added type field with openapi support
   env: EnvVar[];
   headers: EnvVar[];
   options?: {
@@ -126,6 +165,31 @@ export interface ServerFormData {
     resetTimeoutOnProgress?: boolean;
     maxTotalTimeout?: number;
   };
+  // OpenAPI specific fields
+  openapi?: {
+    url?: string;
+    schema?: string; // JSON schema as string for form input
+    inputMode?: 'url' | 'schema'; // Mode to determine input type
+    version?: string;
+    securityType?: 'none' | 'apiKey' | 'http' | 'oauth2' | 'openIdConnect';
+    // API Key fields
+    apiKeyName?: string;
+    apiKeyIn?: 'header' | 'query' | 'cookie';
+    apiKeyValue?: string;
+    // HTTP auth fields
+    httpScheme?: 'basic' | 'bearer' | 'digest';
+    httpCredentials?: string;
+    // OAuth2 fields
+    oauth2TokenUrl?: string;
+    oauth2ClientId?: string;
+    oauth2ClientSecret?: string;
+    oauth2Token?: string;
+    // OpenID Connect fields
+    openIdConnectUrl?: string;
+    openIdConnectClientId?: string;
+    openIdConnectClientSecret?: string;
+    openIdConnectToken?: string;
+  };
 }
 
 // Group form data types