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

 

Setting Up Mailgun Configuration

 

• Create a new file named mailgunConfig.ts in your project’s root directory. This file will hold your Mailgun configuration such as API key and domain.
• Copy and paste the following code inside mailgunConfig.ts. Replace YOURMAILGUNAPIKEY and YOURMAILGUN_DOMAIN with your actual Mailgun credentials.

export const MAILGUNAPIKEY = 'YOURMAILGUNAPI_KEY';
export const MAILGUNDOMAIN = 'YOURMAILGUN_DOMAIN';

 

Creating the Mailgun Service Module

 

• Create a new file named mailgunService.ts in your project’s root directory. This module will contain the TypeScript code that sends emails through Mailgun using its HTTP API.
• Since Bolt.new AI projects do not support terminal installations, we will use the built-in fetch API for HTTP requests rather than installing a Mailgun SDK.
• Copy and paste the following code into mailgunService.ts. This will define a sendEmail function that you can call from anywhere in your project.

import { MAILGUNAPIKEY, MAILGUN_DOMAIN } from './mailgunConfig';

interface EmailOptions {
  to: string;
  subject: string;
  text: string;
  html?: string;
}

export async function sendEmail(options: EmailOptions): Promise<Response> {
  const url = https://api.mailgun.net/v3/${MAILGUN_DOMAIN}/messages;
  
  // Basic authentication using base64 encoding of 'api:YOURMAILGUNAPI_KEY'
  const auth = 'Basic ' + btoa('api:' + MAILGUNAPIKEY);
  
  // Construct form data for the request
  const formData = new URLSearchParams();
  formData.append('from', Mailgun Sandbox <postmaster@${MAILGUN_DOMAIN}>);
  formData.append('to', options.to);
  formData.append('subject', options.subject);
  formData.append('text', options.text);
  
  if (options.html) {
    formData.append('html', options.html);
  }
  
  // Send the HTTP POST request using fetch
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Authorization': auth,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: formData.toString()
  });
  
  return response;
}

 

Integrating Mailgun Email Sending Into Your Application Logic

 

• Open the file that contains the logic where you want to trigger sending an email (for example, index.ts or your main application file).
• Import the sendEmail function from mailgunService.ts at the top of your file:

import { sendEmail } from './mailgunService';

• Whenever you need to send an email (for instance, as a callback after a user action), add the following snippet to call the sendEmail function:

async function handleUserAction() {
  // Your application logic here
  
  try {
    const response = await sendEmail({
      to: '[email protected]',
      subject: 'Hello from Bolt.new AI using Mailgun!',
      text: 'This is a test email sent from our Bolt.new AI project integrated with Mailgun.',
      // html: 'This is a test email' // Optional: Uncomment to send HTML formatted email
    });
    
    if (response.ok) {
      console.log('Email sent successfully!');
    } else {
      console.error('Error sending email:', await response.text());
    }
  } catch (error) {
    console.error('Exception occurred while sending email:', error);
  }
}

// Call the function as needed in your code
handleUserAction();

 

Setting Environment Variables in Bolt.new AI

 

• Since you cannot use a terminal to install dependencies or set environment variables, store your Mailgun credentials directly in the mailgunConfig.ts file as shown in the first step. Please note that this method is suitable for development or testing purposes only. For production, use secure methods to manage secrets.

 

Reviewing the Integration

 

• Ensure that all files (mailgunConfig.ts, mailgunService.ts, and your main file such as index.ts) are saved.
• When your Bolt.new AI project runs, the handleUserAction function will send an email using the Mailgun API, and you can monitor the console logs for success or error messages.