How to Integrate Retool with Google Cloud AI Platform

Navigate to Google Cloud Console → IAM & Admin → Service Accounts and click Create Service Account. Give it a descriptive name like retool-vertex-ai-reader. On the permissions step, assign the role Vertex AI User (roles/aiplatform.user) for read and prediction access, or Vertex AI Admin if you need full management capability including model deployment. Click Done to create the account. Next, select the newly created service account from the list, go to the Keys tab, and click Add Key → Create new key → JSON. Google downloads a JSON credentials file to your computer. This file contains the service account email, private key ID, and a private key in RSA format. Keep this file secure — it grants programmatic access to your Vertex AI resources. You will extract the service account email and private key from this file to configure authentication in Retool. Note your Google Cloud project ID and the region where your Vertex AI resources are deployed (e.g., us-central1, europe-west4) as you will need both when constructing API endpoint URLs.

Vertex AI requires a short-lived OAuth 2.0 Bearer token for every API request. The recommended approach for Retool is to use Google's token endpoint to exchange your service account credentials for an access token, then store that token in a Retool configuration variable. Navigate to Settings → Configuration Variables in Retool and add a variable named VERTEX_AI_TOKEN — mark it as a secret so it is restricted to resource configurations. To obtain the token, use the Google token endpoint: POST to https://oauth2.googleapis.com/token with your service account's private key signed JWT. You can generate this token using a script locally or via Google Cloud CLI (gcloud auth print-access-token), then paste the output into the configuration variable. Note that tokens expire after one hour; for production use, implement a Retool Workflow on a 50-minute schedule that refreshes the token automatically. Now navigate to the Resources tab, click Add Resource, and select REST API. Name the resource Vertex AI. Set the Base URL to https://REGION-aiplatform.googleapis.com/v1/projects/YOUR_PROJECT_ID (replace REGION with your deployment region like us-central1 and YOUR_PROJECT_ID with your actual project ID). Under Headers, add Authorization with the value Bearer {{ environment.variables.VERTEX_AI_TOKEN }}. Save the resource. Retool will proxy all queries through this base URL with the Bearer token injected automatically.

1// Retool Workflow: Auto-refresh Vertex AI access token
2// Run this on a 50-minute schedule to keep the token fresh
3// This is a JavaScript code block — calls gcloud token endpoint
4
5// Using a service account JWT exchange
6// In practice: call your own token-refresh endpoint or
7// use Google's token API with a pre-signed JWT
8
9// Example transformer to parse the token response
10const tokenResponse = fetchTokenQuery.data;
11const accessToken = tokenResponse.access_token;
12
13// Store in a config variable via Retool's REST API
14// Or simply return the token for use in subsequent blocks
15return { access_token: accessToken, expires_in: tokenResponse.expires_in };

Open or create a Retool app and click + to create a new query in the Code panel. Select the Vertex AI resource. Set the HTTP method to GET and the path to /locations/REGION/endpoints (replace REGION with your actual region, e.g., us-central1). Leave the body empty. Click Run to execute the query. Vertex AI returns a JSON response with an endpoints array, where each endpoint has a name field in the format projects/PROJECT_ID/locations/REGION/endpoints/ENDPOINT_ID, along with a displayName, createTime, and deployedModels array showing which models are currently serving traffic. Create a JavaScript transformer to extract the endpoint list into a clean format for a Select component. Drag a Select component onto the canvas and set its data source to {{ listEndpoints.data }}. Set the label field to displayName and the value field to the endpoint name string. This dropdown lets users switch between different deployed models in the testing panel. Add a Text component above the Select labeled Active Endpoint and a Stat component below showing the number of deployed models from the selected endpoint's deployedModels array. Name this query listEndpoints and set it to run on page load.

1// Transformer to clean up Vertex AI endpoint list for Select component
2const endpoints = data.endpoints || [];
3return endpoints.map(ep => {
4  // Extract just the endpoint ID from the full resource name
5  const parts = ep.name.split('/');
6  const endpointId = parts[parts.length - 1];
7  const modelCount = (ep.deployedModels || []).length;
8  return {
9    label: ep.displayName || endpointId,
10    value: ep.name,
11    endpoint_id: endpointId,
12    deployed_models: modelCount,
13    create_time: new Date(ep.createTime).toLocaleDateString()
14  };
15});

Create a new query named submitPrediction. Set the HTTP method to POST and the path to {{ endpointSelector.value }}:predict — this constructs the full prediction endpoint URL dynamically based on the Select component's chosen value. The Vertex AI prediction request body requires an instances array where each element is one prediction input. Add a JSONEditorComponent or TextArea to the canvas labeled Prediction Input (JSON) where users can enter their model's expected input format. Set the query body type to JSON and enter the body as { "instances": {{ JSON.parse(predictionInput.value) }} }. Add error handling for invalid JSON by wrapping the parse in a try/catch in a JavaScript query that validates before submission. Create a Submit Prediction button and set its onClick event to trigger submitPrediction. After the query succeeds, display the results: the Vertex AI response contains a predictions array with one result per input instance. Drag a Table component and bind it to {{ submitPrediction.data.predictions }}. For classification models, each prediction is typically an array of confidence scores — use a JavaScript transformer to pair confidence values with class labels from a separate configuration array. Add a JSON Viewer component as an alternative raw response display, binding it to {{ submitPrediction.data }} for users who need to inspect the full API response.

1// Transformer to format classification predictions with class labels
2// Assumes predictions are arrays of confidence scores
3const predictions = data.predictions || [];
4const classLabels = ['class_0', 'class_1', 'class_2']; // Update to match your model
5
6return predictions.map((predScores, instanceIdx) => {
7  const formatted = { instance: instanceIdx + 1 };
8  const scores = Array.isArray(predScores) ? predScores : [predScores];
9  scores.forEach((score, i) => {
10    formatted[classLabels[i] || `class_${i}`] = 
11      typeof score === 'number' ? (score * 100).toFixed(2) + '%' : score;
12  });
13  // Find the top predicted class
14  if (Array.isArray(scores)) {
15    const maxIdx = scores.indexOf(Math.max(...scores));
16    formatted.predicted_class = classLabels[maxIdx] || `class_${maxIdx}`;
17    formatted.confidence = (Math.max(...scores) * 100).toFixed(2) + '%';
18  }
19  return formatted;
20});

Create a third query named listTrainingPipelines. Set the HTTP method to GET and the path to /locations/REGION/trainingPipelines. Add a query parameter filter with value state=PIPELINE_STATE_RUNNING to optionally filter by status — remove the filter to see all pipelines. The response returns a trainingPipelines array with fields including displayName, state, createTime, startTime, endTime, and error. Write a JavaScript transformer to calculate duration for each pipeline and format state values into human-readable labels. Drag a Table onto the canvas and bind it to {{ listTrainingPipelines.data }}. Configure conditional row formatting: highlight rows where state === 'PIPELINE_STATE_FAILED' in red and PIPELINE_STATE_RUNNING in yellow. Add a Select component above the table to filter by pipeline state. For the pipeline state values, use Vertex AI's enum strings: PIPELINE_STATE_QUEUED, PIPELINE_STATE_PENDING, PIPELINE_STATE_RUNNING, PIPELINE_STATE_SUCCEEDED, PIPELINE_STATE_FAILED, PIPELINE_STATE_CANCELLING, PIPELINE_STATE_CANCELLED, PIPELINE_STATE_PAUSED. Add a Refresh button at the top of the dashboard that triggers all three queries simultaneously using event handlers. Set listTrainingPipelines to auto-run on page load and configure a 5-minute auto-refresh interval. For complex ML ops workflows involving multiple Resources, custom transformers, and Retool Workflows for automated alerting, RapidDev's team can help architect and build your Retool solution.

1// Transformer for training pipeline list
2const pipelines = data.trainingPipelines || [];
3const stateLabels = {
4  PIPELINE_STATE_QUEUED: 'Queued',
5  PIPELINE_STATE_PENDING: 'Pending',
6  PIPELINE_STATE_RUNNING: 'Running',
7  PIPELINE_STATE_SUCCEEDED: 'Succeeded',
8  PIPELINE_STATE_FAILED: 'Failed',
9  PIPELINE_STATE_CANCELLING: 'Cancelling',
10  PIPELINE_STATE_CANCELLED: 'Cancelled',
11  PIPELINE_STATE_PAUSED: 'Paused'
12};
13
14return pipelines.map(p => {
15  const start = p.startTime ? new Date(p.startTime) : null;
16  const end = p.endTime ? new Date(p.endTime) : new Date();
17  const durationMs = start ? end - start : 0;
18  const durationHrs = (durationMs / 3600000).toFixed(1);
19  return {
20    name: p.displayName,
21    state: stateLabels[p.state] || p.state,
22    raw_state: p.state,
23    created: new Date(p.createTime).toLocaleString(),
24    duration_hours: start ? durationHrs + 'h' : 'N/A',
25    error: p.error?.message || ''
26  };
27});