Lovable and H2O.ai integration: Step-by-Step Guide 2025

 

Adding Required Dependencies via Code

 

Since Lovable doesn’t provide a terminal, you must manually add the dependencies in your project’s configuration file. Open your project's package.json (or create one if it does not exist) and add the following dependencies within the "dependencies" section. This guide uses axios for HTTP calls to the H2O.ai API.

{
  "dependencies": {
    "axios": "^0.27.2"
  }
}

Make sure to save the file. Lovable will automatically install these dependencies from package.json when loading your project.

 

Creating the H2O Client Integration File

 

Create a new file named h2oClient.ts in your project’s source folder (for example, in src/integrations/). This file contains the TypeScript class that interacts with the H2O.ai REST API. Adjust the baseUrl according to your H2O.ai server endpoint.

import axios from 'axios';

class H2OClient {
  private baseUrl: string;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  // Method to send data to the H2O.ai prediction endpoint
  async getPredictions(inputData: any): Promise<any> {
    try {
      const response = await axios.post(${this.baseUrl}/predictions, inputData);
      return response.data;
    } catch (error) {
      console.error('Error calling H2O.ai API:', error);
      throw error;
    }
  }
}

export default new H2OClient('http://your-h2o-instance-address:port');

Save the file after adding the code.

 

Integrating H2O Client into Your Lovable Application

 

Open the file where you want to integrate H2O.ai calls (for example, src/app.ts or the specific controller file). Import the h2oClient and use its getPredictions method wherever you need to call the H2O.ai service.

import h2oClient from './integrations/h2oClient';

// Example function to handle input and fetch predictions from H2O.ai
async function processData(input: any) {
  try {
    const predictions = await h2oClient.getPredictions(input);
    console.log('Received predictions from H2O.ai:', predictions);
    // Further logic to handle predictions in Lovable application
  } catch (error) {
    console.error('Failed to get predictions:', error);
  }
}

// Example: Trigger the processData function with sample data
const sampleInput = {
  // Replace this sample data with your actual input structure
  feature1: 10,
  feature2: 20,
  feature3: 30
};

processData(sampleInput);

Save the file after making these changes.

 

Configuring the H2O.ai Endpoint

 

If you need to modify the endpoint, update the URL in the h2oClient.ts file. For example, if your H2O.ai service uses a different port or path, simply change the value passed to the constructor as shown below.

// Modify URL as needed:
export default new H2OClient('http://new-h2o-address:port');

Save your changes to ensure the updated endpoint is used when making API calls.

 

Final Testing and Debugging

 

After integrating the code:

• Reload your Lovable project so that it picks up the new files and dependency changes.
• Check the browser console or application logs for any errors related to API calls.
• Use sample input data to trigger the processData function and verify that you receive the expected predictions.

By following these steps, you have integrated the H2O.ai API into your Lovable project using TypeScript.