/bolt.new-ai-integrations

Bolt.new AI and SendGrid integration: Step-by-Step Guide 2025

Integrate Bolt.new AI with SendGrid in minutes using our step-by-step guide. Learn essential tips and best practices for seamless email automation.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

How to integrate Bolt.new AI with SendGrid?

 

Setting Up SendGrid Dependency

 
  • Since Bolt.new AI does not have a terminal, you need to manually add the SendGrid package dependency in your project's package.json file. Open your project’s package.json file and insert "@sendgrid/mail" into the dependencies section as shown below:

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

 

Creating a SendGrid Utility File

 
  • Create a new file named sendgridClient.ts in the root directory of your Bolt.new AI project. This file will serve as a utility to configure SendGrid and send emails.
  • Paste the following code snippet into sendgridClient.ts:

// Import the SendGrid mail package
import sgMail from '@sendgrid/mail';

// Set your SendGrid API Key from environment variables
// Make sure to add your SENDGRIDAPIKEY in your Bolt.new project secrets
sgMail.setApiKey(process.env.SENDGRIDAPIKEY as string);

/**
- Function to send an email using SendGrid
- @param to Recipient email address
- @param subject Email subject line
- @param text Plain text content of the email
- @param html HTML content of the email
 */
export function sendEmail(to: string, subject: string, text: string, html: string) {
  const msg = {
    to,
    from: process.env.SENDER_EMAIL as string, // Your verified sender email from SendGrid
    subject,
    text,
    html,
  };

  return sgMail.send(msg);
}

 

Configuring Environment Variables in Bolt.new AI

 
  • In your Bolt.new AI project, locate the section to set environment variables or secrets (often accessible through the project settings).
  • Add the following variables with your actual SendGrid API key and verified sender email address:
    • SENDGRIDAPIKEY: Your SendGrid API key
    • SENDER_EMAIL: The email address you have verified with SendGrid

 

Integrating the SendGrid Utility with Your Application Code

 
  • In the main file or the file where you want to trigger email sending (for example, main.ts), import the sendEmail function from your new utility file.
  • Add the following code snippet where you need to send an email:

import { sendEmail } from './sendgridClient';

// Example function that sends an email when triggered
function notifyUser() {
  const recipient = '[email protected]';
  const subject = 'Welcome to Bolt.new AI!';
  const textContent = 'Thank you for signing up.';
  const htmlContent = 'Thank you for signing up.';
  
  sendEmail(recipient, subject, textContent, htmlContent)
    .then(() => {
      console.log('Email sent successfully.');
    })
    .catch((error) => {
      console.error('Error sending email:', error);
    });
}

// Call the function where appropriate in your application workflow
notifyUser();

 

Final Verification and Testing

 
  • Review all the inserted code snippets to ensure correct placement:
    • package.json: Dependency added in the "dependencies" section.
    • sendgridClient.ts: Utility file in the root directory for SendGrid configuration and email sending function.
    • Main application file (e.g., main.ts): Importing the sendEmail function and invoking it as needed.
  • Double-check that your environment variables (SENDGRIDAPIKEY and SENDER_EMAIL) are properly set in your project's environment variables or secrets settings.
  • Save all changes. When your Bolt.new AI project runs, triggering the notifyUser() function will send an email using SendGrid.

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

Client trust and success are our top priorities

When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024 

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022