Google Cloud AI Platform

In the Google Cloud Console (console.cloud.google.com), make sure you are in the correct GCP project (shown in the project dropdown at the top). Navigate to IAM & Admin → Service Accounts in the left sidebar. Click 'Create Service Account.' Give it a name like `bubble-vertex-ai` and a description. Click 'Create and Continue.' In the 'Grant this service account access to project' step, click the Role dropdown and search for 'Vertex AI User.' Select it and click 'Continue,' then 'Done.' On the Service Accounts list, find your new account and click the three-dot menu → 'Manage keys.' Click 'Add Key' → 'Create new key' → choose JSON → click 'Create.' A JSON file downloads to your computer automatically. **Store this JSON key securely.** It contains a private key that grants access to your GCP project's Vertex AI resources. You will paste its contents into a Cloud Function secret in the next step — never commit it to version control or paste it into Bubble's workflow editor directly. Note the following values from the JSON key file — you will need them: - `project_id` - `client_email` (looks like `bubble-vertex-ai@your-project.iam.gserviceaccount.com`) - `private_key` (a long RSA private key string) Also note your Vertex AI endpoint details: - Region (e.g., `us-central1`) - Endpoint ID (visible in Vertex AI → Endpoints in the GCP Console) - Your prediction URL format: `https://{region}-aiplatform.googleapis.com/v1/projects/{project}/locations/{region}/endpoints/{endpoint_id}:predict`

1// Vertex AI prediction endpoint URL format:
2https://us-central1-aiplatform.googleapis.com/v1/
3  projects/YOUR_PROJECT_ID/
4  locations/us-central1/
5  endpoints/YOUR_ENDPOINT_ID:predict
6
7// Service account JSON key fields you need:
8// - type: 'service_account'
9// - project_id: 'your-project-id'
10// - private_key_id: 'key-id-string'
11// - private_key: '-----BEGIN RSA PRIVATE KEY-----\n...',
12// - client_email: 'bubble-vertex-ai@your-project.iam.gserviceaccount.com'
13// - token_uri: 'https://oauth2.googleapis.com/token'

Bubble cannot sign JWTs natively, so you need a minimal proxy endpoint. The simplest option is a Google Cloud Function (or Cloud Run service) that reads the service account credentials from its environment and returns a valid access_token on request. In the GCP Console, navigate to Cloud Functions → Create Function. Choose: - Environment: 2nd gen - Function name: `get-vertex-token` - Region: same as your Vertex AI endpoint - Trigger: HTTPS - Authentication: **Allow unauthenticated invocations** (you will add your own API key check for security) In the inline code editor, choose Node.js runtime and paste the following function. This uses the `google-auth-library` package (included by default in Cloud Functions) to generate a Bearer token: Add a simple shared secret check at the top — generate a random token (e.g., a UUID) and add it as an environment variable `PROXY_SECRET`. Bubble will pass this secret in a header to authenticate calls to your proxy, keeping it server-side via the Private checkbox. Deploy the function. Copy the Trigger URL shown after deployment — this is the endpoint Bubble's Backend Workflow will call.

1// Cloud Function: get-vertex-token (Node.js 20)
2// File: index.js
3
4const { GoogleAuth } = require('google-auth-library');
5
6exports.getVertexToken = async (req, res) => {
7  // Simple shared secret check
8  const secret = req.headers['x-proxy-secret'];
9  if (secret !== process.env.PROXY_SECRET) {
10    return res.status(401).json({ error: 'Unauthorized' });
11  }
12
13  try {
14    const auth = new GoogleAuth({
15      scopes: ['https://www.googleapis.com/auth/cloud-platform']
16    });
17    const client = await auth.getClient();
18    const tokenResponse = await client.getAccessToken();
19
20    res.json({
21      access_token: tokenResponse.token,
22      expires_in: 3600
23    });
24  } catch (error) {
25    res.status(500).json({ error: error.message });
26  }
27};
28
29// package.json:
30// { "dependencies": { "google-auth-library": "^9.0.0" } }
31
32// Environment variables to set in Cloud Function:
33// PROXY_SECRET = your-random-secret-uuid
34// GOOGLE_APPLICATION_CREDENTIALS handled automatically by Cloud Functions runtime
35// (upload the service account JSON key in the 'Service Account' settings of the function)

With your token proxy deployed, set up the Bubble infrastructure to call it and store the resulting token. First, add fields to Bubble's User data type: Data tab → User → Add field: - `vertex_access_token` (text) - `vertex_token_expiry` (date) In the Plugins tab, configure the API Connector for your token proxy. Click 'Add another API,' name it 'GCP Token Proxy.' Set the call method to GET or POST (depending on your Cloud Function), URL to your Cloud Function trigger URL. Add a shared header `X-Proxy-Secret` with your proxy secret value — **mark it Private**. Go to Settings → API → check 'This app exposes a Workflow API.' Open Backend Workflows and click 'Add workflow.' Name it `refresh_vertex_token`. In this workflow: 1. Add action: 'Plugins → API Connector → GCP Token Proxy → Get Token' (Initialize the call first with a test request to detect the `access_token` field) 2. Add action: 'Make changes to a Thing' → select 'Current User' → set `vertex_access_token` = result of step 1's `access_token` field, and `vertex_token_expiry` = Current date/time + 3600 seconds (i.e., +1 hour) Create a second Backend Workflow named `check_and_refresh_token` that: 1. Checks a condition: 'Only when Current User's vertex_token_expiry is less than Current date/time + 5 minutes' 2. Calls the `refresh_vertex_token` workflow (using 'Schedule API Workflow' at Current date/time) On your app's index page, add a page-load workflow that calls 'Schedule API Workflow' targeting `check_and_refresh_token` at Current date/time whenever a user logs in — ensuring the token is fresh before any AI features are used.

1// Bubble Backend Workflow: refresh_vertex_token
2// Triggered by: check_and_refresh_token or manual token request
3//
4// Step 1: API Connector call → GCP Token Proxy → Get Token
5//   GET https://us-central1-YOUR_FUNCTION.cloudfunctions.net/get-vertex-token
6//   Header: X-Proxy-Secret: <proxy_secret>  // Private
7//   Response: { "access_token": "ya29.xxx", "expires_in": 3600 }
8//
9// Step 2: Make changes to a Thing
10//   Thing: Current User
11//   vertex_access_token = Result of step 1's access_token
12//   vertex_token_expiry = Current date/time + 3600 seconds
13
14// Pre-call token check pattern in any Bubble workflow:
15// Condition: Current User's vertex_token_expiry < now + 5 minutes?
16//   YES → Schedule API Workflow: refresh_vertex_token (at now)
17//         Pause before next action: 2 seconds
18//         [Then proceed with Vertex AI call]
19//   NO  → [Proceed directly with Vertex AI call]

With Bearer tokens being stored in User records, configure the Vertex AI prediction call in Bubble's API Connector. Click 'Add another API' and name it 'Vertex AI.' In the API group, add a shared header: - Name: `Authorization` - Value: `Bearer ` + a dynamic parameter named `access_token` — **mark Private** This `access_token` parameter will be populated dynamically from `Current User's vertex_access_token` field in every workflow that calls this API. Also add: - `Content-Type: application/json` Now add the prediction call. Click 'Add another call,' name it 'Predict.' Set method to POST and URL to your full Vertex AI endpoint URL: `https://us-central1-aiplatform.googleapis.com/v1/projects/YOUR_PROJECT_ID/locations/us-central1/endpoints/YOUR_ENDPOINT_ID:predict` The JSON body structure is: ```json { "instances": [ { "feature_name_1": "<dynamic_value_1>", "feature_name_2": "<dynamic_value_2>" } ] } ``` The exact field names inside the instances object must match your deployed model's input schema — check your model's signature in Vertex AI Studio or via the Model Registry in GCP Console. Click 'Initialize call.' You must supply a real `access_token` (copy the current token from the User record in Bubble's Data tab for your test user) and valid instance data that your model accepts. A successful initialization returns a prediction response — Bubble detects the `predictions` array for result binding.

1// API Connector: Vertex AI → Predict
2// Method: POST
3// URL: https://us-central1-aiplatform.googleapis.com/v1/
4//   projects/YOUR_PROJECT_ID/
5//   locations/us-central1/
6//   endpoints/YOUR_ENDPOINT_ID:predict
7//
8// Shared headers (API group level):
9// Authorization: Bearer <access_token>  // Private, dynamic from User record
10// Content-Type: application/json
11//
12// JSON body:
13{
14  "instances": [
15    {
16      "feature_1": "<dynamic_input_1>",
17      "feature_2": "<dynamic_input_2>"
18    }
19  ]
20}
21
22// Example for a text classification model:
23{
24  "instances": [
25    { "content": "<dynamic_user_text_input>" }
26  ]
27}
28
29// Vertex AI response format:
30{
31  "predictions": [
32    {
33      "classes": ["positive", "negative", "neutral"],
34      "scores": [0.85, 0.10, 0.05]
35    }
36  ],
37  "deployedModelId": "1234567890",
38  "model": "projects/.../models/..."
39}

Now connect the prediction API to your Bubble UI. The pattern depends on your use case, but the general structure is: 1. User submits a form or triggers an action in Bubble 2. A workflow fires, first checking the token expiry 3. The workflow calls 'Schedule API Workflow' to run a Backend Workflow that makes the Vertex AI prediction call 4. The Backend Workflow writes the prediction result to a Bubble database record 5. The UI updates to show the result **Example — text classification:** Add a Text Input and a 'Classify' button on a Bubble page. When the button is clicked: - Action 1: Create a 'Prediction_Request' Thing in Bubble with the input text and status='pending' - Action 2: Schedule API Workflow: `run_vertex_prediction` at Current date/time, passing the Prediction_Request's unique ID In the `run_vertex_prediction` Backend Workflow: - Step 1: Check token expiry condition → refresh if needed (with 2-second pause) - Step 2: Call Vertex AI Predict with `instances[0].content` = the Prediction_Request's input text, `access_token` = Current User's vertex_access_token - Step 3: Make changes to Prediction_Request Thing → set `result` = response's predictions[0].classes[0] (the top class), `score` = response's predictions[0].scores[0], `status` = 'complete' On the Bubble page, make the result text element's visibility conditional on the Prediction_Request Thing's status = 'complete.' Use a Repeating Group with 'Do a search for Prediction_Request' that auto-refreshes or use the Bubble 'Refresh on data change' pattern to update the display when the Backend Workflow completes. Cache prediction results: if the same input is submitted multiple times, check whether a Prediction_Request with that input already exists before calling Vertex AI. This avoids redundant API calls and saves both GCP prediction costs and Bubble WUs.

1// Bubble data type: Prediction_Request
2// Fields:
3// - input_text (text)
4// - predicted_class (text)
5// - confidence_score (number)
6// - status (text: 'pending' | 'complete' | 'error')
7// - created_by (user)
8// - created_at (date)
9
10// Backend Workflow: run_vertex_prediction
11// Parameters: prediction_request_id (text)
12//
13// Step 1: Token check
14//   When: Current User's vertex_token_expiry < now + 5 min
15//   → Schedule API Workflow: refresh_vertex_token (at now)
16//   → Pause before next action: 2 seconds
17//
18// Step 2: Call Vertex AI
19//   Plugins → Vertex AI → Predict
20//   access_token: Current User's vertex_access_token  // Private
21//   instances[0].content: [lookup Prediction_Request by id].input_text
22//
23// Step 3: Update record
24//   Make changes to Thing: Prediction_Request (found by id)
25//   predicted_class: Result of step 2's predictions[0].classes[0]
26//   confidence_score: Result of step 2's predictions[0].scores[0]
27//   status: 'complete'

Run a complete end-to-end test before deploying to production: **1. Token expiry simulation:** In Bubble's Data tab, find your test user and manually set `vertex_token_expiry` to a time in the past. Trigger a prediction workflow — the token check should fire `refresh_vertex_token` automatically and succeed. Check Logs tab → Workflow logs to confirm the refresh ran before the prediction call. **2. Region mismatch:** If your Vertex AI endpoint is in `europe-west4` but your API Connector URL says `us-central1`, the call returns 404 (not 401). The region in the URL must exactly match the region where the endpoint was deployed. Check Vertex AI → Endpoints in GCP Console for the deployed region. **3. Instance schema mismatch:** If the field names in your instances object do not match the model's input schema, Vertex AI returns 400 with a description like 'Instance feature not found: feature_name.' Check the model's input schema in Vertex AI Studio → Model Registry → your model → Schema tab. **4. WU monitoring:** Each Vertex AI prediction call from Bubble consumes Workload Units for the API call action and the Backend Workflow run. If your app has many users making predictions frequently, monitor Bubble's WU dashboard under Settings → Billing. Cache identical inputs to avoid redundant prediction calls. **5. Privacy rules:** Any Prediction_Request records stored in Bubble's database should have privacy rules — go to Data tab → Prediction_Request type → Privacy → add rule: 'This Thing is visible to Current User when created_by = Current User.' RapidDev's team has architected AI integrations like this across dozens of production Bubble apps — for help with custom model integration or scaling, reach out at rapidevelopers.com/contact.

1// Error diagnostic guide:
2//
3// 401 Unauthorized
4//   → Access token expired or Cloud Function proxy returned invalid token
5//   → Check Cloud Function logs in GCP Console → Cloud Functions → Logs
6//   → Manually trigger refresh_vertex_token Backend Workflow and verify
7//      the new token is stored in the User record
8//
9// 404 Not Found
10//   → Region in URL does not match deployed endpoint region
11//   → OR endpoint ID is wrong (deleted/redeployed endpoint gets a new ID)
12//   → Check Vertex AI → Endpoints in GCP Console for exact region + ID
13//
14// 400 Bad Request
15//   → Instance field names or types don't match model schema
16//   → Check model input signature in Vertex AI Studio
17//   → Verify body JSON structure matches {"instances": [{...}]} format
18//
19// 500 from Cloud Function
20//   → Service account doesn't have Vertex AI User role
21//   → OR Cloud Function's own service account lacks permissions
22//   → Check GCP Console → IAM for the service account's assigned roles