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

 

Step 1: Adding the SendGrid Dependency to Your Lovable Project

 

Since Lovable doesn’t have a terminal, you need to add the dependency manually. Open your project’s package configuration file (usually named package.json) and insert the following line in the "dependencies" section:

{
  "dependencies": {
    "@sendgrid/mail": "^7.4.7",
    // ...other dependencies
  }
}

Make sure you save the file so that the build process picks up this dependency.

 

Step 2: Creating the SendGrid Service File

 

In your Lovable project, create a new file called sendGridService.ts in an appropriate folder (for example, in a folder named services or at the root of your project).

Open sendGridService.ts and add the following TypeScript code. This code initializes the SendGrid SDK using your API key and exports a function to send emails:

import sgMail from '@sendgrid/mail';

// Replace with your actual SendGrid API key.
// In production, secure your API key using environment variables or a secure vault.
const SENDGRIDAPIKEY = 'YOURSENDGRIDAPIKEYHERE';
sgMail.setApiKey(SENDGRIDAPIKEY);

export async function sendEmail(
  to: string,
  subject: string,
  text: string,
  html?: string
): Promise {
  const msg = {
    to,
    from: '[email protected]', // Replace with your verified sending email address
    subject,
    text,
    html: html || text,
  };

  try {
    await sgMail.send(msg);
    console.log('Email sent successfully');
  } catch (error) {
    console.error('Error sending email:', error);
    if (error.response) {
      console.error(error.response.body);
    }
  }
}

Replace 'YOURSENDGRIDAPIKEYHERE' with your actual SendGrid API key and update the sender email address with one that you have verified with SendGrid.

 

Step 3: Integrating the Email Function into Your Lovable Code

 

Identify the part of your Lovable project where you want to send an email (for example, after a new user registration or a specific action in your application). Open the relevant TypeScript file and import the sendEmail function. Insert a call to this function wherever needed.

For instance, if you have a file named userHandler.ts, add the following code snippet:

import { sendEmail } from './sendGridService';

// This function is called when a new user registers
async function handleUserRegistration(userEmail: string) {
  // Your registration logic here

  // Sending a welcome email using SendGrid
  await sendEmail(
    userEmail,
    'Welcome to Lovable!',
    'Thank you for registering with Lovable. We hope you enjoy our service.',
    '
Thank you for registering with Lovable. We hope you enjoy our service.
'
  );
}

// Example usage: (Replace with your actual event or call)
handleUserRegistration('[email protected]');

Place this code in the logical part of your application flow where you handle user registration or any process that requires sending an email.

 

Step 4: Setting Up Your SendGrid API Key Securely

 

For security, avoid hardcoding your SendGrid API key in your source files. If Lovable supports environment variables via a configuration file, create a configuration file (e.g., config.ts) or update an existing one to include your API key. For example, you could modify your sendGridService.ts as follows:

import sgMail from '@sendgrid/mail';

// Assuming you have a configuration object or file that holds environment variables
// For demonstration, we hardcode here. Replace with your secure solution.
const SENDGRIDAPIKEY = process.env.SENDGRIDAPIKEY || 'YOURSENDGRIDAPIKEYHERE';
sgMail.setApiKey(SENDGRIDAPIKEY);

export async function sendEmail(
  to: string,
  subject: string,
  text: string,
  html?: string
): Promise {
  const msg = {
    to,
    from: process.env.SENDEREMAIL || '[email protected]',
    subject,
    text,
    html: html || text,
  };

  try {
    await sgMail.send(msg);
    console.log('Email sent successfully');
  } catch (error) {
    console.error('Error sending email:', error);
    if (error.response) {
      console.error(error.response.body);
    }
  }
}

Then update your project’s configuration for environment variables to include SENDGRIDAPIKEY and SENDER_EMAIL. How you do this depends on your Lovable project’s setup.

 

Step 5: Testing the Integration

 

After inserting the above code, save all your changes. Trigger the part of your application that calls the sendEmail function. Check your logs (or console output) for the message “Email sent successfully” or for any error messages to verify that the integration works correctly.

 

By following these steps, you have manually added the SendGrid dependency and integrated email sending functionality into your Lovable project with TypeScript.