Google Cloud AI Platform

Before writing any FlutterFlow configuration, you need a deployed Vertex AI endpoint to call. Open the Google Cloud Console (console.cloud.google.com) and navigate to Vertex AI → Online Prediction → Endpoints. If you already have a deployed model, click on it and note three values from the endpoint details page: the Project ID (visible in the top-left project selector), the Region (e.g. us-central1), and the Endpoint ID (a long numeric string shown in the endpoint details). If you do not have a model deployed yet, you can either upload a pre-built TensorFlow SavedModel to the Vertex AI Model Registry (Vertex AI → Model Registry → Import) and deploy it to a new endpoint, or use one of Google's pre-trained AutoML models. For testing purposes, Vertex AI also offers the Gemini API via the same auth pattern, but that uses a different endpoint URL structure. The prediction endpoint URL you will eventually call from the Cloud Function follows this exact pattern: `https://{REGION}-aiplatform.googleapis.com/v1/projects/{PROJECT_ID}/locations/{REGION}/endpoints/{ENDPOINT_ID}:predict`. Write down all three values — a typo in the region causes a 404 that is difficult to diagnose because the error message from Google is generic. Also note whether your model expects a `instances` array of objects or an `instances` array of arrays (depending on how the model was trained). Check the endpoint's 'Sample request' tab in the Cloud Console to see the exact input format your model expects.

In the Google Cloud Console, navigate to IAM & Admin → Service Accounts. Click 'Create Service Account', give it a name like 'vertexai-proxy', and on step 2 assign the 'Vertex AI User' role. After creating the account, click the three-dot menu on its row and select 'Manage Keys'. Click 'Add Key → Create new key → JSON'. Download the JSON file — this file contains the private key that will live in your Cloud Function. Now open your Firebase project's functions directory (or create a new Cloud Functions project). The proxy function needs the `google-auth-library` npm package, which handles JWT signing and token exchange automatically without you manually building the token request. In your package.json, add `"google-auth-library": "^9.0.0"` to dependencies. The function reads the service-account JSON from an environment variable (never hardcode it), uses the `GoogleAuth` class to obtain a short-lived access token scoped to `https://www.googleapis.com/auth/cloud-platform`, then POSTs the `{instances: [...]}` body to the Vertex AI :predict URL with the token in the Authorization header. The function returns the raw Vertex AI response to FlutterFlow. Deploy the function, then test it by POSTing a sample instance to the function URL using a tool like Postman or curl. Confirm that the function returns a predictions array before moving to FlutterFlow. Store the service-account JSON in Firebase Secret Manager rather than as a plain environment variable for production use.

1// Cloud Function: Vertex AI proxy
2const functions = require('firebase-functions');
3const { GoogleAuth } = require('google-auth-library');
4const fetch = require('node-fetch');
5
6const PROJECT_ID = process.env.GCP_PROJECT_ID;
7const REGION = process.env.VERTEX_REGION;       // e.g. 'us-central1'
8const ENDPOINT_ID = process.env.VERTEX_ENDPOINT; // numeric endpoint ID
9
10// Service account JSON stored as an env var (base64-encoded in prod)
11const SERVICE_ACCOUNT_JSON = JSON.parse(
12  Buffer.from(process.env.SERVICE_ACCOUNT_B64, 'base64').toString('utf8')
13);
14
15exports.vertexPredict = functions.https.onRequest(async (req, res) => {
16  res.set('Access-Control-Allow-Origin', '*');
17  res.set('Access-Control-Allow-Headers', 'Content-Type');
18  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
19
20  const { instances } = req.body;
21  if (!instances) { res.status(400).json({ error: 'instances required' }); return; }
22
23  // Mint a short-lived access token
24  const auth = new GoogleAuth({
25    credentials: SERVICE_ACCOUNT_JSON,
26    scopes: ['https://www.googleapis.com/auth/cloud-platform']
27  });
28  const client = await auth.getClient();
29  const { token } = await client.getAccessToken();
30
31  const url = `https://${REGION}-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/${REGION}/endpoints/${ENDPOINT_ID}:predict`;
32
33  const vertexRes = await fetch(url, {
34    method: 'POST',
35    headers: {
36      'Authorization': `Bearer ${token}`,
37      'Content-Type': 'application/json'
38    },
39    body: JSON.stringify({ instances })
40  });
41
42  const data = await vertexRes.json();
43  res.status(vertexRes.status).json(data);
44});

With your Cloud Function proxy running and returning correct predictions, open your FlutterFlow project. Click API Calls in the left navigation panel, then click + Add and choose Create API Group. Name the group 'VertexAI' and set the Base URL to your Cloud Function's HTTPS URL (e.g. `https://us-central1-your-project.cloudfunctions.net/vertexPredict`). You do not need to add any headers to the group itself — all authentication is handled inside the Cloud Function. Next, add an API Call inside the group: click the + icon next to the group name and select Add API Call. Name it 'Predict' and set the method to POST. In the Variables tab, add a variable named `instances` of type String — you will pass a JSON string representation of your instances array from FlutterFlow (since FlutterFlow's API Call variable types are limited to primitive types, you will serialize the instances as a JSON string and parse it in the Cloud Function, or structure the body directly). In the Request Body tab, switch to JSON body type and enter the body as `{"instances": {{ instances }} }`. Note that for more complex input structures, you may need to define multiple individual variables and build the instances object in FlutterFlow's Action Flow Editor before passing it to the API Call. Go to the Response & Test tab. In the sample response field, paste a real Vertex AI response from your test earlier. Click Generate JSON Paths. FlutterFlow will parse the predictions array and generate paths like `$.predictions[0]` or deeper paths if your model returns structured objects. Name them clearly (e.g. `topLabel`, `confidence`, `forecastValue`) based on what your model returns. Save the API Group.

1// Sample Vertex AI API Call configuration
2{
3  "group_name": "VertexAI",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/vertexPredict",
5  "calls": [
6    {
7      "name": "Predict",
8      "method": "POST",
9      "endpoint": "",
10      "headers": { "Content-Type": "application/json" },
11      "body": { "instances": "{{ instances }}" },
12      "variables": [{ "name": "instances", "type": "String" }],
13      "json_paths": [
14        { "name": "prediction0", "path": "$.predictions[0]" },
15        { "name": "deployedModelId", "path": "$.deployedModelId" }
16      ]
17    }
18  ]
19}

Now add a screen in FlutterFlow that collects the input your model needs and displays the prediction. The exact UI depends on your model type, but the wiring pattern is the same for all models. For a text or tabular model: add a TextField widget where users enter the input (e.g. a product name, a sentence, or a set of numbers). Add an App State variable named `predictionResult` of type String. Place a Button labeled 'Get Prediction'. In the button's Actions panel, click + Add Action → Backend/Database → API Request, select the VertexAI group, select Predict, and set the `instances` variable to your serialized input — for simple string inputs you can build the JSON inline using FlutterFlow's string interpolation: `["${your_text_input}"]` but for structured inputs you may need a Dart Custom Action to build the JSON string first. After the API Request action completes, add a Set App State action that stores the `prediction0` JSON path result into `predictionResult`. Add a Text widget on the screen bound to `predictionResult` to display the output. For image inputs: add a FilePicker or camera button, upload the image to Firebase Storage using the FlutterFlow Upload action, get the GCS URI (`gs://your-bucket/...`), pass that URI as the instances value to the Predict call, and display the returned label or confidence score. Test in FlutterFlow Run Mode by entering a sample input and clicking Get Prediction. Confirm the Text widget updates with a real prediction label or value from your Vertex AI model.

Vertex AI access tokens expire after approximately one hour. In the current proxy architecture, the Cloud Function mints a fresh token on every request using `client.getAccessToken()`, which is correct — the `google-auth-library` handles caching the token for its lifetime and only fetches a new one when needed. You do not need to implement token refresh logic in FlutterFlow itself. For quota errors: Vertex AI enforces per-model prediction quotas. If your app calls the endpoint too frequently or with too many instances in a single request, the API returns a 429 or a `RESOURCE_EXHAUSTED` error. Add error handling in the FlutterFlow Action Flow Editor: after the API Request action, add an If/Else condition checking whether the HTTP status code is not 200. If the condition is true, show a Snackbar widget with a user-friendly message like 'Our AI service is busy — please try again in a moment.' Do not surface the raw Google error message to users. For web builds: because your FlutterFlow web app calls your Cloud Function — not Google's API directly — CORS is already handled. The Cloud Function sets `Access-Control-Allow-Origin: *` and returns a 204 for OPTIONS preflight requests. Mobile builds (iOS and Android) are not affected by CORS at all. If you see CORS errors in web preview, verify that the function code includes the CORS headers before any other logic and that the OPTIONS method returns early with status 204. For production, consider adding FlutterFlow Firebase Authentication and requiring a valid Firebase ID token in the Cloud Function (`req.headers.authorization`) so that only authenticated users of your app can trigger Vertex AI predictions. This prevents anonymous abuse if someone discovers your Cloud Function URL.

1// Add to Cloud Function: optional auth check
2const admin = require('firebase-admin');
3if (!admin.apps.length) admin.initializeApp();
4
5// Near the top of the handler, after CORS:
6const authHeader = req.headers.authorization || '';
7if (!authHeader.startsWith('Bearer ')) {
8  res.status(401).json({ error: 'Unauthorized' });
9  return;
10}
11const idToken = authHeader.split('Bearer ')[1];
12try {
13  await admin.auth().verifyIdToken(idToken);
14} catch (e) {
15  res.status(401).json({ error: 'Invalid token' });
16  return;
17}

The most common failure with Vertex AI integrations is a region mismatch — if your endpoint was deployed in `us-central1` but the Cloud Function's VERTEX_REGION environment variable is set to `us-east1`, every prediction call returns a 404 with a generic 'not found' message. Before declaring the integration complete, verify the region by opening the Vertex AI → Online Prediction → Endpoints page in the Cloud Console, clicking your endpoint, and confirming the region shown in the URL and details panel matches your Cloud Function environment variable exactly. Run a full end-to-end test from FlutterFlow's Run Mode: enter a real input, submit it, watch the network requests in your browser's developer tools (for web preview) to confirm the call goes to your Cloud Function URL and the Cloud Function URL returns a 200 with predictions in the response body. For mobile testing, use FlutterFlow's Test Mode on a device or use the Run button with a connected Android/iOS device. Also verify that the `deployedModelId` field in the predictions response matches the model version you expected. This confirms that the correct model version is serving predictions. If you have multiple model versions deployed to the same endpoint, you can specify a traffic split in the Cloud Console to control which version handles each prediction request. If you would like help setting up the Cloud Function proxy, configuring the service account permissions, or troubleshooting the Vertex AI response format, the RapidDev team builds FlutterFlow AI integrations like this regularly — reach out for a free scoping call at rapidevelopers.com/contact.