🪄 fix: MCP UI Renders for OAuth and Custom User Vars Servers (#9559)

client/src/Providers/BadgeRowContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { Tools, Constants, LocalStorageKeys, AgentCapabilities } from 'librechat-data-provider';
 import type { TAgentsEndpoint } from 'librechat-data-provider';
@@ -7,7 +7,6 @@ import {
   useSearchApiKeyForm,
   useGetAgentsConfig,
   useCodeApiKeyForm,
-  useGetMCPTools,
   useToolToggle,
 } from '~/hooks';
 import { getTimestampedValue, setTimestamp } from '~/utils/timestamps';
@@ -15,7 +14,6 @@ import { ephemeralAgentByConvoId } from '~/store';
 
 interface BadgeRowContextType {
   conversationId?: string | null;
-  mcpServerNames?: string[] | null;
   agentsConfig?: TAgentsEndpoint | null;
   webSearch: ReturnType<typeof useToolToggle>;
   artifacts: ReturnType<typeof useToolToggle>;
@@ -49,7 +47,6 @@ export default function BadgeRowProvider({
 }: BadgeRowProviderProps) {
   const lastKeyRef = useRef<string>('');
   const hasInitializedRef = useRef(false);
-  const { mcpToolDetails } = useGetMCPTools();
   const { agentsConfig } = useGetAgentsConfig();
   const key = conversationId ?? Constants.NEW_CONVO;
 
@@ -191,16 +188,11 @@ export default function BadgeRowProvider({
 
   const mcpServerManager = useMCPServerManager({ conversationId });
 
-  const mcpServerNames = useMemo(() => {
-    return (mcpToolDetails ?? []).map((tool) => tool.name);
-  }, [mcpToolDetails]);
-
   const value: BadgeRowContextType = {
     webSearch,
     artifacts,
     fileSearch,
     agentsConfig,
-    mcpServerNames,
     conversationId,
     codeApiKeyForm,
     codeInterpreter,

client/src/components/Chat/Input/MCPSelect.tsx

@@ -8,7 +8,6 @@ function MCPSelectContent() {
   const { conversationId, mcpServerManager } = useBadgeRowContext();
   const {
     localize,
-    isPinned,
     mcpValues,
     isInitializing,
     placeholderText,
@@ -69,14 +68,6 @@ function MCPSelectContent() {
     [getServerStatusIconProps, isInitializing],
   );
 
-  if ((!mcpValues || mcpValues.length === 0) && !isPinned) {
-    return null;
-  }
-
-  if (!configuredServers || configuredServers.length === 0) {
-    return null;
-  }
-
   const configDialogProps = getConfigDialogProps();
 
   return (
@@ -102,8 +93,13 @@ function MCPSelectContent() {
 }
 
 function MCPSelect() {
-  const { mcpServerNames } = useBadgeRowContext();
+  const { mcpServerManager } = useBadgeRowContext();
-  if ((mcpServerNames?.length ?? 0) === 0) return null;
+  const { configuredServers } = mcpServerManager;
+
+  if (!configuredServers || configuredServers.length === 0) {
+    return null;
+  }
+
   return <MCPSelectContent />;
 }
 

client/src/components/Chat/Input/ToolsDropdown.tsx

@@ -30,7 +30,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
     artifacts,
     fileSearch,
     agentsConfig,
-    mcpServerNames,
+    mcpServerManager,
     codeApiKeyForm,
     codeInterpreter,
     searchApiKeyForm,
@@ -286,7 +286,8 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
     });
   }
 
-  if (mcpServerNames && mcpServerNames.length > 0) {
+  const { configuredServers } = mcpServerManager;
+  if (configuredServers && configuredServers.length > 0) {
     dropdownItems.push({
       hideOnClick: false,
       render: (props) => <MCPSubMenu {...props} placeholder={mcpPlaceholder} />,