feat(MK8S-196): add WebMCP protocol support to shell-ui

Implements the WebMCP standard (navigator.modelContext.registerTool()) so
that micro-apps can expose AI-agent tools through their WebFinger
configuration. Shell-ui owns the full registration lifecycle.

Changes:
- ConfigurationProviders: add optional `mcpTools: FederatedModuleInfo` to
  BuildtimeWebFinger spec so micro-apps can declare their tool module
- MCPRegistrar (new): uses ComponentWithFederatedImports to load each
  micro-app's tool module and calls navigator.modelContext.registerTool()
  for every tool; wraps authRequired tools with a PKCE auth modal via
  OidcClient + requestUserInteraction
- AuthProvider: expose `userManager` from useAuth(); add
  `autoSignIn: !isAIUserAgent()` to suppress Keycloak redirect in AI
  agent sessions (detection via UA pattern matching in mcp/userAgent.ts)
- FederatedApp: mount <MCPRegistrar /> alongside SolutionsNavbar
- rspack.config.ts: copy @mcp-b/webmcp-local-relay browser assets to
  build output (embed.js + widget.html); patch widget.html to raise the
  request timeout from 10 s to 60 s to accommodate STS + SDK round trips;
  exclude @mcp-b/* from Module Federation shared config

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: JBWatenbergScality

shell-ui/package-lock.json

@@ -46,6 +46,8 @@
     "ts-node": "^10.9.2"
   },
   "dependencies": {
+    "@mcp-b/global": "^2.2.0",
+    "@mcp-b/webmcp-local-relay": "^2.2.0",
     "@scality/core-ui": "0.197.0",
     "@scality/module-federation": "1.6.1",
     "downshift": "^8.0.0",

shell-ui/package.json

@@ -143,7 +143,12 @@ const config: Configuration = {
         './useNotificationCenter': './src/useNotificationCenter.ts',
       },
       shared: {
-        ...Object.fromEntries(Object.entries(deps).map(([key, version]) => [key, {}])),
+        ...Object.fromEntries(
+          Object.entries(deps)
+            // @mcp-b/* are side-effect-only browser globals — must not be shared via MF
+            .filter(([key]) => !key.startsWith('@mcp-b/'))
+            .map(([key]) => [key, {}]),
+        ),
         'react-intl': {
           eager: true,
           singleton: true,
@@ -210,7 +215,23 @@ const config: Configuration = {
       excludedChunks: ['shell'],
     }),
     new rspack.CopyRspackPlugin({
-      patterns: [{ from: 'public' }],
+      patterns: [
+        { from: 'public' },
+        {
+          from: 'node_modules/@mcp-b/webmcp-local-relay/dist/browser',
+          to: '.',
+          // Increase widget.html request timeout from 10s to 60s so long-running
+          // MCP tool calls (STS assumeRole + SDK action) don't time out.
+          transform: (content: Buffer, resourcePath: string) => {
+            if (resourcePath.endsWith('widget.html')) {
+              return content
+                .toString()
+                .replace('Host response timeout: ${t}`))},1e4', 'Host response timeout: ${t}`))},6*1e4');
+            }
+            return content;
+          },
+        },
+      ],
     }),
     process.env.RSDOCTOR && new RsdoctorRspackPlugin({}),
   ].filter(Boolean),

shell-ui/rspack.config.ts

@@ -37,6 +37,7 @@ import {
 import { ShellHistoryProvider } from './initFederation/ShellHistoryProvider';
 import { ShellThemeSelectorProvider } from './initFederation/ShellThemeSelectorProvider';
 import { UIListProvider } from './initFederation/UIListProvider';
+import { MCPRegistrar } from './mcp/MCPRegistrar';
 import { SolutionsNavbar } from './navbar';
 import { LanguageProvider, useLanguage } from './navbar/lang';
 import NotificationCenterProvider from './NotificationCenterProvider';
@@ -189,9 +190,12 @@ function InternalApp() {
             )}
             {status === 'error' && <ErrorPage500 data-cy="sc-error-page500" />}
             {status === 'success' && (
-              <SolutionsNavbar>
-                <InternalRouter />
-              </SolutionsNavbar>
+              <>
+                <MCPRegistrar />
+                <SolutionsNavbar>
+                  <InternalRouter />
+                </SolutionsNavbar>
+              </>
             )}
           </NotificationCenterProvider>
         </FirstTimeLoginProvider>

shell-ui/src/FederatedApp.tsx

@@ -5,6 +5,7 @@ import {
   UserManager,
   useAuth as useOauth2Auth,
 } from 'oidc-react';
+import { isAIUserAgent } from '../mcp/userAgent';
 import React, { useCallback, useEffect } from 'react';
 import { useErrorBoundary } from 'react-error-boundary';
 import { useQuery } from 'react-query';
@@ -53,7 +54,7 @@ function defaultDexConnectorMetadataService(connectorId: string) {
   return DexDefaultConnectorMetadataService;
 }
 
-function getAbsoluteRedirectUrl(redirectUrl?: string) {
+export function getAbsoluteRedirectUrl(redirectUrl?: string) {
   if (!redirectUrl) {
     return window.location.href;
   }
@@ -124,6 +125,7 @@ function OAuth2AuthProvider({ children }: { children: React.ReactNode }) {
     };
   }, [logOut]);
   const oidcConfig: AuthProviderProps = {
+    autoSignIn: !isAIUserAgent(),
     onBeforeSignIn: () => {
       localStorage.setItem('redirectUrl', window.location.href);
       return window.location.href;
@@ -160,6 +162,7 @@ export type UserData = {
 export function useAuth(): {
   userData?: UserData;
   getToken: () => Promise<string | null>;
+  userManager: UserManager | undefined;
 } {
   try {
     const auth = useOauth2Auth(); // todo add support for OAuth2Proxy
@@ -216,6 +219,7 @@ export function useAuth(): {
       return {
         userData: undefined,
         getToken: () => Promise.resolve(null),
+        userManager: auth?.userManager,
       };
     }
 
@@ -233,11 +237,13 @@ export function useAuth(): {
           return user?.access_token;
         });
       },
+      userManager: auth.userManager,
     };
   } catch (e) {
     return {
       userData: undefined,
       getToken: () => Promise.resolve('null'),
+      userManager: undefined,
     };
   }
 }

shell-ui/src/auth/AuthProvider.tsx

@@ -62,6 +62,7 @@ export type BuildtimeWebFinger = {
     components: Record<string, FederatedModuleInfo>;
     navbarUpdaterComponents?: FederatedModuleInfo[];
     instanceNameAdapter?: FederatedModuleInfo;
+    mcpTools?: FederatedModuleInfo;
   };
 };
 

shell-ui/src/initFederation/ConfigurationProviders.tsx

@@ -0,0 +1,217 @@
+import '@mcp-b/global';
+import { ComponentWithFederatedImports } from '@scality/module-federation';
+import { OidcClient } from 'oidc-client-ts';
+import { useEffect } from 'react';
+
+declare const __webpack_public_path__: string;
+import { ErrorBoundary } from 'react-error-boundary';
+import {
+  getAbsoluteRedirectUrl,
+  useAuth,
+} from '../auth/AuthProvider';
+import {
+  FederatedModuleInfo,
+  OIDCConfig,
+  useConfigRetriever,
+} from '../initFederation/ConfigurationProviders';
+import { useDeployedApps } from '../initFederation/UIListProvider';
+import type { MCPToolDefinition, ModelContextClient, ToolContext } from './types';
+
+// Do not use directly - exported for testing purposes
+export const _InternalMCPRegistrar = ({
+  moduleExports,
+  mcpToolsModuleInfo,
+  selfConfiguration,
+  authConfig,
+}: {
+  moduleExports: Record<string, { tools: MCPToolDefinition[] }>;
+  mcpToolsModuleInfo: FederatedModuleInfo;
+  selfConfiguration: Record<string, unknown>;
+  authConfig: OIDCConfig | null;
+}) => {
+  const { userManager } = useAuth();
+
+  useEffect(() => {
+    if (!navigator.modelContext || !userManager) return;
+
+    const tools = moduleExports[mcpToolsModuleInfo.module]?.tools ?? [];
+    const registeredNames: string[] = [];
+
+    for (const tool of tools) {
+      navigator.modelContext.registerTool({
+        name: tool.name,
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+        execute: async (params: unknown, client: ModelContextClient) => {
+          if (tool.authRequired) {
+            let user = await userManager.getUser();
+
+            if (!user || user.expired) {
+              user = await userManager.signinSilent().catch(() => null);
+            }
+
+            if (!user || user.expired) {
+              if (!authConfig) {
+                return {
+                  success: false,
+                  error: {
+                    code: 'AUTH_REQUIRED',
+                    message: 'Authentication required but no OIDC configuration is available',
+                  },
+                };
+              }
+
+              const oidcClient = new OidcClient({
+                authority: authConfig.providerUrl,
+                client_id: authConfig.clientId,
+                redirect_uri: getAbsoluteRedirectUrl(authConfig.redirectUrl),
+                response_type: authConfig.responseType || 'code',
+                scope: authConfig.scopes,
+              });
+
+              // connector_id is passed as extraQueryParams rather than via MetadataServiceCtor
+              // (which is UserManager-only). The effect on the final auth URL is identical.
+              const signinRequest = await oidcClient.createSigninRequest({
+                ...(authConfig.defaultDexConnector && {
+                  extraQueryParams: { connector_id: authConfig.defaultDexConnector },
+                }),
+              });
+              const authUrl = signinRequest.url;
+
+              const authenticated = await client.requestUserInteraction(
+                (_innerClient: ModelContextClient) => {
+                  return new Promise<boolean>((resolve) => {
+                    const modal = document.createElement('div');
+                    modal.className = 'mcp-auth-modal';
+                    modal.style.cssText =
+                      'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:9999';
+                    modal.innerHTML = `
+                      <div style="background:#fff;padding:2rem;border-radius:8px;max-width:400px;text-align:center">
+                        <h3 style="margin:0 0 1rem">Authentication Required</h3>
+                        <p style="margin:0 0 1.5rem">This action requires you to sign in.</p>
+                        <a href="${authUrl}" target="_blank" style="display:inline-block;padding:0.5rem 1.5rem;background:#0066cc;color:#fff;border-radius:4px;text-decoration:none;margin-bottom:1rem">Sign in to continue</a>
+                        <br/>
+                        <button id="mcp-cancel-auth" style="margin-top:0.5rem;padding:0.4rem 1rem;cursor:pointer">Cancel</button>
+                      </div>
+                    `;
+                    document.body.appendChild(modal);
+
+                    const onUserLoaded = () => {
+                      modal.remove();
+                      userManager.events.removeUserLoaded(onUserLoaded);
+                      resolve(true);
+                    };
+                    userManager.events.addUserLoaded(onUserLoaded);
+
+                    modal
+                      .querySelector('#mcp-cancel-auth')
+                      ?.addEventListener('click', () => {
+                        userManager.events.removeUserLoaded(onUserLoaded);
+                        modal.remove();
+                        resolve(false);
+                      });
+                  });
+                },
+              );
+
+              if (!authenticated) {
+                return {
+                  success: false,
+                  error: {
+                    code: 'AUTH_REQUIRED',
+                    message: 'Authentication required to perform this action',
+                  },
+                };
+              }
+            }
+          }
+
+          const context: ToolContext = {
+            getToken: async () => {
+              const user = await userManager.getUser();
+              return user?.access_token ?? '';
+            },
+            selfConfiguration,
+          };
+
+          return tool.execute(
+            { ...(params as Record<string, unknown>), context },
+            client,
+          );
+        },
+      });
+
+      registeredNames.push(tool.name);
+    }
+
+    return () => {
+      registeredNames.forEach((name) =>
+        navigator.modelContext?.unregisterTool?.(name),
+      );
+    };
+  }, [moduleExports, mcpToolsModuleInfo, userManager, selfConfiguration, authConfig]);
+
+  return null;
+};
+
+// Inject the local-relay embed script once — must be a <script> tag (not an ES module import)
+// so that document.currentScript.src is set, allowing widget.html to resolve locally
+// instead of falling back to the CDN.
+function useRelayEmbed() {
+  useEffect(() => {
+    if (document.querySelector('script[data-webmcp-relay-embed]')) return;
+    const script = document.createElement('script');
+    // __webpack_public_path__ is the runtime public path (e.g. '/shell/'),
+    // ensuring the request hits the actual file rather than the SPA fallback.
+    script.src = `${__webpack_public_path__}embed.js`;
+    script.dataset.webmcpRelayEmbed = '1';
+    document.head.appendChild(script);
+    return () => script.remove();
+  }, []);
+}
+
+export const MCPRegistrar = () => {
+  useRelayEmbed();
+  const deployedApps = useDeployedApps();
+  const { retrieveConfiguration } = useConfigRetriever();
+
+  return (
+    <>
+      {deployedApps.flatMap((app) => {
+        const buildConfig = retrieveConfiguration<'build'>({
+          configType: 'build',
+          name: app.name,
+        });
+
+        if (!buildConfig?.spec.mcpTools) return [];
+
+        const runtimeConfig = retrieveConfiguration<Record<string, unknown>>({
+          configType: 'run',
+          name: app.name,
+        });
+
+        const mcpToolsModuleInfo = buildConfig.spec.mcpTools;
+        const selfConfiguration =
+          (runtimeConfig?.spec?.selfConfiguration as Record<string, unknown>) ??
+          {};
+        const auth = runtimeConfig?.spec?.auth;
+        const authConfig =
+          auth && (auth as { kind: string }).kind === 'OIDC'
+            ? (auth as unknown as OIDCConfig)
+            : null;
+        const remoteEntryUrl = app.url + buildConfig.spec.remoteEntryPath;
+
+        return [
+          <ErrorBoundary key={app.name} FallbackComponent={() => null}>
+            <ComponentWithFederatedImports
+              componentWithInjectedImports={_InternalMCPRegistrar}
+              componentProps={{ mcpToolsModuleInfo, selfConfiguration, authConfig }}
+              renderOnError={null}
+              federatedImports={[{ ...mcpToolsModuleInfo, remoteEntryUrl }]}
+            />
+          </ErrorBoundary>,
+        ];
+      })}
+    </>
+  );
+};