Merge pull request #2055 from redpanda-data/av/mcp-sa-ui

Use MCP v1 api and allow specifying service account

Author: alenkacz

frontend/src/components/constants.ts

@@ -15,4 +15,5 @@ export const FEATURE_FLAGS = {
   enableAiAgentsInConsole: false,
   enableAiAgentsInspectorInConsole: false,
   enableAiAgentsInConsoleServerless: false,
+  enableMcpServiceAccount: false,
 };

frontend/src/components/pages/agents/details/ai-agent-configuration-tab.tsx

@@ -43,10 +43,9 @@ import {
   AIAgentUpdateSchema,
   UpdateAIAgentRequestSchema,
 } from 'protogen/redpanda/api/dataplane/v1alpha3/ai_agent_pb';
-import type { MCPServer } from 'protogen/redpanda/api/dataplane/v1alpha3/mcp_pb';
 import { useCallback, useMemo, useState } from 'react';
 import { useGetAIAgentQuery, useUpdateAIAgentMutation } from 'react-query/api/ai-agent';
-import { useListMCPServersQuery } from 'react-query/api/remote-mcp';
+import { type MCPServer, useListMCPServersQuery } from 'react-query/api/remote-mcp';
 import { useListSecretsQuery } from 'react-query/api/secret';
 import { useParams } from 'react-router-dom';
 import { toast } from 'sonner';

frontend/src/components/pages/mcp-servers/create/metadata-step.tsx

@@ -22,6 +22,7 @@ import { Textarea } from 'components/redpanda-ui/components/textarea';
 import { Heading, Text } from 'components/redpanda-ui/components/typography';
 import { ResourceTierSelect } from 'components/ui/connect/resource-tier-select';
 import { TagsFieldList } from 'components/ui/tag/tags-field-list';
+import { isFeatureFlagEnabled } from 'config';
 import type { UseFieldArrayReturn, UseFormReturn } from 'react-hook-form';
 
 import type { FormValues } from './schemas';
@@ -94,6 +95,27 @@ export const MetadataStep: React.FC<MetadataStepProps> = ({ form, tagFields, app
                 </FormItem>
               )}
             />
+
+            {isFeatureFlagEnabled('enableMcpServiceAccount') && (
+              <div className="space-y-2">
+                <FormLabel required>Service Account Name</FormLabel>
+                <FormField
+                  control={form.control}
+                  name="serviceAccountName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input placeholder="e.g., cluster-abc123-mcp-my-server-sa" {...field} />
+                      </FormControl>
+                      <Text className="text-sm" variant="muted">
+                        This service account will be created automatically when you create the MCP server.
+                      </Text>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            )}
           </div>
         </FormContainer>
       </div>

frontend/src/components/pages/mcp-servers/create/remote-mcp-create-page.tsx

@@ -20,17 +20,19 @@ import { defineStepper } from 'components/redpanda-ui/components/stepper';
 import { Heading, Text } from 'components/redpanda-ui/components/typography';
 import { useLintHints } from 'components/ui/lint-hint/use-lint-hints';
 import { useSecretDetection } from 'components/ui/secret/use-secret-detection';
+import {
+  ServiceAccountSelector,
+  type ServiceAccountSelectorRef,
+} from 'components/ui/service-account/service-account-selector';
 import { ExpandedYamlDialog } from 'components/ui/yaml/expanded-yaml-dialog';
 import { useYamlLabelSync } from 'components/ui/yaml/use-yaml-label-sync';
+import { config, isFeatureFlagEnabled } from 'config';
 import { ArrowLeft, FileText, Hammer, Loader2 } from 'lucide-react';
-import {
-  CreateMCPServerRequestSchema,
-  LintMCPConfigRequestSchema,
-} from 'protogen/redpanda/api/dataplane/v1alpha3/mcp_pb';
-import React, { useMemo, useState } from 'react';
+import { MCPServer_ServiceAccountSchema } from 'protogen/redpanda/api/dataplane/v1/mcp_pb';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useCreateMCPServerMutation, useLintMCPConfigMutation } from 'react-query/api/remote-mcp';
-import { useListSecretsQuery } from 'react-query/api/secret';
+import { useCreateSecretMutation, useListSecretsQuery } from 'react-query/api/secret';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { formatToastErrorMessageGRPC } from 'utils/toast.utils';
@@ -64,20 +66,59 @@ export const RemoteMCPCreatePage: React.FC = () => {
   const navigate = useNavigate();
   const { mutateAsync: createServer, isPending: isCreateMCPServerPending } = useCreateMCPServerMutation();
   const { mutateAsync: lintConfig, isPending: isLintConfigPending } = useLintMCPConfigMutation();
+  const { mutateAsync: createSecret, isPending: isCreateSecretPending } = useCreateSecretMutation({
+    skipInvalidation: true,
+  });
 
   // State for expanded YAML dialog
   const [expandedTool, setExpandedTool] = useState<{ index: number; isOpen: boolean } | null>(null);
 
   // Query existing secrets
   const { data: secretsData } = useListSecretsQuery();
 
+  // Ref to ServiceAccountSelector to call createServiceAccount
+  const serviceAccountSelectorRef = useRef<ServiceAccountSelectorRef>(null);
+
+  // Track the created service account info and pending state
+  const [serviceAccountInfo, setServiceAccountInfo] = useState<{
+    secretName: string;
+    serviceAccountId: string;
+  } | null>(null);
+  const [isCreateServiceAccountPending, setIsCreateServiceAccountPending] = useState(false);
+
   // Form setup
   const form = useForm<FormValues>({
     resolver: zodResolver(FormSchema),
     defaultValues: initialValues,
     mode: 'onChange',
   });
 
+  // Track the display name to auto-generate service account name
+  const displayName = form.watch('displayName');
+  const serviceAccountName = form.watch('serviceAccountName');
+
+  // Auto-generate service account name when MCP server name changes
+  useEffect(() => {
+    if (displayName) {
+      const clusterType = config.isServerless ? 'serverless' : 'cluster';
+      const sanitizedServerName = displayName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+      const generatedName = `${clusterType}-${config.clusterId}-mcp-${sanitizedServerName}-sa`;
+
+      // Only update if the field is empty or matches the previous auto-generated pattern
+      const currentValue = form.getValues('serviceAccountName');
+      if (!currentValue || currentValue.startsWith(`${clusterType}-${config.clusterId}-mcp-`)) {
+        form.setValue('serviceAccountName', generatedName, { shouldValidate: false });
+      }
+    }
+  }, [displayName, form]);
+
+  // Clear cached service account when service account name changes
+  useEffect(() => {
+    if (serviceAccountInfo && serviceAccountName) {
+      setServiceAccountInfo(null);
+    }
+  }, [serviceAccountName, serviceAccountInfo]);
+
   const {
     fields: tagFields,
     append: appendTag,
@@ -117,7 +158,11 @@ export const RemoteMCPCreatePage: React.FC = () => {
 
   const handleNext = async (isOnMetadataStep: boolean, goNext: () => void) => {
     if (isOnMetadataStep) {
-      const valid = await form.trigger(['displayName', 'description', 'resourcesTier', 'tags']);
+      const fieldsToValidate: Array<keyof FormValues> = ['displayName', 'description', 'resourcesTier', 'tags'];
+      if (isFeatureFlagEnabled('enableMcpServiceAccount')) {
+        fieldsToValidate.push('serviceAccountName');
+      }
+      const valid = await form.trigger(fieldsToValidate);
       if (!valid) {
         return;
       }
@@ -139,11 +184,9 @@ export const RemoteMCPCreatePage: React.FC = () => {
       },
     };
 
-    const response = await lintConfig(
-      create(LintMCPConfigRequestSchema, {
-        tools: toolsMap,
-      })
-    );
+    const response = await lintConfig({
+      tools: toolsMap,
+    });
 
     // Update lint hints for this tool
     setLintHints((prev) => ({
@@ -152,6 +195,30 @@ export const RemoteMCPCreatePage: React.FC = () => {
     }));
   };
 
+  const createServiceAccountIfNeeded = async (
+    serverName: string
+  ): Promise<{ secretName: string; serviceAccountId: string } | null> => {
+    // If we already created one in this session, use it
+    if (serviceAccountInfo) {
+      return serviceAccountInfo;
+    }
+
+    // Call the ServiceAccountSelector to create the service account
+    if (!serviceAccountSelectorRef.current) {
+      toast.error('Service account selector not initialized');
+      return null;
+    }
+
+    // The pending state is automatically tracked via onPendingChange callback
+    const result = await serviceAccountSelectorRef.current.createServiceAccount(serverName);
+
+    if (result) {
+      setServiceAccountInfo(result);
+    }
+
+    return result;
+  };
+
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complexity 56, refactor later
   const handleValidationError = (error: ConnectError) => {
     if (error.code === ConnectCode.InvalidArgument && error.details) {
@@ -235,19 +302,47 @@ export const RemoteMCPCreatePage: React.FC = () => {
       };
     }
 
+    const useMcpServiceAccount = isFeatureFlagEnabled('enableMcpServiceAccount');
+    let serviceAccountConfig: ReturnType<typeof create<typeof MCPServer_ServiceAccountSchema>> | undefined;
+
+    // Create service account if feature flag is enabled
+    // NOTE: Service account and secret are created before MCP server creation.
+    // If server creation fails, these resources will not be automatically cleaned up.
+    // This matches the AI agents implementation pattern.
+    if (useMcpServiceAccount) {
+      const serviceAccountResult = await createServiceAccountIfNeeded(values.displayName);
+      if (!serviceAccountResult) {
+        return; // Error already shown by createServiceAccountIfNeeded
+      }
+
+      const { secretName, serviceAccountId } = serviceAccountResult;
+
+      // Add service_account_id and secret_id to tags for easy deletion
+      tagsMap.service_account_id = serviceAccountId;
+      tagsMap.secret_id = secretName;
+
+      serviceAccountConfig = create(MCPServer_ServiceAccountSchema, {
+        clientId: `\${secrets.${secretName}.client_id}`,
+        clientSecret: `\${secrets.${secretName}.client_secret}`,
+      });
+    }
+
+    const mcpServerPayload = {
+      displayName: values.displayName.trim(),
+      description: values.description?.trim() ?? '',
+      tools: toolsMap,
+      tags: tagsMap,
+      resources: {
+        cpuShares: tier?.cpu ?? '200m',
+        memoryShares: tier?.memory ?? '800M',
+      },
+      ...(useMcpServiceAccount && { serviceAccount: serviceAccountConfig }),
+    };
+
     await createServer(
-      create(CreateMCPServerRequestSchema, {
-        mcpServer: {
-          displayName: values.displayName.trim(),
-          description: values.description?.trim() ?? '',
-          tools: toolsMap,
-          tags: tagsMap,
-          resources: {
-            cpuShares: tier?.cpu ?? '200m',
-            memoryShares: tier?.memory ?? '800M',
-          },
-        },
-      }),
+      {
+        mcpServer: mcpServerPayload,
+      },
       {
         onError: handleValidationError,
         onSuccess: (data) => {
@@ -329,17 +424,28 @@ export const RemoteMCPCreatePage: React.FC = () => {
 
               <Stepper.Controls className={methods.isFirst ? 'flex justify-end' : 'flex justify-between'}>
                 {!methods.isFirst && (
-                  <Button disabled={isCreateMCPServerPending} onClick={methods.prev} variant="outline">
+                  <Button
+                    disabled={isCreateMCPServerPending || isCreateServiceAccountPending}
+                    onClick={methods.prev}
+                    variant="outline"
+                  >
                     <ArrowLeft className="h-4 w-4" />
                     Previous
                   </Button>
                 )}
                 {methods.isLast ? (
                   <Button
-                    disabled={isCreateMCPServerPending || hasFormErrors || hasLintingIssues || hasSecretWarnings}
+                    disabled={
+                      isCreateMCPServerPending ||
+                      isCreateServiceAccountPending ||
+                      isCreateSecretPending ||
+                      hasFormErrors ||
+                      hasLintingIssues ||
+                      hasSecretWarnings
+                    }
                     onClick={form.handleSubmit(onSubmit)}
                   >
-                    {isCreateMCPServerPending ? (
+                    {isCreateMCPServerPending || isCreateServiceAccountPending || isCreateSecretPending ? (
                       <div className="flex items-center gap-2">
                         <Loader2 className="h-4 w-4 animate-spin" />
                         <Text as="span">Creating...</Text>
@@ -358,6 +464,15 @@ export const RemoteMCPCreatePage: React.FC = () => {
                 )}
               </Stepper.Controls>
             </Form>
+            {isFeatureFlagEnabled('enableMcpServiceAccount') && (
+              <ServiceAccountSelector
+                createSecret={createSecret}
+                onPendingChange={setIsCreateServiceAccountPending}
+                ref={serviceAccountSelectorRef}
+                resourceType="MCP server"
+                serviceAccountName={serviceAccountName}
+              />
+            )}
 
             {/* Expanded YAML Editor Dialog */}
             {expandedTool && (

frontend/src/components/pages/mcp-servers/create/schemas.ts

@@ -9,7 +9,7 @@
  */
 
 import { RESOURCE_TIERS } from 'components/ui/connect/resource-tier-select';
-import { MCPServer_Tool_ComponentType } from 'protogen/redpanda/api/dataplane/v1alpha3/mcp_pb';
+import { MCPServer_Tool_ComponentType } from 'react-query/api/remote-mcp';
 import { parse } from 'yaml';
 import { z } from 'zod';
 
@@ -85,6 +85,13 @@ export const FormSchema = z
         },
         { message: 'Tool names must be unique' }
       ),
+    serviceAccountName: z
+      .string()
+      .min(3, 'Service account name must be at least 3 characters')
+      .max(128, 'Service account name must be at most 128 characters')
+      .regex(/^[^<>]+$/, 'Service account name cannot contain < or > characters')
+      .optional()
+      .default(''),
   })
   .strict();
 
@@ -103,4 +110,5 @@ export const initialValues: FormValues = {
       config: '',
     },
   ],
+  serviceAccountName: '',
 };

frontend/src/components/pages/mcp-servers/create/use-metadata-validation.ts

@@ -8,13 +8,15 @@
  * by the Apache License, Version 2.0
  */
 
+import { isFeatureFlagEnabled } from 'config';
 import { useMemo } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 
 import type { FormValues } from './schemas';
 
 export function useMetadataValidation(form: UseFormReturn<FormValues>) {
   const formValues = form.watch();
+  const isServiceAccountEnabled = isFeatureFlagEnabled('enableMcpServiceAccount');
 
   const isMetadataComplete = useMemo(() => {
     // Check displayName (required)
@@ -32,17 +34,20 @@ export function useMetadataValidation(form: UseFormReturn<FormValues>) {
       form.formState.errors.displayName ||
       form.formState.errors.description ||
       form.formState.errors.resourcesTier ||
-      form.formState.errors.tags
+      form.formState.errors.tags ||
+      (isServiceAccountEnabled && form.formState.errors.serviceAccountName)
     );
 
     return !hasMetadataErrors;
   }, [
     formValues.displayName,
     formValues.resourcesTier,
+    isServiceAccountEnabled,
     form.formState.errors.displayName,
     form.formState.errors.description,
     form.formState.errors.resourcesTier,
     form.formState.errors.tags,
+    form.formState.errors.serviceAccountName,
   ]);
 
   return { isMetadataComplete, isMetadataInvalid: !isMetadataComplete };