How to Integrate Lovable with Google Cloud AI Platform

Google Cloud APIs use OAuth2 service accounts for server-to-server authentication. A service account is a special Google account that represents your application rather than a human user. You create it in the Google Cloud Console, grant it the minimum necessary permissions, and download a JSON key file that your Edge Function uses to obtain access tokens. To create the service account, open the Google Cloud Console (console.cloud.google.com) and navigate to IAM & Admin → Service Accounts. Click 'Create Service Account'. Give it a descriptive name like 'lovable-vertex-predictor'. Click 'Create and Continue'. Under 'Grant this service account access to project', add the role 'Vertex AI User' (roles/aiplatform.user). Click 'Continue' then 'Done'. Now create and download the JSON key. Click on the service account you just created. Go to the 'Keys' tab. Click 'Add Key' → 'Create new key' → select 'JSON' → click 'Create'. A JSON file downloads to your computer. This file contains the private key used to sign OAuth2 tokens. Store this JSON key in Lovable. Click the '+' icon next to Preview to open the Cloud panel, then click 'Secrets'. Click 'Add new secret'. In the Name field enter GOOGLE_SERVICE_ACCOUNT_JSON and paste the entire contents of the downloaded JSON file as the value. Also add: - VERTEX_PROJECT_ID — your Google Cloud project ID - VERTEX_LOCATION — the region of your endpoint (e.g., us-central1) - VERTEX_ENDPOINT_ID — your endpoint ID from the Vertex AI console Never share the service account JSON key. It grants the full permissions of the 'Vertex AI User' role to anyone who possesses it. Lovable's security system blocks approximately 1,200 hardcoded credentials daily, but the Secrets panel is the only safe storage location.

Google Cloud APIs require a Bearer access token with every request. Service account authentication works by signing a JWT (JSON Web Token) with the private key from your service account JSON, sending it to Google's token endpoint, and receiving a short-lived access token (valid for 1 hour). This token generation logic must run server-side because it uses the private key. In Deno, the Web Crypto API provides the RSA signing capability needed to sign the JWT. The service account JSON contains the private key in PKCS#8 PEM format. The JWT payload specifies the service account email (iss), the target API scope (scope), the audience (aud: https://oauth2.googleapis.com/token), and expiry times. The code below implements this token exchange. It is designed as a helper module imported by the prediction Edge Function. Caching the token (and only refreshing it when it has less than 5 minutes remaining) is important for performance — a token exchange adds ~200ms of latency and should not happen on every prediction request. Ask Lovable to scaffold the full Edge Function using the prompt in the next step — it will incorporate this auth pattern automatically.

1// supabase/functions/_shared/google-auth.ts
2// Helper to obtain a Google OAuth2 access token from a service account JSON key
3
4interface ServiceAccountKey {
5  client_email: string;
6  private_key: string;
7  token_uri: string;
8}
9
10interface TokenCache {
11  token: string;
12  expiresAt: number;
13}
14
15let tokenCache: TokenCache | null = null;
16
17async function pemToPrivateKey(pem: string): Promise<CryptoKey> {
18  const pemBody = pem
19    .replace('-----BEGIN PRIVATE KEY-----', '')
20    .replace('-----END PRIVATE KEY-----', '')
21    .replace(/\s/g, '');
22  const keyData = Uint8Array.from(atob(pemBody), (c) => c.charCodeAt(0));
23  return crypto.subtle.importKey(
24    'pkcs8',
25    keyData.buffer,
26    { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' },
27    false,
28    ['sign']
29  );
30}
31
32function base64urlEncode(data: string | ArrayBuffer): string {
33  const bytes = typeof data === 'string'
34    ? new TextEncoder().encode(data)
35    : new Uint8Array(data);
36  return btoa(String.fromCharCode(...bytes))
37    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
38}
39
40export async function getGoogleAccessToken(scope: string): Promise<string> {
41  const now = Math.floor(Date.now() / 1000);
42
43  // Return cached token if still valid for > 5 minutes
44  if (tokenCache && tokenCache.expiresAt > now + 300) {
45    return tokenCache.token;
46  }
47
48  const saJson = Deno.env.get('GOOGLE_SERVICE_ACCOUNT_JSON')!;
49  const sa: ServiceAccountKey = JSON.parse(saJson);
50
51  const header = base64urlEncode(JSON.stringify({ alg: 'RS256', typ: 'JWT' }));
52  const payload = base64urlEncode(JSON.stringify({
53    iss: sa.client_email,
54    scope,
55    aud: sa.token_uri || 'https://oauth2.googleapis.com/token',
56    iat: now,
57    exp: now + 3600,
58  }));
59
60  const signingInput = `${header}.${payload}`;
61  const privateKey = await pemToPrivateKey(sa.private_key);
62  const signature = await crypto.subtle.sign(
63    'RSASSA-PKCS1-v1_5',
64    privateKey,
65    new TextEncoder().encode(signingInput)
66  );
67
68  const jwt = `${signingInput}.${base64urlEncode(signature)}`;
69
70  const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
71    method: 'POST',
72    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
73    body: new URLSearchParams({
74      grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
75      assertion: jwt,
76    }),
77  });
78
79  const tokenData = await tokenResponse.json();
80  if (!tokenData.access_token) {
81    throw new Error(`Token exchange failed: ${JSON.stringify(tokenData)}`);
82  }
83
84  tokenCache = { token: tokenData.access_token, expiresAt: now + 3600 };
85  return tokenData.access_token;
86}

With the auth helper in place, create the main prediction Edge Function. This function accepts prediction instances from the frontend, obtains a Google access token using the service account credentials, calls the Vertex AI REST prediction endpoint, and returns the predictions. The Vertex AI REST API for online predictions follows a consistent pattern across model types: POST to https://{LOCATION}-aiplatform.googleapis.com/v1/projects/{PROJECT_ID}/locations/{LOCATION}/endpoints/{ENDPOINT_ID}:predict with a body containing { instances: [...] }. The shape of each instance object depends entirely on the model's input schema — for AutoML tabular models it might be an object with named feature fields; for custom TF models it might be an array of numbers. The response contains a predictions array with one entry per input instance. For classification models, each prediction typically includes class labels and confidence scores. For regression models, it is a numerical value. The Edge Function returns this predictions array as JSON to the frontend. Use the Lovable prompt below to scaffold the function. Customize the instance preprocessing to match your specific model's input format by reviewing the 'Instance and batch predictions' documentation for your deployed model in the Vertex AI console.

1// supabase/functions/vertex-predict/index.ts
2import { getGoogleAccessToken } from '../_shared/google-auth.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9Deno.serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  try {
13    const { instances } = await req.json() as { instances: unknown[] };
14
15    if (!Array.isArray(instances) || instances.length === 0) {
16      return new Response(JSON.stringify({ error: 'instances array is required and must not be empty' }), {
17        status: 400,
18        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
19      });
20    }
21
22    const projectId = Deno.env.get('VERTEX_PROJECT_ID')!;
23    const location = Deno.env.get('VERTEX_LOCATION')!;
24    const endpointId = Deno.env.get('VERTEX_ENDPOINT_ID')!;
25
26    const scope = 'https://www.googleapis.com/auth/cloud-platform';
27    const accessToken = await getGoogleAccessToken(scope);
28
29    const endpoint = `https://${location}-aiplatform.googleapis.com/v1/projects/${projectId}/locations/${location}/endpoints/${endpointId}:predict`;
30
31    const vertexResponse = await fetch(endpoint, {
32      method: 'POST',
33      headers: {
34        'Authorization': `Bearer ${accessToken}`,
35        'Content-Type': 'application/json',
36      },
37      body: JSON.stringify({ instances }),
38    });
39
40    if (!vertexResponse.ok) {
41      const errBody = await vertexResponse.text();
42      console.error(`Vertex AI error ${vertexResponse.status}:`, errBody);
43      return new Response(JSON.stringify({ error: `Vertex AI returned ${vertexResponse.status}` }), {
44        status: vertexResponse.status,
45        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
46      });
47    }
48
49    const result = await vertexResponse.json();
50    return new Response(JSON.stringify({ predictions: result.predictions }), {
51      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
52    });
53  } catch (error) {
54    console.error('vertex-predict error:', error);
55    return new Response(JSON.stringify({ error: String(error) }), {
56      status: 500,
57      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
58    });
59  }
60});

With the Edge Function deployed, build the frontend component in Lovable that collects user input, calls the prediction endpoint, and displays results. The specific UI depends on your model — a tabular classifier needs form fields for each feature; an image model needs a file upload; a text model needs a textarea. The key frontend code is the call to supabase.functions.invoke('vertex-predict', { body: { instances: [instanceObject] } }). The instance object structure must exactly match what your Vertex AI model expects. Review your model's input schema in the Vertex AI console under Endpoints → your endpoint → Model details → Input schema to see the field names and types. For displaying predictions, AutoML classification models return a list of displayNames (class labels) and confidences (probability scores between 0 and 1). Sort by confidence descending and display the top prediction prominently with a bar chart or percentage for the top-3 results. Regression models return a single numerical value — display it with the appropriate unit and format. Describe your model's input and output to Lovable in the chat and it will generate the appropriate form fields, API call, and results display. For instance: 'My Vertex AI model takes customer_age (number), days_since_last_purchase (number), and total_spend (number) as inputs and returns a churn probability between 0 and 1. Build a form with those three fields and display the churn probability as a large percentage with a green/red color based on whether it is above or below 50%.'