🔑 refactor: MCP Settings Rendering Logic for OAuth Servers (#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 <danny@librechat.ai>
2025-12-16 16:30:15 +01:00 · 2025-07-29 06:08:46 -07:00 · 2025-07-29 06:08:46 -07:00 · c4677ab3fb
commit c4677ab3fb
parent ef9d9b1276
10 changed files with 68 additions and 33 deletions
--- a/api/server/routes/config.js
+++ b/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,
        };
      }
    }
--- a/api/server/routes/mcp.js
+++ b/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,
--- a/client/src/components/MCP/CustomUserVarsSection.tsx
+++ b/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 (
--- a/client/src/components/MCP/MCPConfigDialog.tsx
+++ b/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>
--- a/client/src/components/MCP/ServerInitializationSection.tsx
+++ b/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>
--- a/client/src/components/SidePanel/MCP/MCPPanel.tsx
+++ b/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>
    );
--- a/client/src/hooks/MCP/useMCPServerManager.ts
+++ b/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);
--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/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({
--- a/client/src/locales/en/translation.json
+++ b/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",
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@ -613,6 +613,8 @@ export type TStartupConfig = {
        }
      >;
      chatMenu?: boolean;
+      isOAuth?: boolean;
+      startup?: boolean;
    }
  >;
  mcpPlaceholder?: string;