Lovable and Mindbody integration: Step-by-Step Guide 2025

 

Introducing Mindbody Integration into Lovable

 

This guide will walk you through integrating the Mindbody API into your Lovable project using TypeScript. The integration will allow you to fetch data, such as appointments, from Mindbody. Follow each step carefully and add the provided code snippets into your project in the designated files and places.

 

Step: Adding Axios Dependency Manually

 

Since Lovable does not have a terminal, you must manually add the Axios library. Open your project's package.json file (or create one in your project's root directory if it does not exist) and add the dependency in the "dependencies" section. This will allow your project to use Axios for HTTP requests.

{
  "name": "lovable-project",
  "version": "1.0.0",
  "dependencies": {
    "axios": "0.27.2"
    // Add other dependencies as needed
  }
}

After updating package.json, ensure that your project loader or bundler picks up this dependency.

 

Step: Creating the Mindbody API Integration File

 

Create a new file in your project at src/integrations/mindbodyAPI.ts. This file will contain a class that handles communication with the Mindbody API using Axios. Insert the following code into the file:

import axios from 'axios';

export class MindbodyAPI {
  private apiKey: string;
  private siteId: string;
  private baseUrl: string;

  constructor(apiKey: string, siteId: string) {
    this.apiKey = apiKey;
    this.siteId = siteId;
    // Mindbody's production base URL
    this.baseUrl = 'https://api.mindbodyonline.com/public/v6';
  }

  // Example: Fetch appointments data from Mindbody
  async getAppointments(): Promise {
    try {
      const response = await axios.get(${this.baseUrl}/appointment/appointments, {
        headers: {
          'Api-Key': this.apiKey,
          'SiteId': this.siteId,
          'Content-Type': 'application/json'
        }
      });
      return response.data;
    } catch (error) {
      console.error('Error fetching appointments from Mindbody:', error);
      throw error;
    }
  }
}

This class initializes with your Mindbody API key and Site ID, and provides a function to fetch appointment data from the Mindbody service.

 

Step: Integrating Mindbody API Usage in Your Application

 

Locate the main file or the part of your Lovable project where you want to call the Mindbody API (for example, in a page controller or service file). Create a new file, for instance src/services/mindbodyService.ts, and import the MindbodyAPI class to use it as shown below:

import { MindbodyAPI } from '../integrations/mindbodyAPI';

// Replace these with your actual Mindbody API Key and Site ID
const APIKEY = 'YOURMINDBODYAPIKEY';
const SITEID = 'YOURMINDBODYSITEID';

const mindbodyApi = new MindbodyAPI(APIKEY, SITEID);

// Example function to call the Mindbody API and handle the data
export async function fetchAppointments() {
  try {
    const appointments = await mindbodyApi.getAppointments();
    console.log('Mindbody Appointments:', appointments);
    // Place your logic here to update or display the fetched data
  } catch (error) {
    console.error('Error in fetchAppointments:', error);
  }
}

Now you have a dedicated service that calls the Mindbody API, fetching appointment data to be used elsewhere in your application.

 

Step: Triggering the Mindbody Service from Your UI

 

Decide where inside your Lovable project’s user interface you want to display or use the Mindbody data. For example, if you have a dashboard component, open its corresponding TypeScript file (e.g., src/components/dashboard.ts) and import the service function:

import { fetchAppointments } from '../services/mindbodyService';

// Add a function call to fetch appointments when needed
function loadDashboardData() {
  fetchAppointments()
    .then(() => {
      // Update UI elements after successful data fetch
    })
    .catch(error => {
      console.error('Error updating dashboard:', error);
    });
}

// Call this function at the appropriate moment in your UI logic
loadDashboardData();

This integration will fetch data from Mindbody when the dashboard loads and logs it to the browser console. Adapt the UI updates as necessary for your project.

 

Step: Configuring Environment Variables

 

For security, you should not hard-code sensitive credentials directly in your code. If Lovable supports environment variable configuration, place your Mindbody API key and Site ID there. Otherwise, store them in a separate configuration file that is not exposed publicly. For example, create a file named src/config/env.ts and include:

export const ENV = {
  MINDBODYAPIKEY: 'YOURMINDBODYAPI_KEY',
  MINDBODYSITEID: 'YOURMINDBODYSITE_ID'
};

Then update mindbodyService.ts to import and use these variables:

import { ENV } from '../config/env';
import { MindbodyAPI } from '../integrations/mindbodyAPI';

const mindbodyApi = new MindbodyAPI(ENV.MINDBODYAPIKEY, ENV.MINDBODYSITEID);

 

Step: Final Testing and Debugging

 

Review all your changes and check that the file paths are correct relative to your project's structure. Make sure to save each file. Launch the Lovable project interface so that the UI, and consequently the Mindbody integration, is loaded. Open your browser's developer console to verify if the Mindbody API responses are logged successfully. If errors occur, double-check your API key, Site ID, and endpoint paths.

 

By following these steps, you have integrated the Mindbody API into your Lovable project using TypeScript. Adjust and expand the code as necessary for additional Mindbody endpoints and enhanced error handling.