Lovable and Google Cloud AI Platform integration: Step-by-Step Guide 2025

 

Adding Google Cloud AI Platform Dependency to Your Lovable Project

 

• Create (or edit, if it already exists) a file named package.json at the root of your Lovable project.
• Add the Google Cloud AI Platform dependency by including the following JSON snippet. This tells your project which package to use when integrating AI Platform:

{
  "name": "lovable-project",
  "version": "1.0.0",
  "dependencies": {
    "@google-cloud/aiplatform": "^1.0.0"  // specify the required version here
  }
}

• Save the file. Lovable will read this file to know which dependencies are needed.

 

Creating a Google Cloud AI Platform Client

 

• Create a new file named gcpClient.ts inside your project’s source directory (src or similar).
• This file will initialize the AI Platform client using the dependency that was added.

import {PredictionServiceClient} from '@google-cloud/aiplatform';

const client = new PredictionServiceClient({
  // Optional: Uncomment and replace with your values if not using default environment credentials
  // projectId: 'YOURPROJECTID',
  // keyFilename: 'path/to/your-service-account-file.json'
});

export default client;

• Save the file after adding the code.

 

Creating an AI Prediction Module

 

• Create another new file named aiPrediction.ts inside your source folder. This module will include a function to send prediction requests to AI Platform.

import client from './gcpClient';

export async function getPrediction(instance: any): Promise {
  // Replace the following constants with your actual Google Cloud project details and endpoint information
  const project = process.env.GOOGLECLOUDPROJECT || 'YOURPROJECTID';
  const location = 'us-central1';  // Update as required
  const endpointId = 'YOURENDPOINTID'; // The endpoint you created in AI Platform

  // Construct the endpoint path
  const endpoint = projects/${project}/locations/${location}/endpoints/${endpointId};

  // Call the predict method from the AI Platform client
  const [response] = await client.predict({
    endpoint,
    instances: [instance]
  });

  return response;
}

• Save the file after verifying the code.

 

Integrating the AI Prediction into Your Main Code

 

• In your main TypeScript file (for example, index.ts or the appropriate entry point in your Lovable project), import and use the prediction function.
• Add the following code snippet where you want to trigger the prediction:

import { getPrediction } from './aiPrediction';

async function runAIIntegration() {
  const instance = {
    // Provide your input data here matching your AI model's requirements
    input: 'sample input'
  };

  try {
    const prediction = await getPrediction(instance);
    console.log('Prediction result:', prediction);
  } catch (error) {
    console.error('Error during prediction:', error);
  }
}

// Call the function to perform the prediction when needed
runAIIntegration();

• Save the updated main file.

 

Configuring Environment Variables Directly in Code

 

• If Lovable does not support a terminal for setting environment variables, you can create a configuration file to hold your Google Cloud settings.
• Create a new file named config.ts inside your source folder and add the following snippet:

export const GCP_CONFIG = {
  projectId: 'YOURPROJECTID',
  location: 'us-central1', // Update with your region
  endpointId: 'YOURENDPOINTID',
  // If needed, add keyFilename for service account credentials:
  // keyFilename: 'path/to/your-service-account-file.json'
};

• You can then import and use these values in gcpClient.ts or aiPrediction.ts instead of hard coding them.

 

Final Integration Check

 

• Ensure that all the newly created files (package.json, gcpClient.ts, aiPrediction.ts, and config.ts if used) are saved in their respective locations.
• When your Lovable project runs, it will use the configured Google Cloud dependency to make prediction requests to the AI Platform.
• Check the console logs for the prediction results or any possible error messages.