🔑 refactor: MCP Settings Rendering Logic for OAuth Servers (danny-avila#8718)

* feat: add OAuth servers to conditional rendering logic for MCPPanel in SideNav

* feat: add startup flag check to conditional rendering logic

* fix: correct improper handling of failure state in reinitialize endpoint

* fix: change MCP config components to better handle servers without customUserVars

- removes the subtle reinitialize button from config components of servers without customUserVars or OAuth
- adds a placeholder message for components where servers have no customUserVars configured

* style: swap CustomUserVarsSection and ServerInitializationSection positions

* style: fix coloring for light mode and align more with existing design patterns

* chore: remove extraneous comments

* chore: reorder imports and `isEnabled` from api package

---------

Co-authored-by: Danny Avila <[email protected]>

Author: 2 people

api/server/routes/config.js

@@ -1,10 +1,11 @@
 const express = require('express');
+const { isEnabled } = require('@librechat/api');
 const { logger } = require('@librechat/data-schemas');
 const { CacheKeys, defaultSocialLogins, Constants } = require('librechat-data-provider');
 const { getCustomConfig } = require('~/server/services/Config/getCustomConfig');
 const { getLdapConfig } = require('~/server/services/Config/ldap');
 const { getProjectByName } = require('~/models/Project');
-const { isEnabled } = require('~/server/utils');
+const { getMCPManager } = require('~/config');
 const { getLogStores } = require('~/cache');
 
 const router = express.Router();
@@ -102,11 +103,16 @@ router.get('/', async function (req, res) {
     payload.mcpServers = {};
     const config = await getCustomConfig();
     if (config?.mcpServers != null) {
+      const mcpManager = getMCPManager();
+      const oauthServers = mcpManager.getOAuthServers();
+
       for (const serverName in config.mcpServers) {
         const serverConfig = config.mcpServers[serverName];
         payload.mcpServers[serverName] = {
           customUserVars: serverConfig?.customUserVars || {},
           chatMenu: serverConfig?.chatMenu,
+          isOAuth: oauthServers.has(serverName),
+          startup: serverConfig?.startup,
         };
       }
     }

api/server/routes/mcp.js

@@ -452,11 +452,19 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
       `[MCP Reinitialize] Sending response for ${serverName} - oauthRequired: ${oauthRequired}, oauthUrl: ${oauthUrl ? 'present' : 'null'}`,
     );
 
+    const getResponseMessage = () => {
+      if (oauthRequired) {
+        return `MCP server '${serverName}' ready for OAuth authentication`;
+      }
+      if (userConnection) {
+        return `MCP server '${serverName}' reinitialized successfully`;
+      }
+      return `Failed to reinitialize MCP server '${serverName}'`;
+    };
+
     res.json({
-      success: true,
-      message: oauthRequired
-        ? `MCP server '${serverName}' ready for OAuth authentication`
-        : `MCP server '${serverName}' reinitialized successfully`,
+      success: userConnection && !oauthRequired,
+      message: getResponseMessage(),
       serverName,
       oauthRequired,
       oauthUrl,

client/src/components/MCP/CustomUserVarsSection.tsx

@@ -110,13 +110,15 @@ export default function CustomUserVarsSection({
 
   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="p-4 text-center text-sm text-gray-500">
+        {localize('com_sidepanel_mcp_no_custom_vars', { '0': serverName })}
+      </div>
+    );
   }
 
   return (

client/src/components/MCP/MCPConfigDialog.tsx

@@ -132,6 +132,7 @@ export default function MCPConfigDialog({
         <ServerInitializationSection
           serverName={serverName}
           requiresOAuth={serverStatus?.requiresOAuth || false}
+          hasCustomUserVars={fieldsSchema && Object.keys(fieldsSchema).length > 0}
         />
       </OGDialogContent>
     </OGDialog>

client/src/components/MCP/ServerInitializationSection.tsx

@@ -7,11 +7,13 @@ import { useLocalize } from '~/hooks';
 interface ServerInitializationSectionProps {
   serverName: string;
   requiresOAuth: boolean;
+  hasCustomUserVars?: boolean;
 }
 
 export default function ServerInitializationSection({
   serverName,
   requiresOAuth,
+  hasCustomUserVars = false,
 }: ServerInitializationSectionProps) {
   const localize = useLocalize();
 
@@ -39,8 +41,7 @@ export default function ServerInitializationSection({
     cancelOAuthFlow(serverName);
   }, [cancelOAuthFlow, serverName]);
 
-  // Show subtle reinitialize option if connected
-  if (isConnected) {
+  if (isConnected && (requiresOAuth || hasCustomUserVars)) {
     return (
       <div className="flex justify-start">
         <button
@@ -55,11 +56,15 @@ export default function ServerInitializationSection({
     );
   }
 
+  if (isConnected) {
+    return null;
+  }
+
   return (
-    <div className="rounded-lg border border-[#991b1b] bg-[#2C1315] p-4">
+    <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-700 dark:bg-amber-900/20">
       <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">
+          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
             {requiresOAuth
               ? localize('com_ui_mcp_not_authenticated', { 0: serverName })
               : localize('com_ui_mcp_not_initialized', { 0: serverName })}
@@ -70,7 +75,7 @@ export default function ServerInitializationSection({
           <Button
             onClick={handleInitializeClick}
             disabled={isServerInitializing}
-            className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
+            className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
           >
             {isServerInitializing ? (
               <>
@@ -103,7 +108,7 @@ export default function ServerInitializationSection({
           <div className="flex items-center gap-2">
             <Button
               onClick={() => window.open(serverOAuthUrl, '_blank', 'noopener,noreferrer')}
-              className="flex-1 bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
+              className="flex-1 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
             >
               {localize('com_ui_continue_oauth')}
             </Button>

client/src/components/SidePanel/MCP/MCPPanel.tsx

@@ -141,29 +141,31 @@ function MCPPanelContent() {
           {localize('com_sidepanel_mcp_variables_for', { '0': serverBeingEdited.serverName })}
         </h3>
 
-        {/* Server Initialization Section */}
         <div className="mb-4">
-          <ServerInitializationSection
+          <CustomUserVarsSection
             serverName={selectedServerNameForEditing}
-            requiresOAuth={serverStatus?.requiresOAuth || false}
+            fields={serverBeingEdited.config.customUserVars}
+            onSave={(authData) => {
+              if (selectedServerNameForEditing) {
+                handleConfigSave(selectedServerNameForEditing, authData);
+              }
+            }}
+            onRevoke={() => {
+              if (selectedServerNameForEditing) {
+                handleConfigRevoke(selectedServerNameForEditing);
+              }
+            }}
+            isSubmitting={updateUserPluginsMutation.isLoading}
           />
         </div>
 
-        {/* Custom User Variables Section */}
-        <CustomUserVarsSection
+        <ServerInitializationSection
           serverName={selectedServerNameForEditing}
-          fields={serverBeingEdited.config.customUserVars}
-          onSave={(authData) => {
-            if (selectedServerNameForEditing) {
-              handleConfigSave(selectedServerNameForEditing, authData);
-            }
-          }}
-          onRevoke={() => {
-            if (selectedServerNameForEditing) {
-              handleConfigRevoke(selectedServerNameForEditing);
-            }
-          }}
-          isSubmitting={updateUserPluginsMutation.isLoading}
+          requiresOAuth={serverStatus?.requiresOAuth || false}
+          hasCustomUserVars={
+            serverBeingEdited.config.customUserVars &&
+            Object.keys(serverBeingEdited.config.customUserVars).length > 0
+          }
         />
       </div>
     );

client/src/hooks/MCP/useMCPServerManager.ts

@@ -234,6 +234,12 @@ export function useMCPServerManager() {
 
             cleanupServerState(serverName);
           }
+        } else {
+          showToast({
+            message: localize('com_ui_mcp_init_failed', { 0: serverName }),
+            status: 'error',
+          });
+          cleanupServerState(serverName);
         }
       } catch (error) {
         console.error(`[MCP Manager] Failed to initialize ${serverName}:`, error);

client/src/hooks/Nav/useSideNavLinks.ts

@@ -155,7 +155,10 @@ export default function useSideNavLinks({
     if (
       startupConfig?.mcpServers &&
       Object.values(startupConfig.mcpServers).some(
-        (server) => server.customUserVars && Object.keys(server.customUserVars).length > 0,
+        (server: any) =>
+          (server.customUserVars && Object.keys(server.customUserVars).length > 0) ||
+          server.isOAuth ||
+          server.startup === false,
       )
     ) {
       links.push({

client/src/locales/en/translation.json

@@ -506,6 +506,7 @@
   "com_sidepanel_hide_panel": "Hide Panel",
   "com_sidepanel_manage_files": "Manage Files",
   "com_sidepanel_mcp_no_servers_with_vars": "No MCP servers with configurable variables.",
+  "com_sidepanel_mcp_no_custom_vars": "No custom user variables set for {{0}}",
   "com_sidepanel_mcp_variables_for": "MCP Variables for {{0}}",
   "com_sidepanel_parameters": "Parameters",
   "com_sources_image_alt": "Search result image",
@@ -851,7 +852,6 @@
   "com_ui_mcp_authenticated_success": "MCP server '{{0}}' authenticated successfully",
   "com_ui_mcp_dialog_desc": "Please enter the necessary information below.",
   "com_ui_mcp_enter_var": "Enter value for {{0}}",
-  "com_ui_mcp_init_cancelled": "MCP server '{{0}}' initialization was cancelled due to simultaneous request",
   "com_ui_mcp_init_failed": "Failed to initialize MCP server",
   "com_ui_mcp_initialize": "Initialize",
   "com_ui_mcp_initialized_success": "MCP server '{{0}}' initialized successfully",

packages/data-provider/src/config.ts

@@ -613,6 +613,8 @@ export type TStartupConfig = {
         }
       >;
       chatMenu?: boolean;
+      isOAuth?: boolean;
+      startup?: boolean;
     }
   >;
   mcpPlaceholder?: string;