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

 

Prerequisites

 

• Ensure you have your Lovable project open and you know where to add new files.
• Have your SEMrush API key available. (If you don’t have one, register at SEMrush and obtain the API key.)
• Since Lovable does not provide a terminal for installing dependencies, we will manually update the project configuration to include any required libraries.

 

Creating the SEMrush Configuration File

 

• Create a new file in your project directory at src/config/semrushConfig.ts.
• Paste the following code into semrushConfig.ts to store your SEMrush API configurations:

• export const SEMRUSHAPIKEY = 'YOURSEMRUSHAPIKEYHERE';
  export const SEMRUSHBASEURL = 'https://api.semrush.com';

 

Creating the SEMrush Service Module

 

• Create another new file at src/services/semrushService.ts.
• Insert the following TypeScript code snippet. This module defines a function to fetch domain overview data from SEMrush:

• import { SEMRUSHAPIKEY, SEMRUSHBASEURL } from '../config/semrushConfig';
  
  export async function getDomainOverview(domain: string): Promise {
    // Construct the API URL using the provided domain and API key
    const url = ${SEMRUSH_BASE_URL}/reports/v1/projects?domain=${domain}&key=${SEMRUSH_API_KEY};
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error('Failed to fetch SEMrush data');
      }
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error while calling SEMrush API:', error);
      throw error;
    }
  }

  
  

 

Integrating the SEMrush Service in Your Lovable Project

 

• Open your project’s main entry point file. This is often named src/index.ts or similar.
• Add the following code snippet to import and use the SEMrush service. This example demonstrates how to call the API function and log the output:

• import { getDomainOverview } from './services/semrushService';
  
  // Example function to fetch and display SEMrush data
  async function displayDomainOverview() {
    try {
      const overview = await getDomainOverview('example.com'); // Replace with your desired domain
      console.log('SEMrush Domain Overview:', overview);
      // Integrate the returned data into your Lovable project UI or functionality as needed
    } catch (error) {
      console.error('Error fetching domain overview:', error);
    }
  }
  // Call the function at an appropriate point during your app initialization
  displayDomainOverview();

  
  

 

Adding a Dependency for Fetch (if needed)

 

• If your Lovable project uses a Node.js environment that does not natively support the fetch API, you can use the node-fetch library. Since there is no terminal in Lovable, you need to manually add this dependency in your project configuration.
• Locate and open your package.json file in the root of your project.
• Add the following line in the "dependencies" section to include node-fetch:

• "dependencies": {
    "node-fetch": "^2.6.1"
    // ... other dependencies
  }

• To ensure the fetch API is available, add these lines at the very top of your main file (src/index.ts or similar):

• import fetch from 'node-fetch';
  (global as any).fetch = fetch;

 

Testing the Integration

 

• Save all changes to the files you created or modified.
• Launch your application through Lovable’s built-in execution environment.
• Open the browser console or Lovable’s logging section to review the logs. You should see the output from the displayDomainOverview function displaying data fetched from SEMrush.
• If errors occur, review the console logs, verify your SEMrush API key, and ensure that the API endpoint URL is correct.