🔧 fix: Fix rampant pings and rate limiting

- Skips idle connection checks in `getMCPManager` to avoid unnecessary pings. - Introduces a skipOAuthTimeout flag during initial connection to prevent timeouts during server discovery. - Uses a lightweight connection state check instead of ping to avoid rate limits. - Prevents refetch spam and rate limit errors when checking connection status. - Fixes an issue where the server connection was not being disconnected.
🔧 refactor: Clean up logging statements
2025-07-21 18:26:35 -04:00 · 2025-07-21 18:26:29 -04:00 · 2025-07-21 18:26:24 -04:00 · 2025-07-21 18:26:18 -04:00 · 2025-07-21 18:26:13 -04:00 · 2025-07-21 18:26:06 -04:00
28 changed files with 1805 additions and 481 deletions
--- a/api/config/index.js
+++ b/api/config/index.js
@@ -11,12 +11,13 @@ let flowManager = null;

 /**
 * @param {string} [userId] - Optional user ID, to avoid disconnecting the current user.
+ * @param {boolean} [skipIdleCheck] - Skip idle connection checking to avoid unnecessary pings.
 * @returns {MCPManager}
 */
-function getMCPManager(userId) {
+function getMCPManager(userId, skipIdleCheck = false) {
  if (!mcpManager) {
    mcpManager = MCPManager.getInstance();
-  } else {
+  } else if (!skipIdleCheck) {
    mcpManager.checkIdleConnections(userId);
  }
  return mcpManager;
--- a/api/server/controllers/PluginController.js
+++ b/api/server/controllers/PluginController.js
@@ -97,7 +97,6 @@ function createServerToolsCallback() {
        return;
      }
      await mcpToolsCache.set(serverName, serverTools);
-      logger.debug(`MCP tools for ${serverName} added to cache.`);
    } catch (error) {
      logger.error('Error retrieving MCP tools from cache:', error);
    }
@@ -143,7 +142,7 @@ const getAvailableTools = async (req, res) => {
    const cache = getLogStores(CacheKeys.CONFIG_STORE);
    const cachedToolsArray = await cache.get(CacheKeys.TOOLS);
    const cachedUserTools = await getCachedTools({ userId });
-    const userPlugins = convertMCPToolsToPlugins(cachedUserTools, customConfig);
+    const userPlugins = await convertMCPToolsToPlugins(cachedUserTools, customConfig, userId);

    if (cachedToolsArray && userPlugins) {
      const dedupedTools = filterUniquePlugins([...userPlugins, ...cachedToolsArray]);
@@ -202,23 +201,64 @@ const getAvailableTools = async (req, res) => {
      const serverName = parts[parts.length - 1];
      const serverConfig = customConfig?.mcpServers?.[serverName];

-      if (!serverConfig?.customUserVars) {
+      if (!serverConfig) {
        toolsOutput.push(toolToAdd);
        continue;
      }

-      const customVarKeys = Object.keys(serverConfig.customUserVars);
-
-      if (customVarKeys.length === 0) {
-        toolToAdd.authConfig = [];
-        toolToAdd.authenticated = true;
-      } else {
+      // Handle MCP servers with customUserVars (user-level auth required)
+      if (serverConfig.customUserVars) {
+        // Build authConfig for MCP tools
        toolToAdd.authConfig = Object.entries(serverConfig.customUserVars).map(([key, value]) => ({
          authField: key,
          label: value.title || key,
          description: value.description || '',
        }));
-        toolToAdd.authenticated = false;
+
+        // Check actual connection status for MCP tools with auth requirements
+        if (userId) {
+          try {
+            const mcpManager = getMCPManager(userId);
+            const connectionStatus = await mcpManager.getUserConnectionStatus(userId, serverName);
+            toolToAdd.authenticated = connectionStatus.connected;
+          } catch (error) {
+            logger.error(
+              `[getAvailableTools] Error checking connection status for ${serverName}:`,
+              error,
+            );
+            toolToAdd.authenticated = false;
+          }
+        } else {
+          // For non-authenticated requests, default to false
+          toolToAdd.authenticated = false;
+        }
+      } else {
+        // Handle app-level MCP servers (no auth required)
+        toolToAdd.authConfig = [];
+
+        // Check if the app-level connection is active
+        try {
+          const mcpManager = getMCPManager();
+
+          const appConnection = mcpManager.getConnection(serverName);
+
+          if (appConnection) {
+            const connectionState = appConnection.getConnectionState();
+
+            // For app-level connections, consider them authenticated if they're in 'connected' state
+            // This is more reliable than isConnected() which does network calls
+            toolToAdd.authenticated = connectionState === 'connected';
+          } else {
+            logger.warn(`[getAvailableTools] No app-level connection found for ${serverName}`);
+            toolToAdd.authenticated = false;
+          }
+        } catch (error) {
+          logger.error(
+            `[getAvailableTools] Error checking app-level connection status for ${serverName}:`,
+            error,
+          );
+          toolToAdd.authenticated = false;
+        }
      }

      toolsOutput.push(toolToAdd);
@@ -241,7 +281,7 @@ const getAvailableTools = async (req, res) => {
 * @param {Object} customConfig - Custom configuration for MCP servers
 * @returns {Array} Array of plugin objects
 */
-function convertMCPToolsToPlugins(functionTools, customConfig) {
+async function convertMCPToolsToPlugins(functionTools, customConfig, userId = null) {
  const plugins = [];

  for (const [toolKey, toolData] of Object.entries(functionTools)) {
@@ -257,7 +297,7 @@ function convertMCPToolsToPlugins(functionTools, customConfig) {
      name: parts[0], // Use the tool name without server suffix
      pluginKey: toolKey,
      description: functionData.description || '',
-      authenticated: true,
+      authenticated: false, // Default to false, will be updated based on connection status
      icon: undefined,
    };

@@ -265,6 +305,7 @@ function convertMCPToolsToPlugins(functionTools, customConfig) {
    const serverConfig = customConfig?.mcpServers?.[serverName];
    if (!serverConfig?.customUserVars) {
      plugin.authConfig = [];
+      plugin.authenticated = true; // No auth required
      plugins.push(plugin);
      continue;
    }
@@ -272,12 +313,30 @@ function convertMCPToolsToPlugins(functionTools, customConfig) {
    const customVarKeys = Object.keys(serverConfig.customUserVars);
    if (customVarKeys.length === 0) {
      plugin.authConfig = [];
+      plugin.authenticated = true; // No auth required
    } else {
      plugin.authConfig = Object.entries(serverConfig.customUserVars).map(([key, value]) => ({
        authField: key,
        label: value.title || key,
        description: value.description || '',
      }));
+
+      // Check actual connection status for MCP tools with auth requirements
+      if (userId) {
+        try {
+          const mcpManager = getMCPManager(userId);
+          const connectionStatus = await mcpManager.getUserConnectionStatus(userId, serverName);
+          plugin.authenticated = connectionStatus.connected;
+        } catch (error) {
+          logger.error(
+            `[convertMCPToolsToPlugins] Error checking connection status for ${serverName}:`,
+            error,
+          );
+          plugin.authenticated = false;
+        }
+      } else {
+        plugin.authenticated = false;
+      }
    }

    plugins.push(plugin);
--- a/api/server/controllers/UserController.js
+++ b/api/server/controllers/UserController.js
@@ -175,14 +175,18 @@ const updateUserPluginsController = async (req, res) => {
        try {
          const mcpManager = getMCPManager(user.id);
          if (mcpManager) {
+            // Extract server name from pluginKey (e.g., "mcp_myserver" -> "myserver")
+            const serverName = pluginKey.replace(Constants.mcp_prefix, '');
+
            logger.info(
-              `[updateUserPluginsController] Disconnecting MCP connections for user ${user.id} after plugin auth update for ${pluginKey}.`,
+              `[updateUserPluginsController] Disconnecting MCP connection for user ${user.id} and server ${serverName} after plugin auth update for ${pluginKey}.`,
            );
-            await mcpManager.disconnectUserConnections(user.id);
+            // Don't kill the server connection on revoke anymore, user can just reinitialize the server if thats what they want
+            await mcpManager.disconnectUserConnection(user.id, serverName);
          }
        } catch (disconnectError) {
          logger.error(
-            `[updateUserPluginsController] Error disconnecting MCP connections for user ${user.id} after plugin auth update:`,
+            `[updateUserPluginsController] Error disconnecting MCP connection for user ${user.id} after plugin auth update:`,
            disconnectError,
          );
          // Do not fail the request for this, but log it.
--- a/api/server/routes/config.js
+++ b/api/server/routes/config.js
@@ -106,6 +106,7 @@ router.get('/', async function (req, res) {
        const serverConfig = config.mcpServers[serverName];
        payload.mcpServers[serverName] = {
          customUserVars: serverConfig?.customUserVars || {},
+          requiresOAuth: req.app.locals.mcpOAuthRequirements?.[serverName] || false,
        };
      }
    }
--- a/api/server/routes/mcp.js
+++ b/api/server/routes/mcp.js
@@ -4,13 +4,15 @@ const { MCPOAuthHandler } = require('@librechat/api');
 const { CacheKeys, Constants } = require('librechat-data-provider');
 const { findToken, updateToken, createToken, deleteTokens } = require('~/models');
 const { setCachedTools, getCachedTools, loadCustomConfig } = require('~/server/services/Config');
-const { getUserPluginAuthValue } = require('~/server/services/PluginService');
+const { getUserPluginAuthValueByPlugin } = require('~/server/services/PluginService');
 const { getMCPManager, getFlowStateManager } = require('~/config');
 const { requireJwtAuth } = require('~/server/middleware');
 const { getLogStores } = require('~/cache');

 const router = Router();

+const suppressLogging = true;
+
 /**
 * Initiate OAuth flow
 * This endpoint is called when the user clicks the auth link in the UI
@@ -206,10 +208,91 @@ router.get('/oauth/status/:flowId', async (req, res) => {
 });

 /**
- * Reinitialize MCP server
- * This endpoint allows reinitializing a specific MCP server
+ * Get connection status for all MCP servers
+ * This endpoint returns the actual connection status from MCPManager
 */
-router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
+router.get('/connection/status', requireJwtAuth, async (req, res) => {
+  try {
+    const user = req.user;
+
+    if (!user?.id) {
+      return res.status(401).json({ error: 'User not authenticated' });
+    }
+
+    const mcpManager = getMCPManager(null, true); // Skip idle checks to avoid ping spam
+    const connectionStatus = {};
+
+    // Get all MCP server names from custom config
+    const config = await loadCustomConfig(suppressLogging);
+    const mcpConfig = config?.mcpServers;
+
+    if (mcpConfig) {
+      for (const [serverName, config] of Object.entries(mcpConfig)) {
+        try {
+          // Check if this is an app-level connection (exists in mcpManager.connections)
+          const appConnection = mcpManager.getConnection(serverName);
+          const hasAppConnection = !!appConnection;
+
+          // Check if this is a user-level connection (exists in mcpManager.userConnections)
+          const userConnection = mcpManager.getUserConnectionIfExists(user.id, serverName);
+          const hasUserConnection = !!userConnection;
+
+          // Use lightweight connection state check instead of ping-based isConnected()
+          let connected = false;
+          if (hasAppConnection) {
+            // Check connection state without ping to avoid rate limits
+            connected = appConnection.connectionState === 'connected';
+          } else if (hasUserConnection) {
+            // Check connection state without ping to avoid rate limits
+            connected = userConnection.connectionState === 'connected';
+          }
+
+          // Determine if this server requires user authentication
+          const hasAuthConfig =
+            config.customUserVars && Object.keys(config.customUserVars).length > 0;
+          const requiresOAuth = req.app.locals.mcpOAuthRequirements?.[serverName] || false;
+
+          connectionStatus[serverName] = {
+            connected,
+            hasAuthConfig,
+            hasConnection: hasAppConnection || hasUserConnection,
+            isAppLevel: hasAppConnection,
+            isUserLevel: hasUserConnection,
+            requiresOAuth,
+          };
+        } catch (error) {
+          logger.error(
+            `[MCP Connection Status] Error checking connection for ${serverName}:`,
+            error,
+          );
+          connectionStatus[serverName] = {
+            connected: false,
+            hasAuthConfig: config.customUserVars && Object.keys(config.customUserVars).length > 0,
+            hasConnection: false,
+            isAppLevel: false,
+            isUserLevel: false,
+            requiresOAuth: req.app.locals.mcpOAuthRequirements?.[serverName] || false,
+            error: error.message,
+          };
+        }
+      }
+    }
+
+    res.json({
+      success: true,
+      connectionStatus,
+    });
+  } catch (error) {
+    logger.error('[MCP Connection Status] Failed to get connection status', error);
+    res.status(500).json({ error: 'Failed to get connection status' });
+  }
+});
+
+/**
+ * Check which authentication values exist for a specific MCP server
+ * This endpoint returns only boolean flags indicating if values are set, not the actual values
+ */
+router.get('/:serverName/auth-values', requireJwtAuth, async (req, res) => {
  try {
    const { serverName } = req.params;
    const user = req.user;
@@ -218,10 +301,206 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
      return res.status(401).json({ error: 'User not authenticated' });
    }

+    const config = await loadCustomConfig(suppressLogging);
+    if (!config || !config.mcpServers || !config.mcpServers[serverName]) {
+      return res.status(404).json({
+        error: `MCP server '${serverName}' not found in configuration`,
+      });
+    }
+
+    const serverConfig = config.mcpServers[serverName];
+    const pluginKey = `${Constants.mcp_prefix}${serverName}`;
+    const authValueFlags = {};
+
+    // Check existence of saved values for each custom user variable (don't fetch actual values)
+    if (serverConfig.customUserVars && typeof serverConfig.customUserVars === 'object') {
+      for (const varName of Object.keys(serverConfig.customUserVars)) {
+        try {
+          const value = await getUserPluginAuthValueByPlugin(user.id, varName, pluginKey, false);
+          // Only store boolean flag indicating if value exists
+          authValueFlags[varName] = !!(value && value.length > 0);
+        } catch (err) {
+          logger.error(
+            `[MCP Auth Value Flags] Error checking ${varName} for user ${user.id}:`,
+            err,
+          );
+          // Default to false if we can't check
+          authValueFlags[varName] = false;
+        }
+      }
+    }
+
+    res.json({
+      success: true,
+      serverName,
+      authValueFlags,
+    });
+  } catch (error) {
+    logger.error(
+      `[MCP Auth Value Flags] Failed to check auth value flags for ${req.params.serverName}`,
+      error,
+    );
+    res.status(500).json({ error: 'Failed to check auth value flags' });
+  }
+});
+
+/**
+ * Check if a specific MCP server requires OAuth
+ * This endpoint checks if a specific MCP server requires OAuth authentication
+ */
+router.get('/:serverName/oauth/required', requireJwtAuth, async (req, res) => {
+  try {
+    const { serverName } = req.params;
+    const user = req.user;
+
+    if (!user?.id) {
+      return res.status(401).json({ error: 'User not authenticated' });
+    }
+
+    const mcpManager = getMCPManager();
+    const requiresOAuth = await mcpManager.isOAuthRequired(serverName);
+
+    res.json({
+      success: true,
+      serverName,
+      requiresOAuth,
+    });
+  } catch (error) {
+    logger.error(
+      `[MCP OAuth Required] Failed to check OAuth requirement for ${req.params.serverName}`,
+      error,
+    );
+    res.status(500).json({ error: 'Failed to check OAuth requirement' });
+  }
+});
+
+/**
+ * Complete MCP server reinitialization after OAuth
+ * This endpoint completes the reinitialization process after OAuth authentication
+ */
+router.post('/:serverName/reinitialize/complete', requireJwtAuth, async (req, res) => {
+  let responseSent = false;
+
+  try {
+    const { serverName } = req.params;
+    const user = req.user;
+
+    if (!user?.id) {
+      responseSent = true;
+      return res.status(401).json({ error: 'User not authenticated' });
+    }
+
+    logger.info(`[MCP Complete Reinitialize] Starting completion for ${serverName}`);
+
+    const mcpManager = getMCPManager();
+
+    // Wait for connection to be established via event-driven approach
+    const userConnection = await new Promise((resolve, reject) => {
+      // Set a reasonable timeout (10 seconds)
+      const timeout = setTimeout(() => {
+        mcpManager.removeListener('connectionEstablished', connectionHandler);
+        reject(new Error('Timeout waiting for connection establishment'));
+      }, 10000);
+
+      const connectionHandler = ({
+        userId: eventUserId,
+        serverName: eventServerName,
+        connection,
+      }) => {
+        if (eventUserId === user.id && eventServerName === serverName) {
+          clearTimeout(timeout);
+          mcpManager.removeListener('connectionEstablished', connectionHandler);
+          resolve(connection);
+        }
+      };
+
+      // Check if connection already exists
+      const existingConnection = mcpManager.getUserConnectionIfExists(user.id, serverName);
+      if (existingConnection) {
+        clearTimeout(timeout);
+        resolve(existingConnection);
+        return;
+      }
+
+      // Listen for the connection establishment event
+      mcpManager.on('connectionEstablished', connectionHandler);
+    });
+
+    if (!userConnection) {
+      responseSent = true;
+      return res.status(404).json({ error: 'User connection not found' });
+    }
+
+    const userTools = (await getCachedTools({ userId: user.id })) || {};
+
+    // Remove any old tools from this server in the user's cache
+    const mcpDelimiter = Constants.mcp_delimiter;
+    for (const key of Object.keys(userTools)) {
+      if (key.endsWith(`${mcpDelimiter}${serverName}`)) {
+        delete userTools[key];
+      }
+    }
+
+    // Add the new tools from this server
+    const tools = await userConnection.fetchTools();
+    for (const tool of tools) {
+      const name = `${tool.name}${Constants.mcp_delimiter}${serverName}`;
+      userTools[name] = {
+        type: 'function',
+        ['function']: {
+          name,
+          description: tool.description,
+          parameters: tool.inputSchema,
+        },
+      };
+    }
+
+    // Save the updated user tool cache
+    await setCachedTools(userTools, { userId: user.id });
+
+    responseSent = true;
+    res.json({
+      success: true,
+      message: `MCP server '${serverName}' reinitialized successfully`,
+      serverName,
+    });
+  } catch (error) {
+    logger.error(
+      `[MCP Complete Reinitialize] Error completing reinitialization for ${req.params.serverName}:`,
+      error,
+    );
+
+    if (!responseSent) {
+      res.status(500).json({
+        success: false,
+        message: 'Failed to complete MCP server reinitialization',
+        serverName: req.params.serverName,
+      });
+    }
+  }
+});
+
+/**
+ * Reinitialize MCP server
+ * This endpoint allows reinitializing a specific MCP server
+ */
+router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
+  let responseSent = false;
+
+  try {
+    const { serverName } = req.params;
+    const user = req.user;
+
+    if (!user?.id) {
+      responseSent = true;
+      return res.status(401).json({ error: 'User not authenticated' });
+    }
+
    logger.info(`[MCP Reinitialize] Reinitializing server: ${serverName}`);

-    const config = await loadCustomConfig();
+    const config = await loadCustomConfig(suppressLogging);
    if (!config || !config.mcpServers || !config.mcpServers[serverName]) {
+      responseSent = true;
      return res.status(404).json({
        error: `MCP server '${serverName}' not found in configuration`,
      });
@@ -231,6 +510,21 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
    const flowManager = getFlowStateManager(flowsCache);
    const mcpManager = getMCPManager();

+    // Clean up any stale OAuth flows for this server
+    try {
+      const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
+      const existingFlow = await flowManager.getFlowState(flowId, 'mcp_oauth');
+      if (existingFlow && existingFlow.status === 'PENDING') {
+        logger.info(`[MCP Reinitialize] Cleaning up stale OAuth flow for ${serverName}`);
+        await flowManager.failFlow(flowId, 'mcp_oauth', new Error('OAuth flow interrupted'));
+      }
+    } catch (error) {
+      logger.warn(
+        `[MCP Reinitialize] Error cleaning up stale OAuth flow for ${serverName}:`,
+        error,
+      );
+    }
+
    await mcpManager.disconnectServer(serverName);
    logger.info(`[MCP Reinitialize] Disconnected existing server: ${serverName}`);

@@ -240,7 +534,8 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
    if (serverConfig.customUserVars && typeof serverConfig.customUserVars === 'object') {
      for (const varName of Object.keys(serverConfig.customUserVars)) {
        try {
-          const value = await getUserPluginAuthValue(user.id, varName, false);
+          const pluginKey = `${Constants.mcp_prefix}${serverName}`;
+          const value = await getUserPluginAuthValueByPlugin(user.id, varName, pluginKey, false);
          if (value) {
            customUserVars[varName] = value;
          }
@@ -251,6 +546,7 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
    }

    let userConnection = null;
+
    try {
      userConnection = await mcpManager.getUserConnection({
        user,
@@ -263,9 +559,78 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
          createToken,
          deleteTokens,
        },
+        oauthStart: (authURL) => {
+          // This will be called if OAuth is required
+          responseSent = true;
+          logger.info(`[MCP Reinitialize] OAuth required for ${serverName}, auth URL: ${authURL}`);
+
+          // Get the flow ID for polling
+          const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
+
+          // Return the OAuth response immediately - client will poll for completion
+          res.json({
+            success: false,
+            oauthRequired: true,
+            authURL,
+            flowId,
+            message: `OAuth authentication required for MCP server '${serverName}'`,
+            serverName,
+          });
+        },
+        oauthEnd: () => {
+          // This will be called when OAuth flow completes
+          logger.info(`[MCP Reinitialize] OAuth flow completed for ${serverName}`);
+        },
      });
+
+      // If response was already sent for OAuth, don't continue
+      if (responseSent) {
+        return;
+      }
    } catch (err) {
      logger.error(`[MCP Reinitialize] Error initializing MCP server ${serverName} for user:`, err);
+
+      // Check if this is an OAuth error
+      if (err.message && err.message.includes('OAuth required')) {
+        // Try to get the OAuth URL from the flow manager
+        try {
+          const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
+          const existingFlow = await flowManager.getFlowState(flowId, 'mcp_oauth');
+
+          if (existingFlow && existingFlow.metadata) {
+            const { serverUrl, oauth: oauthConfig } = existingFlow.metadata;
+            if (serverUrl && oauthConfig) {
+              const { authorizationUrl: authUrl } = await MCPOAuthHandler.initiateOAuthFlow(
+                serverName,
+                serverUrl,
+                user.id,
+                oauthConfig,
+              );
+
+              return res.json({
+                success: false,
+                oauthRequired: true,
+                authURL: authUrl,
+                flowId,
+                message: `OAuth authentication required for MCP server '${serverName}'`,
+                serverName,
+              });
+            }
+          }
+        } catch (oauthErr) {
+          logger.error(`[MCP Reinitialize] Error getting OAuth URL for ${serverName}:`, oauthErr);
+        }
+
+        responseSent = true;
+        return res.status(401).json({
+          success: false,
+          oauthRequired: true,
+          message: `OAuth authentication required for MCP server '${serverName}'`,
+          serverName,
+        });
+      }
+
+      responseSent = true;
      return res.status(500).json({ error: 'Failed to reinitialize MCP server for user' });
    }

@@ -296,6 +661,7 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
    // Save the updated user tool cache
    await setCachedTools(userTools, { userId: user.id });

+    responseSent = true;
    res.json({
      success: true,
      message: `MCP server '${serverName}' reinitialized successfully`,
@@ -303,7 +669,9 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
    });
  } catch (error) {
    logger.error('[MCP Reinitialize] Unexpected error', error);
-    res.status(500).json({ error: 'Internal server error' });
+    if (!responseSent) {
+      res.status(500).json({ error: 'Internal server error' });
+    }
  }
 });

--- a/api/server/services/Config/loadCustomConfig.js
+++ b/api/server/services/Config/loadCustomConfig.js
@@ -23,9 +23,10 @@ let i = 0;
 * Load custom configuration files and caches the object if the `cache` field at root is true.
 * Validation via parsing the config file with the config schema.
 * @function loadCustomConfig
+ * @param {boolean} [suppressLogging=false] - If true, suppresses the verbose config logging of the entire config when called.
 * @returns {Promise<TCustomConfig | null>} A promise that resolves to null or the custom config object.
 * */
-async function loadCustomConfig() {
+async function loadCustomConfig(suppressLogging = false) {
  // Use CONFIG_PATH if set, otherwise fallback to defaultConfigPath
  const configPath = process.env.CONFIG_PATH || defaultConfigPath;

@@ -108,9 +109,11 @@ https://www.librechat.ai/docs/configuration/stt_tts`);

    return null;
  } else {
-    logger.info('Custom config file loaded:');
-    logger.info(JSON.stringify(customConfig, null, 2));
-    logger.debug('Custom config:', customConfig);
+    if (!suppressLogging) {
+      logger.info('Custom config file loaded:');
+      logger.info(JSON.stringify(customConfig, null, 2));
+      logger.debug('Custom config:', customConfig);
+    }
  }

  (customConfig.endpoints?.custom ?? [])
--- a/api/server/services/PluginService.js
+++ b/api/server/services/PluginService.js
@@ -41,6 +41,38 @@ const getUserPluginAuthValue = async (userId, authField, throwError = true) => {
  }
 };

+/**
+ * Asynchronously retrieves and decrypts the authentication value for a user's specific plugin, based on a specified authentication field and plugin key.
+ *
+ * @param {string} userId - The unique identifier of the user for whom the plugin authentication value is to be retrieved.
+ * @param {string} authField - The specific authentication field (e.g., 'API_KEY', 'URL') whose value is to be retrieved and decrypted.
+ * @param {string} pluginKey - The plugin key to filter by (e.g., 'mcp_github-mcp').
+ * @param {boolean} throwError - Whether to throw an error if the authentication value does not exist. Defaults to `true`.
+ * @returns {Promise<string|null>} A promise that resolves to the decrypted authentication value if found, or `null` if no such authentication value exists for the given user, field, and plugin.
+ *
+ * @throws {Error} Throws an error if there's an issue during the retrieval or decryption process, or if the authentication value does not exist.
+ * @async
+ */
+const getUserPluginAuthValueByPlugin = async (userId, authField, pluginKey, throwError = true) => {
+  try {
+    const pluginAuth = await findOnePluginAuth({ userId, authField, pluginKey });
+    if (!pluginAuth) {
+      throw new Error(
+        `No plugin auth ${authField} found for user ${userId} and plugin ${pluginKey}`,
+      );
+    }
+
+    const decryptedValue = await decrypt(pluginAuth.value);
+    return decryptedValue;
+  } catch (err) {
+    if (!throwError) {
+      return null;
+    }
+    logger.error('[getUserPluginAuthValueByPlugin]', err);
+    throw err;
+  }
+};
+
 // const updateUserPluginAuth = async (userId, authField, pluginKey, value) => {
 //   try {
 //     const encryptedValue = encrypt(value);
@@ -119,6 +151,7 @@ const deleteUserPluginAuth = async (userId, authField, all = false, pluginKey) =

 module.exports = {
  getUserPluginAuthValue,
+  getUserPluginAuthValueByPlugin,
  updateUserPluginAuth,
  deleteUserPluginAuth,
 };
--- a/api/server/services/initializeMCPs.js
+++ b/api/server/services/initializeMCPs.js
@@ -10,6 +10,15 @@ const { getLogStores } = require('~/cache');
 * @param {import('express').Application} app - Express app instance
 */
 async function initializeMCPs(app) {
+  // TEMPORARY: Reset all OAuth tokens for fresh testing
+  try {
+    logger.info('[MCP] Resetting all OAuth tokens for fresh testing...');
+    await deleteTokens({});
+    logger.info('[MCP] All OAuth tokens reset successfully');
+  } catch (error) {
+    logger.error('[MCP] Error resetting OAuth tokens:', error);
+  }
+
  const mcpServers = app.locals.mcpConfig;
  if (!mcpServers) {
    return;
@@ -36,7 +45,7 @@ async function initializeMCPs(app) {
  const flowManager = flowsCache ? getFlowStateManager(flowsCache) : null;

  try {
-    await mcpManager.initializeMCPs({
+    const oauthRequirements = await mcpManager.initializeMCPs({
      mcpServers: filteredServers,
      flowManager,
      tokenMethods: {
@@ -64,6 +73,9 @@ async function initializeMCPs(app) {
    logger.debug('Cleared tools array cache after MCP initialization');

    logger.info('MCP servers initialized successfully');
+
+    // Store OAuth requirement information in app locals for client access
+    app.locals.mcpOAuthRequirements = oauthRequirements;
  } catch (error) {
    logger.error('Failed to initialize MCP servers:', error);
  }
--- a/client/src/components/Chat/Input/MCPSelect.tsx
+++ b/client/src/components/Chat/Input/MCPSelect.tsx
@@ -1,9 +1,12 @@
-import React, { memo, useCallback, useState } from 'react';
-import { SettingsIcon } from 'lucide-react';
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { SettingsIcon, PlugZap } from 'lucide-react';
 import { Constants } from 'librechat-data-provider';
 import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
+import { useMCPConnectionStatusQuery } from '~/data-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys } from 'librechat-data-provider';
 import type { TUpdateUserPlugins, TPlugin } from 'librechat-data-provider';
-import MCPConfigDialog, { type ConfigFieldDetail } from '~/components/ui/MCPConfigDialog';
+import { MCPConfigDialog, type ConfigFieldDetail } from '~/components/ui/MCP';
 import { useToastContext, useBadgeRowContext } from '~/Providers';
 import MultiSelect from '~/components/ui/MultiSelect';
 import { MCPIcon } from '~/components/svg';
@@ -18,15 +21,44 @@ function MCPSelect() {
  const localize = useLocalize();
  const { showToast } = useToastContext();
  const { mcpSelect, startupConfig } = useBadgeRowContext();
-  const { mcpValues, setMCPValues, mcpServerNames, mcpToolDetails, isPinned } = mcpSelect;
+  const { mcpValues, setMCPValues, isPinned } = mcpSelect;
+
+  // Get real connection status from MCPManager
+  const { data: statusQuery } = useMCPConnectionStatusQuery();
+  const mcpServerStatuses = useMemo(
+    () => statusQuery?.connectionStatus || {},
+    [statusQuery?.connectionStatus],
+  );
+
+  console.log('mcpServerStatuses', mcpServerStatuses);
+  console.log('statusQuery', statusQuery);

  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
  const [selectedToolForConfig, setSelectedToolForConfig] = useState<TPlugin | null>(null);

+  const queryClient = useQueryClient();
+
  const updateUserPluginsMutation = useUpdateUserPluginsMutation({
-    onSuccess: () => {
-      setIsConfigModalOpen(false);
+    onSuccess: async () => {
      showToast({ message: localize('com_nav_mcp_vars_updated'), status: 'success' });
+
+      // // For 'uninstall' actions (revoke), remove the server from selected values
+      // if (variables.action === 'uninstall') {
+      //   const serverName = variables.pluginKey.replace(Constants.mcp_prefix, '');
+      //   const currentValues = mcpValues ?? [];
+      //   const filteredValues = currentValues.filter((name) => name !== serverName);
+      //   setMCPValues(filteredValues);
+      // }
+
+      // Wait for all refetches to complete before ending loading state
+      await Promise.all([
+        queryClient.invalidateQueries([QueryKeys.tools]),
+        queryClient.refetchQueries([QueryKeys.tools]),
+        queryClient.invalidateQueries([QueryKeys.mcpAuthValues]),
+        queryClient.refetchQueries([QueryKeys.mcpAuthValues]),
+        queryClient.invalidateQueries([QueryKeys.mcpConnectionStatus]),
+        queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
+      ]);
    },
    onError: (error: unknown) => {
      console.error('Error updating MCP auth:', error);
@@ -53,10 +85,12 @@ function MCPSelect() {
  const handleConfigSave = useCallback(
    (targetName: string, authData: Record<string, string>) => {
      if (selectedToolForConfig && selectedToolForConfig.name === targetName) {
-        const basePluginKey = getBaseMCPPluginKey(selectedToolForConfig.pluginKey);
-
+        // Use the pluginKey directly since it's already in the correct format
+        console.log(
+          `[MCP Select] Saving config for ${targetName}, pluginKey: ${`${Constants.mcp_prefix}${targetName}`}`,
+        );
        const payload: TUpdateUserPlugins = {
-          pluginKey: basePluginKey,
+          pluginKey: `${Constants.mcp_prefix}${targetName}`,
          action: 'install',
          auth: authData,
        };
@@ -69,10 +103,12 @@ function MCPSelect() {
  const handleConfigRevoke = useCallback(
    (targetName: string) => {
      if (selectedToolForConfig && selectedToolForConfig.name === targetName) {
-        const basePluginKey = getBaseMCPPluginKey(selectedToolForConfig.pluginKey);
-
+        // Use the pluginKey directly since it's already in the correct format
+        console.log(
+          `[MCP Select] Revoking config for ${targetName}, pluginKey: ${`${Constants.mcp_prefix}${targetName}`}`,
+        );
        const payload: TUpdateUserPlugins = {
-          pluginKey: basePluginKey,
+          pluginKey: `${Constants.mcp_prefix}${targetName}`,
          action: 'uninstall',
          auth: {},
        };
@@ -82,49 +118,138 @@ function MCPSelect() {
    [selectedToolForConfig, updateUserPluginsMutation],
  );

+  // Create stable callback references to prevent stale closures
+  const handleSave = useCallback(
+    (authData: Record<string, string>) => {
+      if (selectedToolForConfig) {
+        handleConfigSave(selectedToolForConfig.name, authData);
+      }
+    },
+    [selectedToolForConfig, handleConfigSave],
+  );
+
+  const handleRevoke = useCallback(() => {
+    if (selectedToolForConfig) {
+      handleConfigRevoke(selectedToolForConfig.name);
+    }
+  }, [selectedToolForConfig, handleConfigRevoke]);
+
+  // Only allow connected servers to be selected
+  const handleSetSelectedValues = useCallback(
+    (values: string[]) => {
+      // Filter to only include connected servers
+      const connectedValues = values.filter((serverName) => {
+        const serverStatus = mcpServerStatuses?.[serverName];
+        return serverStatus?.connected || false;
+      });
+      setMCPValues(connectedValues);
+    },
+    [setMCPValues, mcpServerStatuses],
+  );
+
  const renderItemContent = useCallback(
    (serverName: string, defaultContent: React.ReactNode) => {
-      const tool = mcpToolDetails?.find((t) => t.name === serverName);
-      const hasAuthConfig = tool?.authConfig && tool.authConfig.length > 0;
+      const serverStatus = mcpServerStatuses?.[serverName];
+      const connected = serverStatus?.connected || false;
+      const hasAuthConfig = serverStatus?.hasAuthConfig || false;

-      // Common wrapper for the main content (check mark + text)
-      // Ensures Check & Text are adjacent and the group takes available space.
-      const mainContentWrapper = (
-        <div className="flex flex-grow items-center">{defaultContent}</div>
-      );
+      // Icon logic:
+      // - connected with auth config = gear (green)
+      // - connected without auth config = no icon (just text)
+      // - not connected = zap (orange)
+      let icon: React.ReactNode = null;
+      let tooltip = 'Configure server';

-      if (tool && hasAuthConfig) {
-        return (
-          <div className="flex w-full items-center justify-between">
-            {mainContentWrapper}
+      if (connected) {
+        if (hasAuthConfig) {
+          icon = <SettingsIcon className="h-4 w-4 text-green-500" />;
+          tooltip = 'Configure connected server';
+        } else {
+          // No icon for connected servers without auth config
+          tooltip = 'Connected server (no configuration needed)';
+        }
+      } else {
+        icon = <PlugZap className="h-4 w-4 text-orange-400" />;
+        tooltip = 'Configure server';
+      }
+
+      const onClick = () => {
+        const serverConfig = startupConfig?.mcpServers?.[serverName];
+        if (serverConfig) {
+          const serverTool = {
+            name: serverName,
+            pluginKey: `${Constants.mcp_prefix}${serverName}`,
+            authConfig: Object.entries(serverConfig.customUserVars || {}).map(([key, config]) => ({
+              authField: key,
+              label: config.title,
+              description: config.description,
+              requiresOAuth: serverConfig.requiresOAuth || false,
+            })),
+            authenticated: connected,
+          };
+          setSelectedToolForConfig(serverTool);
+          setIsConfigModalOpen(true);
+        }
+      };
+
+      return (
+        <div className="flex w-full items-center justify-between">
+          <div className={`flex flex-grow items-center ${!connected ? 'opacity-50' : ''}`}>
+            {defaultContent}
+          </div>
+          {icon && (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
-                setSelectedToolForConfig(tool);
-                setIsConfigModalOpen(true);
+                onClick();
              }}
              className="ml-2 flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-surface-secondary"
-              aria-label={`Configure ${serverName}`}
+              aria-label={tooltip}
+              title={tooltip}
            >
-              <SettingsIcon className={`h-4 w-4 ${tool.authenticated ? 'text-green-500' : ''}`} />
+              {icon}
            </button>
-          </div>
-        );
-      }
-      // For items without a settings icon, return the consistently wrapped main content.
-      return mainContentWrapper;
+          )}
+        </div>
+      );
    },
-    [mcpToolDetails, setSelectedToolForConfig, setIsConfigModalOpen],
+    [mcpServerStatuses, setSelectedToolForConfig, setIsConfigModalOpen, startupConfig],
  );

-  // Don't render if no servers are selected and not pinned
-  if ((!mcpValues || mcpValues.length === 0) && !isPinned) {
+  // Memoize schema and initial values to prevent unnecessary re-renders
+  const fieldsSchema = useMemo(() => {
+    const schema: Record<string, ConfigFieldDetail> = {};
+    if (selectedToolForConfig?.authConfig) {
+      selectedToolForConfig.authConfig.forEach((field) => {
+        schema[field.authField] = {
+          title: field.label,
+          description: field.description,
+        };
+      });
+    }
+    return schema;
+  }, [selectedToolForConfig?.authConfig]);
+
+  const initialValues = useMemo(() => {
+    const initial: Record<string, string> = {};
+    // Always start with empty values for security - never prefill sensitive data
+    if (selectedToolForConfig?.authConfig) {
+      selectedToolForConfig.authConfig.forEach((field) => {
+        initial[field.authField] = '';
+      });
+    }
+    return initial;
+  }, [selectedToolForConfig?.authConfig]);
+
+  // Don't render if no MCP servers are available at all
+  if (!mcpServerStatuses || Object.keys(mcpServerStatuses).length === 0) {
    return null;
  }

-  if (!mcpToolDetails || mcpToolDetails.length === 0) {
+  // Don't render if no servers are selected and not pinned
+  if ((!mcpValues || mcpValues.length === 0) && !isPinned) {
    return null;
  }

@@ -133,9 +258,9 @@ function MCPSelect() {
  return (
    <>
      <MultiSelect
-        items={mcpServerNames}
+        items={Object.keys(mcpServerStatuses) || []}
        selectedValues={mcpValues ?? []}
-        setSelectedValues={setMCPValues}
+        setSelectedValues={handleSetSelectedValues}
        defaultSelectedValues={mcpValues ?? []}
        renderSelectedValues={renderSelectedValues}
        renderItemContent={renderItemContent}
@@ -151,39 +276,13 @@ function MCPSelect() {
          isOpen={isConfigModalOpen}
          onOpenChange={setIsConfigModalOpen}
          serverName={selectedToolForConfig.name}
-          fieldsSchema={(() => {
-            const schema: Record<string, ConfigFieldDetail> = {};
-            if (selectedToolForConfig?.authConfig) {
-              selectedToolForConfig.authConfig.forEach((field) => {
-                schema[field.authField] = {
-                  title: field.label,
-                  description: field.description,
-                };
-              });
-            }
-            return schema;
-          })()}
-          initialValues={(() => {
-            const initial: Record<string, string> = {};
-            // Note: Actual initial values might need to be fetched if they are stored user-specifically
-            if (selectedToolForConfig?.authConfig) {
-              selectedToolForConfig.authConfig.forEach((field) => {
-                initial[field.authField] = ''; // Or fetched value
-              });
-            }
-            return initial;
-          })()}
-          onSave={(authData) => {
-            if (selectedToolForConfig) {
-              handleConfigSave(selectedToolForConfig.name, authData);
-            }
-          }}
-          onRevoke={() => {
-            if (selectedToolForConfig) {
-              handleConfigRevoke(selectedToolForConfig.name);
-            }
-          }}
+          fieldsSchema={fieldsSchema}
+          initialValues={initialValues}
+          onSave={handleSave}
+          onRevoke={handleRevoke}
          isSubmitting={updateUserPluginsMutation.isLoading}
+          isConnected={mcpServerStatuses?.[selectedToolForConfig.name]?.connected || false}
+          authConfig={selectedToolForConfig.authConfig}
        />
      )}
    </>
--- a/client/src/components/SidePanel/MCP/MCPPanel.tsx
+++ b/client/src/components/SidePanel/MCP/MCPPanel.tsx
@@ -1,25 +1,21 @@
-import { Constants } from 'librechat-data-provider';
-import { ChevronLeft, RefreshCw } from 'lucide-react';
-import { useForm, Controller } from 'react-hook-form';
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import {
-  useUpdateUserPluginsMutation,
-  useReinitializeMCPServerMutation,
-} from 'librechat-data-provider/react-query';
+import { ChevronLeft } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import React, { useState, useCallback, useMemo } from 'react';
+import { Constants, QueryKeys } from 'librechat-data-provider';
+import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
 import type { TUpdateUserPlugins } from 'librechat-data-provider';
-import { Button, Input, Label } from '~/components/ui';
+import {
+  CustomUserVarsSection,
+  ServerInitializationSection,
+  type ConfigFieldDetail,
+} from '~/components/ui/MCP';
+import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
 import { useGetStartupConfig } from '~/data-provider';
 import MCPPanelSkeleton from './MCPPanelSkeleton';
 import { useToastContext } from '~/Providers';
+import { Button } from '~/components/ui';
 import { useLocalize } from '~/hooks';

-interface ServerConfigWithVars {
-  serverName: string;
-  config: {
-    customUserVars: Record<string, { title: string; description: string }>;
-  };
-}
-
 export default function MCPPanel() {
  const localize = useLocalize();
  const { showToast } = useToastContext();
@@ -27,8 +23,14 @@ export default function MCPPanel() {
  const [selectedServerNameForEditing, setSelectedServerNameForEditing] = useState<string | null>(
    null,
  );
-  const [rotatingServers, setRotatingServers] = useState<Set<string>>(new Set());
-  const reinitializeMCPMutation = useReinitializeMCPServerMutation();
+  const queryClient = useQueryClient();
+
+  // Get real connection status from MCPManager
+  const { data: statusQuery } = useMCPConnectionStatusQuery();
+  const mcpServerStatuses = useMemo(
+    () => statusQuery?.connectionStatus || {},
+    [statusQuery?.connectionStatus],
+  );

  const mcpServerDefinitions = useMemo(() => {
    if (!startupConfig?.mcpServers) {
@@ -50,11 +52,21 @@ export default function MCPPanel() {
  }, [startupConfig?.mcpServers]);

  const updateUserPluginsMutation = useUpdateUserPluginsMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
      showToast({ message: localize('com_nav_mcp_vars_updated'), status: 'success' });
+
+      // Wait for all queries to refetch before resolving loading state
+      await Promise.all([
+        queryClient.invalidateQueries([QueryKeys.tools]),
+        queryClient.refetchQueries([QueryKeys.tools]),
+        queryClient.invalidateQueries([QueryKeys.mcpAuthValues]),
+        queryClient.refetchQueries([QueryKeys.mcpAuthValues]),
+        queryClient.invalidateQueries([QueryKeys.mcpConnectionStatus]),
+        queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
+      ]);
    },
-    onError: (error) => {
-      console.error('Error updating MCP custom user variables:', error);
+    onError: (error: unknown) => {
+      console.error('Error updating MCP auth:', error);
      showToast({
        message: localize('com_nav_mcp_vars_update_error'),
        status: 'error',
@@ -94,32 +106,40 @@ export default function MCPPanel() {
    setSelectedServerNameForEditing(null);
  };

-  const handleReinitializeServer = useCallback(
-    async (serverName: string) => {
-      setRotatingServers((prev) => new Set(prev).add(serverName));
-      try {
-        await reinitializeMCPMutation.mutateAsync(serverName);
-        showToast({
-          message: `MCP server '${serverName}' reinitialized successfully`,
-          status: 'success',
-        });
-      } catch (error) {
-        console.error('Error reinitializing MCP server:', error);
-        showToast({
-          message: 'Failed to reinitialize MCP server',
-          status: 'error',
-        });
-      } finally {
-        setRotatingServers((prev) => {
-          const next = new Set(prev);
-          next.delete(serverName);
-          return next;
-        });
+  // Create save and revoke handlers with latest state
+  const handleSave = useCallback(
+    (updatedValues: Record<string, string>) => {
+      if (selectedServerNameForEditing) {
+        handleSaveServerVars(selectedServerNameForEditing, updatedValues);
      }
    },
-    [showToast, reinitializeMCPMutation],
+    [selectedServerNameForEditing, handleSaveServerVars],
  );

+  const handleRevoke = useCallback(() => {
+    if (selectedServerNameForEditing) {
+      handleRevokeServerVars(selectedServerNameForEditing);
+    }
+  }, [selectedServerNameForEditing, handleRevokeServerVars]);
+
+  // Prepare data for MCPConfigDialog
+  const selectedServer = useMemo(() => {
+    if (!selectedServerNameForEditing) return null;
+    return mcpServerDefinitions.find((s) => s.serverName === selectedServerNameForEditing);
+  }, [selectedServerNameForEditing, mcpServerDefinitions]);
+
+  const fieldsSchema = useMemo(() => {
+    if (!selectedServer) return {};
+    const schema: Record<string, ConfigFieldDetail> = {};
+    Object.entries(selectedServer.config.customUserVars).forEach(([key, value]) => {
+      schema[key] = {
+        title: value.title,
+        description: value.description,
+      };
+    });
+    return schema;
+  }, [selectedServer]);
+
  if (startupConfigLoading) {
    return <MCPPanelSkeleton />;
  }
@@ -132,21 +152,11 @@ export default function MCPPanel() {
    );
  }

-  if (selectedServerNameForEditing) {
-    // Editing View
-    const serverBeingEdited = mcpServerDefinitions.find(
-      (s) => s.serverName === selectedServerNameForEditing,
-    );
-
-    if (!serverBeingEdited) {
-      // Fallback to list view if server not found
-      setSelectedServerNameForEditing(null);
-      return (
-        <div className="p-4 text-center text-sm text-gray-500">
-          {localize('com_ui_error')}: {localize('com_ui_mcp_server_not_found')}
-        </div>
-      );
-    }
+  if (selectedServerNameForEditing && selectedServer) {
+    // Editing View - use MCPConfigDialog-style layout but inline
+    const serverStatus = mcpServerStatuses[selectedServerNameForEditing];
+    const isConnected = serverStatus?.connected || false;
+    const requiresOAuth = serverStatus?.requiresOAuth || false;

    return (
      <div className="h-auto max-w-full overflow-x-hidden p-3">
@@ -158,15 +168,48 @@ export default function MCPPanel() {
          <ChevronLeft className="mr-1 h-4 w-4" />
          {localize('com_ui_back')}
        </Button>
-        <h3 className="mb-3 text-lg font-medium">
-          {localize('com_sidepanel_mcp_variables_for', { '0': serverBeingEdited.serverName })}
-        </h3>
-        <MCPVariableEditor
-          server={serverBeingEdited}
-          onSave={handleSaveServerVars}
-          onRevoke={handleRevokeServerVars}
-          isSubmitting={updateUserPluginsMutation.isLoading}
-        />
+
+        {/* Header with status */}
+        <div className="mb-4">
+          <div className="mb-2 flex items-center gap-3">
+            <h3 className="text-lg font-medium">
+              {localize('com_sidepanel_mcp_variables_for', { '0': selectedServer.serverName })}
+            </h3>
+            {isConnected && (
+              <div className="flex items-center gap-2 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900 dark:text-green-300">
+                <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
+                <span>{localize('com_ui_active')}</span>
+              </div>
+            )}
+          </div>
+          <p className="text-sm text-text-secondary">
+            {Object.keys(fieldsSchema).length > 0
+              ? localize('com_ui_mcp_dialog_desc')
+              : `Manage connection and settings for the ${selectedServer.serverName} MCP server.`}
+          </p>
+        </div>
+
+        {/* Content sections */}
+        <div className="space-y-6">
+          {/* Custom User Variables Section */}
+          {Object.keys(fieldsSchema).length > 0 && (
+            <div>
+              <CustomUserVarsSection
+                serverName={selectedServer.serverName}
+                fields={fieldsSchema}
+                onSave={handleSave}
+                onRevoke={handleRevoke}
+                isSubmitting={updateUserPluginsMutation.isLoading}
+              />
+            </div>
+          )}
+
+          {/* Server Initialization Section */}
+          <ServerInitializationSection
+            serverName={selectedServer.serverName}
+            requiresOAuth={requiresOAuth}
+          />
+        </div>
      </div>
    );
  } else {
@@ -174,124 +217,21 @@ export default function MCPPanel() {
    return (
      <div className="h-auto max-w-full overflow-x-hidden p-3">
        <div className="space-y-2">
-          {mcpServerDefinitions.map((server) => (
-            <div key={server.serverName} className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                className="flex-1 justify-start dark:hover:bg-gray-700"
-                onClick={() => handleServerClickToEdit(server.serverName)}
-              >
-                {server.serverName}
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => handleReinitializeServer(server.serverName)}
-                className="px-2 py-1"
-                title="Reinitialize MCP server"
-                disabled={reinitializeMCPMutation.isLoading}
-              >
-                <RefreshCw
-                  className={`h-4 w-4 ${rotatingServers.has(server.serverName) ? 'animate-spin' : ''}`}
-                />
-              </Button>
-            </div>
-          ))}
+          {mcpServerDefinitions.map((server) => {
+            return (
+              <div key={server.serverName} className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  className="flex-1 justify-start dark:hover:bg-gray-700"
+                  onClick={() => handleServerClickToEdit(server.serverName)}
+                >
+                  <span>{server.serverName}</span>
+                </Button>
+              </div>
+            );
+          })}
        </div>
      </div>
    );
  }
 }
-
-// Inner component for the form - remains the same
-interface MCPVariableEditorProps {
-  server: ServerConfigWithVars;
-  onSave: (serverName: string, updatedValues: Record<string, string>) => void;
-  onRevoke: (serverName: string) => void;
-  isSubmitting: boolean;
-}
-
-function MCPVariableEditor({ server, onSave, onRevoke, isSubmitting }: MCPVariableEditorProps) {
-  const localize = useLocalize();
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors, isDirty },
-  } = useForm<Record<string, string>>({
-    defaultValues: {}, // Initialize empty, will be reset by useEffect
-  });
-
-  useEffect(() => {
-    // Always initialize with empty strings based on the schema
-    const initialFormValues = Object.keys(server.config.customUserVars).reduce(
-      (acc, key) => {
-        acc[key] = '';
-        return acc;
-      },
-      {} as Record<string, string>,
-    );
-    reset(initialFormValues);
-  }, [reset, server.config.customUserVars]);
-
-  const onFormSubmit = (data: Record<string, string>) => {
-    onSave(server.serverName, data);
-  };
-
-  const handleRevokeClick = () => {
-    onRevoke(server.serverName);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onFormSubmit)} className="mb-4 mt-2 space-y-4">
-      {Object.entries(server.config.customUserVars).map(([key, details]) => (
-        <div key={key} className="space-y-2">
-          <Label htmlFor={`${server.serverName}-${key}`} className="text-sm font-medium">
-            {details.title}
-          </Label>
-          <Controller
-            name={key}
-            control={control}
-            defaultValue={''}
-            render={({ field }) => (
-              <Input
-                id={`${server.serverName}-${key}`}
-                type="text"
-                {...field}
-                placeholder={localize('com_sidepanel_mcp_enter_value', { '0': details.title })}
-                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
-              />
-            )}
-          />
-          {details.description && (
-            <p
-              className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
-              dangerouslySetInnerHTML={{ __html: details.description }}
-            />
-          )}
-          {errors[key] && <p className="text-xs text-red-500">{errors[key]?.message}</p>}
-        </div>
-      ))}
-      <div className="flex justify-end gap-2 pt-2">
-        {Object.keys(server.config.customUserVars).length > 0 && (
-          <Button
-            type="button"
-            onClick={handleRevokeClick}
-            className="bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-800"
-            disabled={isSubmitting}
-          >
-            {localize('com_ui_revoke')}
-          </Button>
-        )}
-        <Button
-          type="submit"
-          className="bg-green-500 text-white hover:bg-green-600"
-          disabled={isSubmitting || !isDirty}
-        >
-          {isSubmitting ? localize('com_ui_saving') : localize('com_ui_save')}
-        </Button>
-      </div>
-    </form>
-  );
-}
--- a/client/src/components/ui/MCP/CustomUserVarsSection.tsx
+++ b/client/src/components/ui/MCP/CustomUserVarsSection.tsx
@@ -0,0 +1,161 @@
+import React, { useMemo } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { Input, Label, Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import { useMCPAuthValuesQuery } from '~/data-provider/Tools/queries';
+
+export interface CustomUserVarConfig {
+  title: string;
+  description?: string;
+}
+
+interface CustomUserVarsSectionProps {
+  serverName: string;
+  fields: Record<string, CustomUserVarConfig>;
+  onSave: (authData: Record<string, string>) => void;
+  onRevoke: () => void;
+  isSubmitting?: boolean;
+}
+
+interface AuthFieldProps {
+  name: string;
+  config: CustomUserVarConfig;
+  hasValue: boolean;
+  control: any;
+  errors: any;
+}
+
+function AuthField({ name, config, hasValue, control, errors }: AuthFieldProps) {
+  const localize = useLocalize();
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label htmlFor={name} className="text-sm font-medium">
+          {config.title}
+        </Label>
+        {hasValue ? (
+          <div className="flex min-w-fit items-center gap-2 whitespace-nowrap rounded-full border border-border-medium px-2 py-0.5 text-xs font-medium text-text-secondary">
+            <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
+            <span>{localize('com_ui_set')}</span>
+          </div>
+        ) : (
+          <div className="flex min-w-fit items-center gap-2 whitespace-nowrap rounded-full border border-border-medium px-2 py-0.5 text-xs font-medium text-text-secondary">
+            <div className="h-1.5 w-1.5 rounded-full border border-border-medium" />
+            <span>{localize('com_ui_unset')}</span>
+          </div>
+        )}
+      </div>
+      <Controller
+        name={name}
+        control={control}
+        defaultValue=""
+        render={({ field }) => (
+          <Input
+            id={name}
+            type="text"
+            {...field}
+            placeholder={
+              hasValue
+                ? localize('com_ui_mcp_update_var', { 0: config.title })
+                : localize('com_ui_mcp_enter_var', { 0: config.title })
+            }
+            className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
+          />
+        )}
+      />
+      {config.description && (
+        <p
+          className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
+          dangerouslySetInnerHTML={{ __html: config.description }}
+        />
+      )}
+      {errors[name] && <p className="text-xs text-red-500">{errors[name]?.message}</p>}
+    </div>
+  );
+}
+
+export default function CustomUserVarsSection({
+  serverName,
+  fields,
+  onSave,
+  onRevoke,
+  isSubmitting = false,
+}: CustomUserVarsSectionProps) {
+  const localize = useLocalize();
+
+  // Fetch auth value flags for the server
+  const { data: authValuesData } = useMCPAuthValuesQuery(serverName, {
+    enabled: !!serverName,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<Record<string, string>>({
+    defaultValues: useMemo(() => {
+      const initial: Record<string, string> = {};
+      Object.keys(fields).forEach((key) => {
+        initial[key] = '';
+      });
+      return initial;
+    }, [fields]),
+  });
+
+  const onFormSubmit = (data: Record<string, string>) => {
+    onSave(data);
+  };
+
+  const handleRevokeClick = () => {
+    onRevoke();
+    // Reset form after revoke
+    reset();
+  };
+
+  // Don't render if no fields to configure
+  if (!fields || Object.keys(fields).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      <form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
+        {Object.entries(fields).map(([key, config]) => {
+          const hasValue = authValuesData?.authValueFlags?.[key] || false;
+
+          return (
+            <AuthField
+              key={key}
+              name={key}
+              config={config}
+              hasValue={hasValue}
+              control={control}
+              errors={errors}
+            />
+          );
+        })}
+      </form>
+
+      <div className="flex justify-end gap-2 pt-2">
+        <Button
+          onClick={handleRevokeClick}
+          className="bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-800"
+          disabled={isSubmitting}
+          size="sm"
+        >
+          {localize('com_ui_revoke')}
+        </Button>
+        <Button
+          onClick={handleSubmit(onFormSubmit)}
+          className="bg-green-500 text-white hover:bg-green-600"
+          disabled={isSubmitting}
+          size="sm"
+        >
+          {isSubmitting ? localize('com_ui_saving') : localize('com_ui_save')}
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/client/src/components/ui/MCP/MCPConfigDialog.tsx
+++ b/client/src/components/ui/MCP/MCPConfigDialog.tsx
@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { useLocalize } from '~/hooks';
+import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
+import { CustomUserVarsSection, ServerInitializationSection } from './';
+
+import {
+  OGDialog,
+  OGDialogContent,
+  OGDialogHeader,
+  OGDialogTitle,
+  OGDialogDescription,
+} from '~/components/ui/OriginalDialog';
+
+export interface ConfigFieldDetail {
+  title: string;
+  description: string;
+}
+
+interface MCPConfigDialogProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  fieldsSchema: Record<string, ConfigFieldDetail>;
+  initialValues: Record<string, string>;
+  onSave: (updatedValues: Record<string, string>) => void;
+  isSubmitting?: boolean;
+  onRevoke?: () => void;
+  serverName: string;
+  isConnected?: boolean;
+  authConfig?: Array<{
+    authField: string;
+    label: string;
+    description: string;
+    requiresOAuth?: boolean;
+  }>;
+}
+
+export default function MCPConfigDialog({
+  isOpen,
+  onOpenChange,
+  fieldsSchema,
+  onSave,
+  isSubmitting = false,
+  onRevoke,
+  serverName,
+}: MCPConfigDialogProps) {
+  const localize = useLocalize();
+
+  // Get connection status to determine OAuth requirements
+  const { data: statusQuery } = useMCPConnectionStatusQuery();
+  const mcpServerStatuses = statusQuery?.connectionStatus || {};
+
+  // Derive real-time connection status and OAuth requirements
+  const serverStatus = mcpServerStatuses[serverName];
+  const isRealTimeConnected = serverStatus?.connected || false;
+  const requiresOAuth = useMemo(() => {
+    return serverStatus?.requiresOAuth || false;
+  }, [serverStatus?.requiresOAuth]);
+
+  const hasFields = Object.keys(fieldsSchema).length > 0;
+  const dialogTitle = hasFields
+    ? localize('com_ui_configure_mcp_variables_for', { 0: serverName })
+    : `${serverName} MCP Server`;
+  const dialogDescription = hasFields
+    ? localize('com_ui_mcp_dialog_desc')
+    : `Manage connection and settings for the ${serverName} MCP server.`;
+
+  return (
+    <OGDialog open={isOpen} onOpenChange={onOpenChange}>
+      <OGDialogContent className="flex max-h-[90vh] w-full max-w-md flex-col">
+        <OGDialogHeader>
+          <div className="flex items-center gap-3">
+            <OGDialogTitle>{dialogTitle}</OGDialogTitle>
+            {isRealTimeConnected && (
+              <div className="flex items-center gap-2 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900 dark:text-green-300">
+                <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
+                <span>{localize('com_ui_active')}</span>
+              </div>
+            )}
+          </div>
+          <OGDialogDescription>{dialogDescription}</OGDialogDescription>
+        </OGDialogHeader>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {/* Custom User Variables Section */}
+          <CustomUserVarsSection
+            serverName={serverName}
+            fields={fieldsSchema}
+            onSave={onSave}
+            onRevoke={onRevoke || (() => {})}
+            isSubmitting={isSubmitting}
+          />
+        </div>
+
+        {/* Server Initialization Section */}
+        <ServerInitializationSection serverName={serverName} requiresOAuth={requiresOAuth} />
+      </OGDialogContent>
+    </OGDialog>
+  );
+}
--- a/client/src/components/ui/MCP/ServerInitializationSection.tsx
+++ b/client/src/components/ui/MCP/ServerInitializationSection.tsx
@@ -0,0 +1,228 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import { useToastContext } from '~/Providers';
+import {
+  useReinitializeMCPServerMutation,
+  useMCPOAuthStatusQuery,
+  useCompleteMCPServerReinitializeMutation,
+} from 'librechat-data-provider/react-query';
+import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys } from 'librechat-data-provider';
+
+import { RefreshCw, Link } from 'lucide-react';
+
+interface ServerInitializationSectionProps {
+  serverName: string;
+  requiresOAuth: boolean;
+}
+
+export default function ServerInitializationSection({
+  serverName,
+  requiresOAuth,
+}: ServerInitializationSectionProps) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const queryClient = useQueryClient();
+
+  const [oauthUrl, setOauthUrl] = useState<string | null>(null);
+  const [oauthFlowId, setOauthFlowId] = useState<string | null>(null);
+
+  const { data: statusQuery } = useMCPConnectionStatusQuery();
+  const mcpServerStatuses = statusQuery?.connectionStatus || {};
+  const serverStatus = mcpServerStatuses[serverName];
+  const isConnected = serverStatus?.connected || false;
+
+  // Helper function to invalidate caches after successful connection
+  const handleSuccessfulConnection = useCallback(
+    async (message: string) => {
+      showToast({ message, status: 'success' });
+
+      // Force immediate refetch to update UI
+      await Promise.all([
+        queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
+        queryClient.refetchQueries([QueryKeys.tools]),
+      ]);
+    },
+    [showToast, queryClient],
+  );
+
+  // Main initialization mutation
+  const reinitializeMutation = useReinitializeMCPServerMutation();
+
+  // OAuth completion mutation (stores our tools)
+  const completeReinitializeMutation = useCompleteMCPServerReinitializeMutation();
+
+  // Override the mutation success handlers
+  const handleInitializeServer = useCallback(() => {
+    // Reset OAuth state before starting
+    setOauthUrl(null);
+    setOauthFlowId(null);
+
+    // Trigger initialization
+    reinitializeMutation.mutate(serverName, {
+      onSuccess: (response) => {
+        if (response.oauthRequired) {
+          if (response.authURL && response.flowId) {
+            setOauthUrl(response.authURL);
+            setOauthFlowId(response.flowId);
+            // Keep loading state - OAuth completion will handle success
+          } else {
+            showToast({
+              message: `OAuth authentication required for ${serverName}. Please configure OAuth credentials.`,
+              status: 'warning',
+            });
+          }
+        } else if (response.success) {
+          handleSuccessfulConnection(
+            response.message || `MCP server '${serverName}' initialized successfully`,
+          );
+        }
+      },
+      onError: (error: any) => {
+        console.error('Error initializing MCP server:', error);
+        showToast({
+          message: 'Failed to initialize MCP server',
+          status: 'error',
+        });
+      },
+    });
+  }, [reinitializeMutation, serverName, showToast, handleSuccessfulConnection]);
+
+  // OAuth status polling (only when we have a flow ID)
+  const oauthStatusQuery = useMCPOAuthStatusQuery(oauthFlowId || '', {
+    enabled: !!oauthFlowId,
+    refetchInterval: oauthFlowId ? 2000 : false,
+    retry: false,
+    onSuccess: (data) => {
+      if (data?.completed) {
+        // Immediately reset OAuth state to stop polling
+        setOauthUrl(null);
+        setOauthFlowId(null);
+
+        // OAuth completed, trigger completion mutation
+        completeReinitializeMutation.mutate(serverName, {
+          onSuccess: (response) => {
+            handleSuccessfulConnection(
+              response.message || `MCP server '${serverName}' initialized successfully after OAuth`,
+            );
+          },
+          onError: (error: any) => {
+            // Check if it initialized anyway
+            if (isConnected) {
+              handleSuccessfulConnection('MCP server initialized successfully after OAuth');
+              return;
+            }
+
+            console.error('Error completing MCP initialization:', error);
+            showToast({
+              message: 'Failed to complete MCP server initialization after OAuth',
+              status: 'error',
+            });
+
+            // OAuth state already reset above
+          },
+        });
+      } else if (data?.failed) {
+        showToast({
+          message: `OAuth authentication failed: ${data.error || 'Unknown error'}`,
+          status: 'error',
+        });
+        // Reset OAuth state on failure
+        setOauthUrl(null);
+        setOauthFlowId(null);
+      }
+    },
+  });
+
+  // Reset OAuth state when component unmounts or server changes
+  useEffect(() => {
+    return () => {
+      setOauthUrl(null);
+      setOauthFlowId(null);
+    };
+  }, [serverName]);
+
+  const isLoading =
+    reinitializeMutation.isLoading ||
+    completeReinitializeMutation.isLoading ||
+    (!!oauthFlowId && oauthStatusQuery.isFetching);
+
+  // Show subtle reinitialize option if connected
+  if (isConnected) {
+    return (
+      <div className="flex justify-start">
+        <button
+          onClick={handleInitializeServer}
+          disabled={isLoading}
+          className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-400"
+        >
+          <RefreshCw className={`h-3 w-3 ${isLoading ? 'animate-spin' : ''}`} />
+          {isLoading ? localize('com_ui_loading') : 'Reinitialize'}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border border-[#991b1b] bg-[#2C1315] p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-red-700 dark:text-red-300">
+            {requiresOAuth
+              ? `${serverName} not authenticated (OAuth Required)`
+              : `${serverName} not initialized`}
+          </span>
+        </div>
+        {/* Only show authenticate button when OAuth URL is not present */}
+        {!oauthUrl && (
+          <Button
+            onClick={handleInitializeServer}
+            disabled={isLoading}
+            className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
+          >
+            {isLoading ? (
+              <>
+                <RefreshCw className="h-4 w-4 animate-spin" />
+                {localize('com_ui_loading')}
+              </>
+            ) : (
+              <>
+                <RefreshCw className="h-4 w-4" />
+                {requiresOAuth
+                  ? localize('com_ui_authenticate')
+                  : localize('com_ui_mcp_initialize')}
+              </>
+            )}
+          </Button>
+        )}
+      </div>
+
+      {/* OAuth URL display */}
+      {oauthUrl && (
+        <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-700 dark:bg-blue-900/20">
+          <div className="mb-2 flex items-center gap-2">
+            <div className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-500">
+              <Link className="h-2.5 w-2.5 text-white" />
+            </div>
+            <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
+              {localize('com_ui_authorization_url')}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={() => window.open(oauthUrl, '_blank', 'noopener,noreferrer')}
+              className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
+            >
+              {localize('com_ui_continue_oauth')}
+            </Button>
+          </div>
+          <p className="mt-2 text-xs text-blue-600 dark:text-blue-400">
+            {localize('com_ui_oauth_flow_desc')}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/client/src/components/ui/MCP/index.ts
+++ b/client/src/components/ui/MCP/index.ts
@@ -0,0 +1,5 @@
+export { default as MCPConfigDialog } from './MCPConfigDialog';
+export { default as CustomUserVarsSection } from './CustomUserVarsSection';
+export { default as ServerInitializationSection } from './ServerInitializationSection';
+export type { ConfigFieldDetail } from './MCPConfigDialog';
+export type { CustomUserVarConfig } from './CustomUserVarsSection';
--- a/client/src/components/ui/MCPConfigDialog.tsx
+++ b/client/src/components/ui/MCPConfigDialog.tsx
@@ -1,122 +0,0 @@
-import React, { useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { Input, Label, OGDialog, Button } from '~/components/ui';
-import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import { useLocalize } from '~/hooks';
-
-export interface ConfigFieldDetail {
-  title: string;
-  description: string;
-}
-
-interface MCPConfigDialogProps {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  fieldsSchema: Record<string, ConfigFieldDetail>;
-  initialValues: Record<string, string>;
-  onSave: (updatedValues: Record<string, string>) => void;
-  isSubmitting?: boolean;
-  onRevoke?: () => void;
-  serverName: string;
-}
-
-export default function MCPConfigDialog({
-  isOpen,
-  onOpenChange,
-  fieldsSchema,
-  initialValues,
-  onSave,
-  isSubmitting = false,
-  onRevoke,
-  serverName,
-}: MCPConfigDialogProps) {
-  const localize = useLocalize();
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors, _ },
-  } = useForm<Record<string, string>>({
-    defaultValues: initialValues,
-  });
-
-  useEffect(() => {
-    if (isOpen) {
-      reset(initialValues);
-    }
-  }, [isOpen, initialValues, reset]);
-
-  const onFormSubmit = (data: Record<string, string>) => {
-    onSave(data);
-  };
-
-  const handleRevoke = () => {
-    if (onRevoke) {
-      onRevoke();
-    }
-  };
-
-  const dialogTitle = localize('com_ui_configure_mcp_variables_for', { 0: serverName });
-  const dialogDescription = localize('com_ui_mcp_dialog_desc');
-
-  return (
-    <OGDialog open={isOpen} onOpenChange={onOpenChange}>
-      <OGDialogTemplate
-        className="sm:max-w-lg"
-        title={dialogTitle}
-        description={dialogDescription}
-        headerClassName="px-6 pt-6 pb-4"
-        main={
-          <form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4 px-6 pb-2">
-            {Object.entries(fieldsSchema).map(([key, details]) => (
-              <div key={key} className="space-y-2">
-                <Label htmlFor={key} className="text-sm font-medium">
-                  {details.title}
-                </Label>
-                <Controller
-                  name={key}
-                  control={control}
-                  defaultValue={initialValues[key] || ''}
-                  render={({ field }) => (
-                    <Input
-                      id={key}
-                      type="text"
-                      {...field}
-                      placeholder={localize('com_ui_mcp_enter_var', { 0: details.title })}
-                      className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
-                    />
-                  )}
-                />
-                {details.description && (
-                  <p
-                    className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
-                    dangerouslySetInnerHTML={{ __html: details.description }}
-                  />
-                )}
-                {errors[key] && <p className="text-xs text-red-500">{errors[key]?.message}</p>}
-              </div>
-            ))}
-          </form>
-        }
-        selection={{
-          selectHandler: handleSubmit(onFormSubmit),
-          selectClasses: 'bg-green-500 hover:bg-green-600 text-white',
-          selectText: isSubmitting ? localize('com_ui_saving') : localize('com_ui_save'),
-        }}
-        buttons={
-          onRevoke && (
-            <Button
-              onClick={handleRevoke}
-              className="bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-800"
-              disabled={isSubmitting}
-            >
-              {localize('com_ui_revoke')}
-            </Button>
-          )
-        }
-        footerClassName="flex justify-end gap-2 px-6 pb-6 pt-2"
-        showCancelButton={true}
-      />
-    </OGDialog>
-  );
-}
--- a/client/src/data-provider/Tools/queries.ts
+++ b/client/src/data-provider/Tools/queries.ts
@@ -40,3 +40,77 @@ export const useGetToolCalls = <TData = t.ToolCallResults>(
    },
  );
 };
+
+/**
+ * Hook for getting MCP connection status
+ */
+export const useMCPConnectionStatusQuery = <TData = t.TMCPConnectionStatusResponse>(
+  config?: UseQueryOptions<t.TMCPConnectionStatusResponse, unknown, TData>,
+): QueryObserverResult<TData, unknown> => {
+  return useQuery<t.TMCPConnectionStatusResponse, unknown, TData>(
+    [QueryKeys.mcpConnectionStatus],
+    () => dataService.getMCPConnectionStatus(),
+    {
+      refetchOnWindowFocus: false, // Stop window focus spam
+      refetchOnReconnect: false, // Stop reconnect spam
+      refetchOnMount: false, // Only fetch when explicitly needed
+      staleTime: 2000, // 2 second cache to prevent excessive calls
+      ...config,
+    },
+  );
+};
+
+/**
+ * Hook for getting MCP auth value flags for a specific server
+ */
+export const useMCPAuthValuesQuery = (
+  serverName: string,
+  config?: UseQueryOptions<
+    { success: boolean; serverName: string; authValueFlags: Record<string, boolean> },
+    unknown,
+    { success: boolean; serverName: string; authValueFlags: Record<string, boolean> }
+  >,
+): QueryObserverResult<
+  { success: boolean; serverName: string; authValueFlags: Record<string, boolean> },
+  unknown
+> => {
+  return useQuery<
+    { success: boolean; serverName: string; authValueFlags: Record<string, boolean> },
+    unknown,
+    { success: boolean; serverName: string; authValueFlags: Record<string, boolean> }
+  >([QueryKeys.mcpAuthValues, serverName], () => dataService.getMCPAuthValues(serverName), {
+    // refetchOnWindowFocus: false,
+    // refetchOnReconnect: false,
+    // refetchOnMount: true,
+    enabled: !!serverName,
+    ...config,
+  });
+};
+
+/**
+ * Hook for getting MCP OAuth status for a specific flow
+ */
+export const useMCPOAuthStatusQuery = (
+  flowId: string,
+  config?: UseQueryOptions<
+    { status: string; completed: boolean; failed: boolean; error?: string },
+    unknown,
+    { status: string; completed: boolean; failed: boolean; error?: string }
+  >,
+): QueryObserverResult<
+  { status: string; completed: boolean; failed: boolean; error?: string },
+  unknown
+> => {
+  return useQuery<
+    { status: string; completed: boolean; failed: boolean; error?: string },
+    unknown,
+    { status: string; completed: boolean; failed: boolean; error?: string }
+  >([QueryKeys.mcpOAuthStatus, flowId], () => dataService.getMCPOAuthStatus(flowId), {
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: true,
+    staleTime: 1000, // Consider data stale after 1 second for polling
+    enabled: !!flowId,
+    ...config,
+  });
+};
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -504,7 +504,6 @@
  "com_sidepanel_conversation_tags": "Bookmarks",
  "com_sidepanel_hide_panel": "Hide Panel",
  "com_sidepanel_manage_files": "Manage Files",
-  "com_sidepanel_mcp_enter_value": "Enter value for {{0}}",
  "com_sidepanel_mcp_no_servers_with_vars": "No MCP servers with configurable variables.",
  "com_sidepanel_mcp_variables_for": "MCP Variables for {{0}}",
  "com_sidepanel_parameters": "Parameters",
@@ -526,7 +525,9 @@
  "com_ui_2fa_verified": "Successfully verified Two-Factor Authentication",
  "com_ui_accept": "I accept",
  "com_ui_action_button": "Action Button",
+  "com_ui_active": "Active",
  "com_ui_add": "Add",
+  "com_ui_authenticate": "Authenticate",
  "com_ui_add_mcp": "Add MCP",
  "com_ui_add_mcp_server": "Add MCP Server",
  "com_ui_add_model_preset": "Add a model or preset for an additional response",
@@ -846,7 +847,8 @@
  "com_ui_max_tags": "Maximum number allowed is {{0}}, using latest values.",
  "com_ui_mcp_dialog_desc": "Please enter the necessary information below.",
  "com_ui_mcp_enter_var": "Enter value for {{0}}",
-  "com_ui_mcp_server_not_found": "Server not found.",
+  "com_ui_mcp_update_var": "Update value for {{0}}",
+  "com_ui_mcp_initialize": "Initialize",
  "com_ui_mcp_servers": "MCP Servers",
  "com_ui_mcp_url": "MCP Server URL",
  "com_ui_medium": "Medium",
@@ -961,6 +963,11 @@
  "com_ui_save_submit": "Save & Submit",
  "com_ui_saved": "Saved!",
  "com_ui_saving": "Saving...",
+  "com_ui_set": "Set",
+  "com_ui_unset": "Unset",
+  "com_ui_authorization_url": "Authorization URL",
+  "com_ui_continue_oauth": "Continue OAuth Flow",
+  "com_ui_oauth_flow_desc": "Click the button above to continue the OAuth flow in a new tab.",
  "com_ui_schema": "Schema",
  "com_ui_scope": "Scope",
  "com_ui_search": "Search",
@@ -1090,4 +1097,4 @@
  "com_ui_yes": "Yes",
  "com_ui_zoom": "Zoom",
  "com_user_message": "You"
-}
+}
--- a/packages/api/src/mcp/connection.ts
+++ b/packages/api/src/mcp/connection.ts
@@ -57,7 +57,7 @@ export class MCPConnection extends EventEmitter {
  private static instance: MCPConnection | null = null;
  public client: Client;
  private transport: Transport | null = null; // Make this nullable
-  private connectionState: t.ConnectionState = 'disconnected';
+  public connectionState: t.ConnectionState = 'disconnected';
  private connectPromise: Promise<void> | null = null;
  private readonly MAX_RECONNECT_ATTEMPTS = 3;
  public readonly serverName: string;
@@ -69,6 +69,8 @@ export class MCPConnection extends EventEmitter {
  private lastPingTime: number;
  private oauthTokens?: MCPOAuthTokens | null;
  private oauthRequired = false;
+  private oauthTimeoutId: NodeJS.Timeout | null = null;
+  private skipOAuthTimeout = false; // Skip OAuth timeouts during discovery
  iconPath?: string;
  timeout?: number;
  url?: string;
@@ -78,6 +80,7 @@ export class MCPConnection extends EventEmitter {
    private readonly options: t.MCPOptions,
    userId?: string,
    oauthTokens?: MCPOAuthTokens | null,
+    skipOAuthTimeout = false, // Skip OAuth timeouts during discovery
  ) {
    super();
    this.serverName = serverName;
@@ -85,6 +88,7 @@ export class MCPConnection extends EventEmitter {
    this.iconPath = options.iconPath;
    this.timeout = options.timeout;
    this.lastPingTime = Date.now();
+    this.skipOAuthTimeout = skipOAuthTimeout;
    if (oauthTokens) {
      this.oauthTokens = oauthTokens;
    }
@@ -207,10 +211,7 @@ export class MCPConnection extends EventEmitter {
            this.emit('connectionChange', 'disconnected');
          };

-          transport.onerror = (error) => {
-            logger.error(`${this.getLogPrefix()} SSE transport error:`, error);
-            this.emitError(error, 'SSE transport error:');
-          };
+          // Error handling is done by setupTransportErrorHandlers

          transport.onmessage = (message) => {
            logger.info(`${this.getLogPrefix()} Message received: ${JSON.stringify(message)}`);
@@ -249,10 +250,7 @@ export class MCPConnection extends EventEmitter {
            this.emit('connectionChange', 'disconnected');
          };

-          transport.onerror = (error: Error | unknown) => {
-            logger.error(`${this.getLogPrefix()} Streamable-http transport error:`, error);
-            this.emitError(error, 'Streamable-http transport error:');
-          };
+          // Error handling is done by setupTransportErrorHandlers

          transport.onmessage = (message: JSONRPCMessage) => {
            logger.info(`${this.getLogPrefix()} Message received: ${JSON.stringify(message)}`);
@@ -410,6 +408,24 @@ export class MCPConnection extends EventEmitter {
          const serverUrl = this.url;
          logger.debug(`${this.getLogPrefix()} Server URL for OAuth: ${serverUrl}`);

+          // In startup mode, immediately emit oauthRequired and fail without timeout
+          if (this.skipOAuthTimeout) {
+            logger.info(
+              `${this.getLogPrefix()} Skip OAuth timeout: OAuth required, failing immediately without timeout`,
+            );
+
+            // Emit the event for discovery purposes
+            this.emit('oauthRequired', {
+              serverName: this.serverName,
+              error,
+              serverUrl,
+              userId: this.userId,
+            });
+
+            // Immediately throw to avoid timeout
+            throw error;
+          }
+
          const oauthTimeout = this.options.initTimeout ?? 60000;
          /** Promise that will resolve when OAuth is handled */
          const oauthHandledPromise = new Promise<void>((resolve, reject) => {
@@ -421,6 +437,7 @@ export class MCPConnection extends EventEmitter {
            const cleanup = () => {
              if (timeoutId) {
                clearTimeout(timeoutId);
+                this.oauthTimeoutId = null;
              }
              if (oauthHandledListener) {
                this.off('oauthHandled', oauthHandledListener);
@@ -448,11 +465,26 @@ export class MCPConnection extends EventEmitter {
              reject(new Error(`OAuth handling timeout after ${oauthTimeout}ms`));
            }, oauthTimeout);

+            // Store the timeout ID for potential cancellation
+            this.oauthTimeoutId = timeoutId;
+
            // Listen for both success and failure events
            this.once('oauthHandled', oauthHandledListener);
            this.once('oauthFailed', oauthFailedListener);
          });

+          // Check if there are any listeners for oauthRequired event
+          const hasOAuthListeners = this.listenerCount('oauthRequired') > 0;
+
+          if (!hasOAuthListeners) {
+            // No OAuth handler available (like during startup), immediately fail
+            logger.warn(
+              `${this.getLogPrefix()} OAuth required but no handler available, failing immediately`,
+            );
+            this.oauthRequired = false;
+            throw error;
+          }
+
          // Emit the event
          this.emit('oauthRequired', {
            serverName: this.serverName,
@@ -517,7 +549,7 @@ export class MCPConnection extends EventEmitter {
    try {
      await this.disconnect();
      await this.connectClient();
-      if (!(await this.isConnected())) {
+      if (!(await this.isConnected()) && !(this.isInitializing && this.oauthTokens)) {
        throw new Error('Connection not established');
      }
    } catch (error) {
@@ -528,6 +560,12 @@ export class MCPConnection extends EventEmitter {

  private setupTransportErrorHandlers(transport: Transport): void {
    transport.onerror = (error) => {
+      // Suppress error logging if we're already disconnected or disconnecting
+      if (this.connectionState === 'disconnected' || this.shouldStopReconnecting) {
+        logger.debug(`${this.getLogPrefix()} Transport error during disconnect (expected):`, error);
+        return;
+      }
+
      logger.error(`${this.getLogPrefix()} Transport error:`, error);

      // Check if it's an OAuth authentication error
@@ -539,12 +577,27 @@ export class MCPConnection extends EventEmitter {
        }
      }

+      // Check if it's a rate limit error (429) - don't trigger reconnection
+      const errorMessage = error?.toString() || '';
+      if (errorMessage.includes('429') || errorMessage.includes('too many requests')) {
+        logger.warn(
+          `${this.getLogPrefix()} Rate limit error detected, not triggering reconnection`,
+        );
+        return; // Don't emit error state for rate limits
+      }
+
      this.emit('connectionChange', 'error');
    };
  }

  public async disconnect(): Promise<void> {
    try {
+      // Cancel any pending OAuth timeout
+      if (this.oauthTimeoutId) {
+        clearTimeout(this.oauthTimeoutId);
+        this.oauthTimeoutId = null;
+      }
+
      if (this.transport) {
        await this.client.close();
        this.transport = null;
@@ -559,6 +612,31 @@ export class MCPConnection extends EventEmitter {
    }
  }

+  public async disconnectAndStopReconnecting(): Promise<void> {
+    try {
+      // Stop any reconnection attempts
+      this.shouldStopReconnecting = true;
+
+      // Cancel any pending OAuth timeout
+      if (this.oauthTimeoutId) {
+        clearTimeout(this.oauthTimeoutId);
+        this.oauthTimeoutId = null;
+      }
+
+      // Set disconnected state early to suppress error logging during cleanup
+      this.connectionState = 'disconnected';
+
+      if (this.transport) {
+        await this.client.close();
+        this.transport = null;
+      }
+
+      this.emit('connectionChange', 'disconnected');
+    } finally {
+      this.connectPromise = null;
+    }
+  }
+
  async fetchResources(): Promise<t.MCPResource[]> {
    try {
      const { resources } = await this.client.listResources();
@@ -595,6 +673,11 @@ export class MCPConnection extends EventEmitter {
      return false;
    }

+    // Don't ping if we're disconnecting or should stop reconnecting
+    if (this.shouldStopReconnecting) {
+      return false;
+    }
+
    try {
      // Try ping first as it's the lightest check
      await this.client.ping();
@@ -608,6 +691,13 @@ export class MCPConnection extends EventEmitter {
          (error as Error)?.message.includes('method not found'));

      if (!pingUnsupported) {
+        // Check if it's a rate limit error - don't log as error
+        const errorMessage = (error as Error)?.message || '';
+        if (errorMessage.includes('429') || errorMessage.includes('too many requests')) {
+          logger.warn(`${this.getLogPrefix()} Ping rate limited, assuming connected`);
+          return true; // Assume still connected during rate limiting
+        }
+
        logger.error(`${this.getLogPrefix()} Ping failed:`, error);
        return false;
      }
@@ -650,6 +740,11 @@ export class MCPConnection extends EventEmitter {
    this.oauthTokens = tokens;
  }

+  /** Get the current connection state */
+  public getConnectionState(): t.ConnectionState {
+    return this.connectionState;
+  }
+
  private isOAuthError(error: unknown): boolean {
    if (!error || typeof error !== 'object') {
      return false;
--- a/packages/api/src/mcp/manager.ts
+++ b/packages/api/src/mcp/manager.ts
@@ -15,8 +15,9 @@ import { MCPTokenStorage } from './oauth/tokens';
 import { formatToolContent } from './parsers';
 import { MCPConnection } from './connection';
 import { processMCPEnv } from '~/utils/env';
+import { EventEmitter } from 'events';

-export class MCPManager {
+export class MCPManager extends EventEmitter {
  private static instance: MCPManager | null = null;
  /** App-level connections initialized at startup */
  private connections: Map<string, MCPConnection> = new Map();
@@ -29,6 +30,10 @@ export class MCPManager {
  /** Store MCP server instructions */
  private serverInstructions: Map<string, string> = new Map();

+  constructor() {
+    super();
+  }
+
  public static getInstance(): MCPManager {
    if (!MCPManager.instance) {
      MCPManager.instance = new MCPManager();
@@ -47,7 +52,7 @@ export class MCPManager {
    mcpServers: t.MCPServers;
    flowManager: FlowStateManager<MCPOAuthTokens | null>;
    tokenMethods?: TokenMethods;
-  }): Promise<void> {
+  }): Promise<Record<string, boolean>> {
    this.mcpConfigs = mcpServers;

    if (!flowManager) {
@@ -59,6 +64,7 @@ export class MCPManager {
    }
    const entries = Object.entries(mcpServers);
    const initializedServers = new Set();
+    const oauthSkippedServers = new Set();
    const connectionResults = await Promise.allSettled(
      entries.map(async ([serverName, config], i) => {
        try {
@@ -70,19 +76,46 @@ export class MCPManager {
          });
          initializedServers.add(i);
        } catch (error) {
-          logger.error(`[MCP][${serverName}] Initialization failed`, error);
+          // Check if this is an OAuth skipped error
+          if (
+            error instanceof Error &&
+            (error as Error & { isOAuthSkipped?: boolean }).isOAuthSkipped
+          ) {
+            oauthSkippedServers.add(i);
+          } else {
+            logger.error(`[MCP][${serverName}] Initialization failed`, error);
+            // Debug: Log the actual error for filesystem server
+            if (serverName === 'filesystem') {
+              logger.error(`[MCP][${serverName}] Error details:`, {
+                message: error instanceof Error ? error.message : String(error),
+                stack: error instanceof Error ? error.stack : undefined,
+                isOAuthError: this.isOAuthError(error),
+              });
+            }
+          }
        }
      }),
    );

    const failedConnections = connectionResults.filter(
-      (result): result is PromiseRejectedResult => result.status === 'rejected',
+      (result): result is PromiseRejectedResult =>
+        result.status === 'rejected' &&
+        !(
+          result.reason instanceof Error &&
+          (result.reason as Error & { isOAuthSkipped?: boolean }).isOAuthSkipped
+        ),
    );

    logger.info(
      `[MCP] Initialized ${initializedServers.size}/${entries.length} app-level server(s)`,
    );

+    if (oauthSkippedServers.size > 0) {
+      logger.info(
+        `[MCP] ${oauthSkippedServers.size}/${entries.length} app-level server(s) skipped for OAuth`,
+      );
+    }
+
    if (failedConnections.length > 0) {
      logger.warn(
        `[MCP] ${failedConnections.length}/${entries.length} app-level server(s) failed to initialize`,
@@ -92,6 +125,8 @@ export class MCPManager {
    entries.forEach(([serverName], index) => {
      if (initializedServers.has(index)) {
        logger.info(`[MCP][${serverName}] ✓ Initialized`);
+      } else if (oauthSkippedServers.has(index)) {
+        logger.info(`[MCP][${serverName}] OAuth Required`);
      } else {
        logger.info(`[MCP][${serverName}] ✗ Failed`);
      }
@@ -99,9 +134,16 @@ export class MCPManager {

    if (initializedServers.size === entries.length) {
      logger.info('[MCP] All app-level servers initialized successfully');
-    } else if (initializedServers.size === 0) {
+    } else if (initializedServers.size === 0 && oauthSkippedServers.size === 0) {
      logger.warn('[MCP] No app-level servers initialized');
    }
+
+    // Return OAuth requirement map
+    const oauthRequirementMap: Record<string, boolean> = {};
+    entries.forEach(([serverName], index) => {
+      oauthRequirementMap[serverName] = oauthSkippedServers.has(index);
+    });
+    return oauthRequirementMap;
  }

  /** Initializes a single MCP server connection (app-level) */
@@ -118,6 +160,7 @@ export class MCPManager {
  }): Promise<void> {
    const processedConfig = processMCPEnv(config);
    let tokens: MCPOAuthTokens | null = null;
+
    if (tokenMethods?.findToken) {
      try {
        /** Refresh function for app-level connections */
@@ -162,44 +205,25 @@ export class MCPManager {
        logger.debug(`[MCP][${serverName}] No existing tokens found`);
      }
    }
+
    if (tokens) {
      logger.info(`[MCP][${serverName}] Loaded OAuth tokens`);
    }
-    const connection = new MCPConnection(serverName, processedConfig, undefined, tokens);
-    logger.info(`[MCP][${serverName}] Setting up OAuth event listener`);
-    connection.on('oauthRequired', async (data) => {
-      logger.debug(`[MCP][${serverName}] oauthRequired event received`);
-      const result = await this.handleOAuthRequired({
-        ...data,
-        flowManager,
-      });
-      if (result?.tokens && tokenMethods?.createToken) {
-        try {
-          connection.setOAuthTokens(result.tokens);
-          await MCPTokenStorage.storeTokens({
-            userId: CONSTANTS.SYSTEM_USER_ID,
-            serverName,
-            tokens: result.tokens,
-            createToken: tokenMethods.createToken,
-            updateToken: tokenMethods.updateToken,
-            findToken: tokenMethods.findToken,
-            clientInfo: result.clientInfo,
-          });
-          logger.info(`[MCP][${serverName}] OAuth tokens saved to storage`);
-        } catch (error) {
-          logger.error(`[MCP][${serverName}] Failed to save OAuth tokens to storage`, error);
-        }
-      }

-      // Only emit oauthHandled if we actually got tokens (OAuth succeeded)
-      if (result?.tokens) {
-        connection.emit('oauthHandled');
-      } else {
-        // OAuth failed, emit oauthFailed to properly reject the promise
-        logger.warn(`[MCP][${serverName}] OAuth failed, emitting oauthFailed event`);
-        connection.emit('oauthFailed', new Error('OAuth authentication failed'));
-      }
+    // Create connection in startup mode to prevent OAuth timeouts
+    const connection = new MCPConnection(serverName, processedConfig, undefined, tokens, true);
+
+    // Track OAuth skipped state explicitly
+    let oauthSkipped = false;
+
+    connection.on('oauthRequired', async () => {
+      logger.debug(`[MCP][${serverName}] oauthRequired event received`);
+      oauthSkipped = true;
+      // Emit event to signal that initialization should be skipped
+      connection.emit('oauthSkipped');
+      return;
    });
+
    try {
      const connectTimeout = processedConfig.initTimeout ?? 30000;
      const connectionTimeout = new Promise<void>((_, reject) =>
@@ -208,13 +232,35 @@ export class MCPManager {
          connectTimeout,
        ),
      );
+
+      // Listen for oauthSkipped event to stop initialization
+      const oauthSkippedPromise = new Promise<void>((resolve) => {
+        connection.once('oauthSkipped', () => {
+          logger.debug(`[MCP][${serverName}] OAuth skipped, stopping initialization`);
+          resolve();
+        });
+      });
+
      const connectionAttempt = this.initializeServer({
        connection,
        logPrefix: `[MCP][${serverName}]`,
        flowManager,
        handleOAuth: false,
      });
-      await Promise.race([connectionAttempt, connectionTimeout]);
+
+      // Race between connection attempt, timeout, and oauthSkipped
+      await Promise.race([connectionAttempt, connectionTimeout, oauthSkippedPromise]);
+
+      // Check if OAuth was explicitly skipped
+      if (oauthSkipped) {
+        // Throw a special error to signal OAuth was skipped
+        const oauthSkippedError = new Error(`OAuth required for ${serverName}`) as Error & {
+          isOAuthSkipped: boolean;
+        };
+        oauthSkippedError.isOAuthSkipped = true;
+        throw oauthSkippedError;
+      }
+
      if (await connection.isConnected()) {
        this.connections.set(serverName, connection);

@@ -269,6 +315,17 @@ export class MCPManager {
        logger.info(`[MCP][${serverName}] ✗ Failed`);
      }
    } catch (error) {
+      // Debug: Log the actual error for filesystem server
+      if (serverName === 'filesystem') {
+        logger.error(`[MCP][${serverName}] Error details:`, {
+          message: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined,
+          isOAuthError: this.isOAuthError(error),
+          errorType: error?.constructor?.name,
+          errorKeys: error && typeof error === 'object' ? Object.keys(error) : [],
+          oauthSkipped,
+        });
+      }
      logger.error(`[MCP][${serverName}] Initialization failed`, error);
      throw error;
    }
@@ -294,7 +351,8 @@ export class MCPManager {
    while (attempts < maxAttempts) {
      try {
        await connection.connect();
-        if (await connection.isConnected()) {
+        // Use lightweight connection state check instead of ping
+        if (connection.connectionState === 'connected') {
          return;
        }
        throw new Error('Connection attempt succeeded but status is not connected');
@@ -340,6 +398,21 @@ export class MCPManager {
      return false;
    }

+    // Debug: Log error details for filesystem server
+    if (error && typeof error === 'object' && 'message' in error) {
+      const errorMessage = (error as { message?: string }).message;
+      if (errorMessage && errorMessage.includes('filesystem')) {
+        logger.debug('[MCP] isOAuthError check for filesystem:', {
+          message: errorMessage,
+          hasCode: 'code' in error,
+          code: (error as { code?: number }).code,
+          includes401: errorMessage.includes('401'),
+          includes403: errorMessage.includes('403'),
+          includesNon200: errorMessage.includes('Non-200 status code (401)'),
+        });
+      }
+    }
+
    // Check for SSE error with 401 status
    if ('message' in error && typeof error.message === 'string') {
      return error.message.includes('401') || error.message.includes('Non-200 status code (401)');
@@ -425,7 +498,8 @@ export class MCPManager {
      }
      connection = undefined; // Force creation of a new connection
    } else if (connection) {
-      if (await connection.isConnected()) {
+      // Use lightweight connection state check instead of ping
+      if (connection.connectionState === 'connected') {
        logger.debug(`[MCP][User: ${userId}][${serverName}] Reusing active connection`);
        this.updateUserLastActivity(userId);
        return connection;
@@ -568,7 +642,8 @@ export class MCPManager {
      });
      await Promise.race([connectionAttempt, connectionTimeout]);

-      if (!(await connection?.isConnected())) {
+      // Use lightweight connection state check instead of ping
+      if (connection?.connectionState !== 'connected') {
        throw new Error('Failed to establish connection after initialization attempt.');
      }

@@ -578,6 +653,10 @@ export class MCPManager {
      this.userConnections.get(userId)?.set(serverName, connection);

      logger.info(`[MCP][User: ${userId}][${serverName}] Connection successfully established`);
+
+      // Emit event that connection is established for waiting endpoints
+      this.emit('connectionEstablished', { userId, serverName, connection });
+
      // Update timestamp on creation
      this.updateUserLastActivity(userId);
      return connection;
@@ -618,7 +697,7 @@ export class MCPManager {
    const connection = userMap?.get(serverName);
    if (connection) {
      logger.info(`[MCP][User: ${userId}][${serverName}] Disconnecting...`);
-      await connection.disconnect();
+      await connection.disconnectAndStopReconnecting();
      this.removeUserConnection(userId, serverName);
    }
  }
@@ -657,6 +736,12 @@ export class MCPManager {
    return this.connections;
  }

+  /** Returns the user-level connection if it exists (does not create one) */
+  public getUserConnectionIfExists(userId: string, serverName: string): MCPConnection | undefined {
+    const userMap = this.userConnections.get(userId);
+    return userMap?.get(serverName);
+  }
+
  /** Attempts to reconnect an app-level connection if it's disconnected */
  private async isConnectionActive({
    serverName,
@@ -669,7 +754,8 @@ export class MCPManager {
    flowManager: FlowStateManager<MCPOAuthTokens | null>;
    skipReconnect?: boolean;
  }): Promise<boolean> {
-    if (await connection.isConnected()) {
+    // Use lightweight connection state check instead of ping
+    if (connection.connectionState === 'connected') {
      return true;
    }

@@ -697,7 +783,8 @@ export class MCPManager {
        flowManager,
      });

-      if (await connection.isConnected()) {
+      // Use lightweight connection state check instead of ping
+      if (connection.connectionState === 'connected') {
        logger.info(`[MCP][${serverName}] App-level connection successfully reconnected`);
        return true;
      } else {
@@ -881,7 +968,8 @@ export class MCPManager {
        }
      }

-      if (!(await connection.isConnected())) {
+      // Use lightweight connection state check instead of ping
+      if (connection.connectionState !== 'connected') {
        /** May happen if getUserConnection failed silently or app connection dropped */
        throw new McpError(
          ErrorCode.InternalError, // Use InternalError for connection issues
@@ -928,24 +1016,62 @@ export class MCPManager {

  /** Disconnects all app-level and user-level connections */
  public async disconnectAll(): Promise<void> {
-    logger.info('[MCP] Disconnecting all app-level and user-level connections...');
-
-    const userDisconnectPromises = Array.from(this.userConnections.keys()).map((userId) =>
-      this.disconnectUserConnections(userId),
-    );
-    await Promise.allSettled(userDisconnectPromises);
-    this.userLastActivity.clear();
+    logger.info('[MCP] Disconnecting all connections...');

    // Disconnect all app-level connections
-    const appDisconnectPromises = Array.from(this.connections.values()).map((connection) =>
-      connection.disconnect().catch((error) => {
-        logger.error(`[MCP][${connection.serverName}] Error during disconnectAll:`, error);
-      }),
-    );
-    await Promise.allSettled(appDisconnectPromises);
+    const appConnections = Array.from(this.connections.values());
+    await Promise.allSettled(appConnections.map((connection) => connection.disconnect()));
    this.connections.clear();

-    logger.info('[MCP] All connections processed for disconnection.');
+    // Disconnect all user-level connections
+    const userConnections = Array.from(this.userConnections.values()).flatMap((userMap) =>
+      Array.from(userMap.values()),
+    );
+    await Promise.allSettled(userConnections.map((connection) => connection.disconnect()));
+    this.userConnections.clear();
+
+    // Clear activity timestamps
+    this.userLastActivity.clear();
+
+    logger.info('[MCP] All connections disconnected');
+  }
+
+  /**
+   * Get connection status for a specific user and server
+   */
+  public async getUserConnectionStatus(
+    userId: string,
+    serverName: string,
+  ): Promise<{
+    connected: boolean;
+    hasConnection: boolean;
+  }> {
+    const userConnections = this.userConnections.get(userId);
+    const connection = userConnections?.get(serverName);
+
+    if (!connection) {
+      return {
+        connected: false,
+        hasConnection: false,
+      };
+    }
+
+    try {
+      const isConnected = await connection.isConnected();
+      return {
+        connected: isConnected,
+        hasConnection: true,
+      };
+    } catch (error) {
+      logger.error(
+        `[MCP] Error checking connection status for user ${userId}, server ${serverName}:`,
+        error,
+      );
+      return {
+        connected: false,
+        hasConnection: true,
+      };
+    }
  }

  /** Destroys the singleton instance and disconnects all connections */
--- a/packages/data-provider/src/api-endpoints.ts
+++ b/packages/data-provider/src/api-endpoints.ts
@@ -134,6 +134,15 @@ export const plugins = () => '/api/plugins';

 export const mcpReinitialize = (serverName: string) => `/api/mcp/${serverName}/reinitialize`;

+export const mcpReinitializeComplete = (serverName: string) =>
+  `/api/mcp/${serverName}/reinitialize/complete`;
+
+export const mcpConnectionStatus = () => '/api/mcp/connection/status';
+
+export const mcpAuthValues = (serverName: string) => `/api/mcp/${serverName}/auth-values`;
+
+export const mcpOAuthStatus = (flowId: string) => `/api/mcp/oauth/status/${flowId}`;
+
 export const config = () => '/api/config';

 export const prompts = () => '/api/prompts';
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -610,6 +610,7 @@ export type TStartupConfig = {
          description: string;
        }
      >;
+      requiresOAuth?: boolean;
    }
  >;
  mcpPlaceholder?: string;
--- a/packages/data-provider/src/data-service.ts
+++ b/packages/data-provider/src/data-service.ts
@@ -145,6 +145,26 @@ export const reinitializeMCPServer = (serverName: string) => {
  return request.post(endpoints.mcpReinitialize(serverName));
 };

+export const completeMCPServerReinitialize = (serverName: string) => {
+  return request.post(endpoints.mcpReinitializeComplete(serverName));
+};
+
+export const getMCPConnectionStatus = (): Promise<t.TMCPConnectionStatusResponse> => {
+  return request.get(endpoints.mcpConnectionStatus());
+};
+
+export const getMCPAuthValues = (
+  serverName: string,
+): Promise<{ success: boolean; serverName: string; authValueFlags: Record<string, boolean> }> => {
+  return request.get(endpoints.mcpAuthValues(serverName));
+};
+
+export const getMCPOAuthStatus = (
+  flowId: string,
+): Promise<{ status: string; completed: boolean; failed: boolean; error?: string }> => {
+  return request.get(endpoints.mcpOAuthStatus(flowId));
+};
+
 /* Config */

 export const getStartupConfig = (): Promise<
--- a/packages/data-provider/src/keys.ts
+++ b/packages/data-provider/src/keys.ts
@@ -46,6 +46,9 @@ export enum QueryKeys {
  health = 'health',
  userTerms = 'userTerms',
  banner = 'banner',
+  mcpConnectionStatus = 'mcpConnectionStatus',
+  mcpAuthValues = 'mcpAuthValues',
+  mcpOAuthStatus = 'mcpOAuthStatus',
  /* Memories */
  memories = 'memories',
 }
--- a/packages/data-provider/src/mcp.ts
+++ b/packages/data-provider/src/mcp.ts
@@ -8,6 +8,12 @@ const BaseOptionsSchema = z.object({
  initTimeout: z.number().optional(),
  /** Controls visibility in chat dropdown menu (MCPSelect) */
  chatMenu: z.boolean().optional(),
+  /**
+   * Controls whether the MCP server should be initialized on startup
+   * - true: Initialize on startup (default)
+   * - false: Skip initialization on startup (can be initialized later)
+   */
+  startup: z.boolean().optional(),
  /**
   * Controls server instruction behavior:
   * - undefined/not set: No instructions included (default)
--- a/packages/data-provider/src/react-query/react-query-service.ts
+++ b/packages/data-provider/src/react-query/react-query-service.ts
@@ -311,13 +311,22 @@ export const useUpdateUserPluginsMutation = (
    ...options,
    onSuccess: (...args) => {
      queryClient.invalidateQueries([QueryKeys.user]);
+      queryClient.refetchQueries([QueryKeys.tools]);
      onSuccess?.(...args);
    },
  });
 };

 export const useReinitializeMCPServerMutation = (): UseMutationResult<
-  { success: boolean; message: string; serverName: string },
+  {
+    success: boolean;
+    message: string;
+    serverName: string;
+    oauthRequired?: boolean;
+    oauthCompleted?: boolean;
+    authURL?: string;
+    flowId?: string;
+  },
  unknown,
  string,
  unknown
@@ -330,6 +339,54 @@ export const useReinitializeMCPServerMutation = (): UseMutationResult<
  });
 };

+export const useCompleteMCPServerReinitializeMutation = (): UseMutationResult<
+  {
+    success: boolean;
+    message: string;
+    serverName: string;
+  },
+  unknown,
+  string,
+  unknown
+> => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (serverName: string) => dataService.completeMCPServerReinitialize(serverName),
+    {
+      onSuccess: () => {
+        queryClient.refetchQueries([QueryKeys.tools]);
+        queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]);
+      },
+    },
+  );
+};
+
+export const useMCPOAuthStatusQuery = (
+  flowId: string,
+  config?: UseQueryOptions<
+    { status: string; completed: boolean; failed: boolean; error?: string },
+    unknown,
+    { status: string; completed: boolean; failed: boolean; error?: string }
+  >,
+): QueryObserverResult<
+  { status: string; completed: boolean; failed: boolean; error?: string },
+  unknown
+> => {
+  return useQuery<
+    { status: string; completed: boolean; failed: boolean; error?: string },
+    unknown,
+    { status: string; completed: boolean; failed: boolean; error?: string }
+  >([QueryKeys.mcpOAuthStatus, flowId], () => dataService.getMCPOAuthStatus(flowId), {
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: true,
+    staleTime: 1000, // Consider data stale after 1 second for polling
+    enabled: !!flowId,
+    refetchInterval: flowId ? 2000 : false, // Poll every 2 seconds when OAuth is active
+    ...config,
+  });
+};
+
 export const useGetCustomConfigSpeechQuery = (
  config?: UseQueryOptions<t.TCustomConfigSpeechResponse>,
 ): QueryObserverResult<t.TCustomConfigSpeechResponse> => {
--- a/packages/data-provider/src/schemas.ts
+++ b/packages/data-provider/src/schemas.ts
@@ -417,6 +417,7 @@ export const tPluginAuthConfigSchema = z.object({
  authField: z.string(),
  label: z.string(),
  description: z.string(),
+  requiresOAuth: z.boolean().optional(),
 });

 export type TPluginAuthConfig = z.infer<typeof tPluginAuthConfigSchema>;
--- a/packages/data-provider/src/types.ts
+++ b/packages/data-provider/src/types.ts
@@ -629,3 +629,14 @@ export type TBalanceResponse = {
  lastRefill?: Date;
  refillAmount?: number;
 };
+
+export type TMCPConnectionStatus = {
+  connected: boolean;
+  hasAuthConfig: boolean;
+  hasConnection: boolean;
+  isAppLevel: boolean;
+  isUserLevel: boolean;
+  requiresOAuth: boolean;
+};
+
+export type TMCPConnectionStatusResponse = Record<string, TMCPConnectionStatus>;
--- a/packages/data-schemas/src/methods/pluginAuth.ts
+++ b/packages/data-schemas/src/methods/pluginAuth.ts
@@ -61,15 +61,28 @@ export function createPluginAuthMethods(mongoose: typeof import('mongoose')) {
  }: UpdatePluginAuthParams): Promise<IPluginAuth> {
    try {
      const PluginAuth: Model<IPluginAuth> = mongoose.models.PluginAuth;
-      const existingAuth = await PluginAuth.findOne({ userId, pluginKey, authField }).lean();
+
+      // First try to find existing record by { userId, authField } (for backward compatibility)
+      let existingAuth = await PluginAuth.findOne({ userId, authField }).lean();
+
+      // If not found and pluginKey is provided, try to find by { userId, pluginKey, authField }
+      if (!existingAuth && pluginKey) {
+        existingAuth = await PluginAuth.findOne({ userId, pluginKey, authField }).lean();
+      }

      if (existingAuth) {
+        // Update existing record, preserving the original structure
+        const updateQuery = existingAuth.pluginKey
+          ? { userId, pluginKey: existingAuth.pluginKey, authField }
+          : { userId, authField };
+
        return await PluginAuth.findOneAndUpdate(
-          { userId, pluginKey, authField },
+          updateQuery,
          { $set: { value } },
          { new: true, upsert: true },
        ).lean();
      } else {
+        // Create new record
        const newPluginAuth = await new PluginAuth({
          userId,
          authField,
@@ -109,7 +122,16 @@ export function createPluginAuthMethods(mongoose: typeof import('mongoose')) {
        throw new Error('authField is required when all is false');
      }

-      return await PluginAuth.deleteOne({ userId, authField });
+      // Build the filter based on available parameters
+      const filter: { userId: string; authField: string; pluginKey?: string } = {
+        userId,
+        authField,
+      };
+      if (pluginKey) {
+        filter.pluginKey = pluginKey;
+      }
+
+      return await PluginAuth.deleteOne(filter);
    } catch (error) {
      throw new Error(
        `Failed to delete plugin auth: ${error instanceof Error ? error.message : 'Unknown error'}`,
Author	SHA1	Message	Date
Dustin Healy	3ca736bc53	🔧 fix: Fix rampant pings and rate limiting - Skips idle connection checks in `getMCPManager` to avoid unnecessary pings. - Introduces a skipOAuthTimeout flag during initial connection to prevent timeouts during server discovery. - Uses a lightweight connection state check instead of ping to avoid rate limits. - Prevents refetch spam and rate limit errors when checking connection status. - Fixes an issue where the server connection was not being disconnected.	2025-07-21 18:26:35 -04:00
Dustin Healy	4b4741b1aa	🔧 refactor: Clean up logging statements	2025-07-21 18:26:29 -04:00
Dustin Healy	cfb19175fb	🔧 refactor: Clean up imports in MCPPanel component - Merged import statements for better organization. - Removed unused `reinitializeMCPServerMutation`	2025-07-21 18:26:24 -04:00
Dustin Healy	4130a09f61	🔧 refactor: Remove unused server reinitialization logic from MCPPanel - Removed the `handleReinitializeServer` function. - Removed the `ServerConfigWithVars` interface.	2025-07-21 18:26:18 -04:00
Dustin Healy	5399ac5231	🔧 refactor: Streamline MCPPanel UI by removing status indicators and refresh spinner	2025-07-21 18:26:13 -04:00
Dustin Healy	b03faebcfb	🔧 chore: Fix errors causing unit tests and ESLint checks to fail	2025-07-21 18:26:06 -04:00
Dustin Healy	89843f71af	🔧 chore: Remove unused translation keys	2025-07-21 18:26:00 -04:00
Dustin Healy	5e2b6e8eb5	🔧 refactor: Integrate MCPPanel with new MCP components - Unified UI Components: Replace custom MCPVariableEditor with CustomUserVarsSection and ServerInitializationSection for consistent design across all MCP interfaces - Real-Time Status Indicators: Add live connection status badges and set/unset authentication pills to match MCPConfigDialog functionality - Enhanced OAuth Support: Integrate ServerInitializationSection for proper OAuth flow handling in side panel	2025-07-21 18:25:55 -04:00
Dustin Healy	b1e346a225	🔌 feat: MCP OAuth Integration in Chat UI - Real-Time Connection Status: New backend APIs and React Query hooks provide live MCP server connection monitoring with automatic UI updates - OAuth Flow Components: Complete MCPConfigDialog, ServerInitializationSection, and CustomUserVarsSection with OAuth URL handling and polling-based completion - Enhanced Server Selection: MCPSelect component with connection-aware filtering, visual status indicators, and better credential management UX (still needs a lot of refinement since there is bloat/unused vars and functions leftover from the ideation phase on how to approach OAuth and connection statuses)	2025-07-21 18:25:47 -04:00