working pass to backend

client/src/common/mcp.ts

@@ -1,26 +1,13 @@
-import {
-  AuthorizationTypeEnum,
-  AuthTypeEnum,
-  TokenExchangeMethodEnum,
-} from 'librechat-data-provider';
 import { MCPForm } from '~/common/types';
 
 export const defaultMCPFormValues: MCPForm = {
-  type: AuthTypeEnum.None,
-  saved_auth_fields: false,
-  api_key: '',
-  authorization_type: AuthorizationTypeEnum.Basic,
-  custom_auth_header: '',
-  oauth_client_id: '',
-  oauth_client_secret: '',
-  authorization_url: '',
-  client_url: '',
-  scope: '',
-  token_exchange_method: TokenExchangeMethodEnum.DefaultPost,
   name: '',
   description: '',
   url: '',
   tools: [],
   icon: '',
   trust: false,
+  customHeaders: [],
+  requestTimeout: undefined,
+  connectionTimeout: undefined,
 };

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

@@ -9,11 +9,6 @@ import { defaultMCPFormValues } from '~/common/mcp';
 import useLocalize from '~/hooks/useLocalize';
 import { TrashIcon } from '~/components/svg';
 import MCPInput from './MCPInput';
-import {
-  AuthTypeEnum,
-  AuthorizationTypeEnum,
-  TokenExchangeMethodEnum,
-} from 'librechat-data-provider';
 
 interface MCPFormPanelProps {
   // Data
@@ -66,24 +61,11 @@ export default function MCPFormPanel({
         url: mcp.metadata.url ?? '',
         tools: mcp.metadata.tools ?? [],
         trust: mcp.metadata.trust ?? false,
+        customHeaders: mcp.metadata.customHeaders ?? [],
+        requestTimeout: mcp.metadata.requestTimeout,
+        connectionTimeout: mcp.metadata.connectionTimeout,
       };
 
-      if (mcp.metadata.auth) {
-        Object.assign(formData, {
-          type: mcp.metadata.auth.type || AuthTypeEnum.None,
-          saved_auth_fields: false,
-          api_key: mcp.metadata.api_key ?? '',
-          authorization_type: mcp.metadata.auth.authorization_type || AuthorizationTypeEnum.Basic,
-          oauth_client_id: mcp.metadata.oauth_client_id ?? '',
-          oauth_client_secret: mcp.metadata.oauth_client_secret ?? '',
-          authorization_url: mcp.metadata.auth.authorization_url ?? '',
-          client_url: mcp.metadata.auth.client_url ?? '',
-          scope: mcp.metadata.auth.scope ?? '',
-          token_exchange_method:
-            mcp.metadata.auth.token_exchange_method ?? TokenExchangeMethodEnum.DefaultPost,
-        });
-      }
-
       reset(formData);
     }
   }, [mcp, reset]);

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

@@ -7,6 +7,7 @@ import type { TUpdateUserPlugins } from 'librechat-data-provider';
 import type { MCP } from 'librechat-data-provider';
 import { Button, Input, Label } from '~/components/ui';
 import { useGetStartupConfig } from '~/data-provider';
+import { useAddToolMutation } from '~/data-provider/Tools/mutations';
 import MCPPanelSkeleton from './MCPPanelSkeleton';
 import { useToastContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
@@ -60,6 +61,23 @@ export default function MCPPanel() {
     },
   });
 
+  const createMCPMutation = useAddToolMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_update_mcp_success'),
+        status: 'success',
+      });
+      setShowMCPForm(false);
+    },
+    onError: (error) => {
+      console.error('Error creating MCP:', error);
+      showToast({
+        message: localize('com_ui_update_mcp_error'),
+        status: 'error',
+      });
+    },
+  });
+
   const handleSaveServerVars = useCallback(
     (serverName: string, updatedValues: Record<string, string>) => {
       const payload: TUpdateUserPlugins = {
@@ -101,13 +119,20 @@ export default function MCPPanel() {
   };
 
   const handleSaveMCP = (mcp: MCP) => {
-    // TODO: Implement MCP save logic for conversation context
-    console.log('Saving MCP:', mcp);
-    showToast({
-      message: localize('com_ui_update_mcp_success'),
-      status: 'success',
-    });
-    setShowMCPForm(false);
+    // Transform MCP data to match the expected format
+    const mcpData = {
+      name: mcp.metadata.name || '',
+      description: mcp.metadata.description || '',
+      url: mcp.metadata.url || '',
+      icon: mcp.metadata.icon || '',
+      tools: mcp.metadata.tools || [],
+      trust: mcp.metadata.trust ?? false,
+      customHeaders: mcp.metadata.customHeaders || [],
+      requestTimeout: mcp.metadata.requestTimeout,
+      connectionTimeout: mcp.metadata.connectionTimeout,
+    };
+
+    createMCPMutation.mutate(mcpData);
   };
 
   if (showMCPForm) {

client/src/data-provider/Tools/mutations.ts

@@ -40,3 +40,43 @@ export const useToolCallMutation = <T extends t.ToolId>(
     },
   );
 };
+
+interface CreateToolData {
+  name: string;
+  description: string;
+  metadata?: Record<string, unknown>;
+  // MCP-specific fields
+  url?: string;
+  icon?: string;
+  tools?: string[];
+  trust?: boolean;
+  customHeaders?: Array<{
+    id: string;
+    name: string;
+    value: string;
+  }>;
+  requestTimeout?: number;
+  connectionTimeout?: number;
+}
+
+export const useAddToolMutation = (
+  options?: t.MutationOptions<Record<string, unknown>, CreateToolData>,
+): UseMutationResult<Record<string, unknown>, Error, CreateToolData> => {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    (toolData: CreateToolData) => {
+      return dataService.createTool(toolData);
+    },
+    {
+      onMutate: (variables) => options?.onMutate?.(variables),
+      onError: (error, variables, context) => options?.onError?.(error, variables, context),
+      onSuccess: (data, variables, context) => {
+        // Invalidate tools list to trigger refetch
+        queryClient.invalidateQueries([QueryKeys.tools]);
+        queryClient.invalidateQueries([QueryKeys.mcpTools]);
+        return options?.onSuccess?.(data, variables, context);
+      },
+    },
+  );
+};