How to Integrate Bolt.new with Brevo (Sendinblue)

Log in to your Brevo account at app.brevo.com. Click on your profile name or avatar in the top-right corner to open the dropdown menu, then click Settings. In the left sidebar, navigate to API Keys under the Developer section. If you don't see a Developer section, look for Integrations → API Keys. Click Generate a new API key, give it a descriptive name like 'Bolt Integration', and click Generate. Copy the key immediately — Brevo shows the full key only once at generation time. After navigating away, you can only see the key's name and last four characters. In your Bolt.new project, open the .env.local file in the file tree (or create it in the project root). Add your API key as the BREVO_API_KEY environment variable. This is server-side only — never prefix it with NEXT_PUBLIC_, which would expose it in the browser's JavaScript bundle where anyone could read it in DevTools. Before sending emails, you must verify a sender email address in Brevo. Go to Settings → Senders, Domains & Dedicated IPs → Senders and add the email address you want emails to come from. Brevo will send a verification link to that address — click it to confirm. Without a verified sender, your email API calls will return a 400 error. Using your own domain as the sender email (e.g., hello@yourcompany.com) requires domain verification, which adds DNS records to your domain. For quick development, verifying a personal Gmail or work email as the sender is faster and works fine for testing.

1// .env.local
2BREVO_API_KEY=your_api_key_here
3BREVO_SENDER_EMAIL=hello@yourcompany.com
4BREVO_SENDER_NAME=Your App
5
6// lib/brevo.ts
7export async function brevoFetch(
8  endpoint: string,
9  method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET',
10  body?: Record<string, unknown>
11): Promise<Response> {
12  const apiKey = process.env.BREVO_API_KEY!;
13  const url = `https://api.brevo.com/v3${endpoint}`;
14
15  return fetch(url, {
16    method,
17    headers: {
18      'api-key': apiKey,
19      'Content-Type': 'application/json',
20      Accept: 'application/json',
21    },
22    ...(body ? { body: JSON.stringify(body) } : {}),
23  });
24}

Brevo's transactional email endpoint is POST /v3/smtp/email. This is the core endpoint for sending individual, personalized emails triggered by user actions in your app — welcome emails, password resets, order confirmations, and notifications. The request body requires a sender object with name and email (matching your verified sender), a to array with recipient objects containing email and optional name, and either htmlContent (an HTML string you construct) or templateId (a Brevo template ID created in the dashboard). For inline HTML emails, construct the HTML string in your API route and pass it as the htmlContent field. This gives you complete control over the email design without needing to create templates in Brevo's dashboard — useful for rapid prototyping. For production apps with multiple email types, Brevo's template system (created in the Brevo dashboard under Email → Templates) is cleaner: store the template ID in an environment variable and pass dynamic values as a params object. Brevo supports email personalization through double-curly handlebars syntax in templates: {{ params.firstName }} inserts the firstName from the params object. In inline HTML, you construct the personalization yourself using template literals in JavaScript. The API also supports attachments (base64-encoded files), CC/BCC recipients, reply-to addresses, and custom headers for email client compatibility. Since this is an outbound POST request from your server-side Next.js route to Brevo's API, it works without any issues in Bolt's WebContainer development preview. You can send real emails to real recipients while developing — just be careful not to send test emails to real customer addresses. Use your own email addresses for development testing.

1// app/api/email/send/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { brevoFetch } from '@/lib/brevo';
4
5export async function POST(request: NextRequest) {
6  const { to, toName, subject, htmlContent, textContent } = await request.json();
7
8  if (!to || !subject) {
9    return NextResponse.json(
10      { error: 'to and subject are required' },
11      { status: 400 }
12    );
13  }
14
15  const body = {
16    sender: {
17      name: process.env.BREVO_SENDER_NAME ?? 'My App',
18      email: process.env.BREVO_SENDER_EMAIL!,
19    },
20    to: [{ email: to, name: toName ?? '' }],
21    subject,
22    htmlContent: htmlContent ?? `<p>${textContent}</p>`,
23    ...(textContent ? { textContent } : {}),
24  };
25
26  const response = await brevoFetch('/smtp/email', 'POST', body);
27
28  if (!response.ok) {
29    const error = await response.json();
30    return NextResponse.json({ error }, { status: response.status });
31  }
32
33  const data = await response.json();
34  return NextResponse.json({ messageId: data.messageId, success: true });
35}

Brevo's Transactional SMS API endpoint is POST /v3/transactionalSMS/sms. It sends a single SMS message to a phone number and supports delivery tracking. The request body requires sender (the SMS sender name or number — max 11 characters for alphanumeric sender IDs, or a phone number), recipient (the destination phone number in E.164 format: +1XXXXXXXXXX for US numbers), content (the SMS text, max 160 characters for a single message or 918 for multi-part), and type ('transactional' or 'marketing' — use transactional for triggered notifications, marketing requires opt-in consent). SMS sending is available in most countries, but the pricing, available sender types, and compliance requirements vary by country. In the US, you must use a phone number as the sender ID (not an alphanumeric name). In the UK and many European countries, alphanumeric sender IDs are supported. Check Brevo's documentation for your target country before implementing. Brevo provides test SMS credits in most new accounts so you can test without paying. Check your account's SMS credits balance in the Brevo dashboard. For development and testing, sending to your own phone number is the safest approach — it confirms delivery without consuming large numbers of credits. Like email sending, outbound SMS API calls work perfectly in Bolt's WebContainer preview. There are no CORS issues or deployment requirements for sending SMS — it's a standard outbound HTTPS POST. Test the full SMS flow (enter phone number → send → receive SMS on your phone) entirely within the Bolt development environment.

1// app/api/sms/send/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { brevoFetch } from '@/lib/brevo';
4
5export async function POST(request: NextRequest) {
6  const { phoneNumber, message } = await request.json();
7
8  if (!phoneNumber || !message) {
9    return NextResponse.json(
10      { error: 'phoneNumber and message are required' },
11      { status: 400 }
12    );
13  }
14
15  // Truncate to 160 chars for single SMS (160 = 1 part, 306 = 2 parts, etc.)
16  const content = message.length > 160 ? message.substring(0, 157) + '...' : message;
17
18  const body = {
19    sender: process.env.BREVO_SMS_SENDER ?? 'MyApp',
20    recipient: phoneNumber,
21    content,
22    type: 'transactional',
23  };
24
25  const response = await brevoFetch('/transactionalSMS/sms', 'POST', body);
26
27  if (!response.ok) {
28    const error = await response.json();
29    return NextResponse.json({ error }, { status: response.status });
30  }
31
32  const data = await response.json();
33  return NextResponse.json({
34    messageId: data.messageId,
35    remainingCredits: data.remainingCredits,
36    success: true,
37  });
38}

Brevo's Contacts API allows you to create, update, and organize contacts for email marketing campaigns. The key endpoint is POST /v3/contacts for creating a new contact. The request body takes email (required), attributes (an object with any contact attributes like FIRSTNAME, LASTNAME, PHONE — note Brevo attribute names are always uppercase), listIds (array of numeric list IDs to add the contact to), and updateEnabled (boolean — if true, Brevo will update an existing contact with the same email instead of returning an error). Setting updateEnabled: true is equivalent to an upsert operation. To find your list IDs, call GET /v3/contacts/lists which returns all your mailing lists with their numeric IDs. Store the IDs you use most often as environment variables (e.g., BREVO_NEWSLETTER_LIST_ID=3) to avoid hardcoding them in your routes. For bulk contact management, Brevo provides a POST /v3/contacts/import endpoint that accepts an array of contacts and processes them asynchronously. For subscriber management (GDPR compliance), use POST /v3/contacts/doubleOptin/email to trigger a double opt-in confirmation email before adding someone to a marketing list. One important distinction: the Brevo Contacts API serves as a lightweight CRM in addition to being a mailing list manager. Each contact can have custom attributes, notes, and activity history. For Bolt apps that need a simple contact database without a full CRM like HubSpot or Salesforce, using Brevo as both the email platform and contact store is a practical approach — especially given the generous free tier.

1// app/api/contacts/subscribe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { brevoFetch } from '@/lib/brevo';
4
5export async function POST(request: NextRequest) {
6  const { email, firstName, lastName, tag } = await request.json();
7
8  if (!email) {
9    return NextResponse.json({ error: 'email is required' }, { status: 400 });
10  }
11
12  const listId = parseInt(process.env.BREVO_NEWSLETTER_LIST_ID ?? '0', 10);
13
14  const body: Record<string, unknown> = {
15    email,
16    attributes: {
17      ...(firstName ? { FIRSTNAME: firstName } : {}),
18      ...(lastName ? { LASTNAME: lastName } : {}),
19    },
20    updateEnabled: true, // upsert: update if email exists
21    ...(listId ? { listIds: [listId] } : {}),
22  };
23
24  const response = await brevoFetch('/contacts', 'POST', body);
25
26  if (!response.ok) {
27    const error = await response.json();
28    return NextResponse.json({ error }, { status: response.status });
29  }
30
31  const data = await response.json();
32  const wasCreated = response.status === 201;
33
34  return NextResponse.json({
35    contactId: data.id,
36    wasCreated,
37    message: wasCreated ? 'Contact created' : 'Contact updated',
38  });
39}

Brevo can send real-time notifications to your app when email events occur: delivered, opened, clicked, bounced, marked as spam, or unsubscribed. These webhook events let you update your database in real time — for example, marking a contact as 'unsubscribed' when Brevo tells you they clicked the unsubscribe link, or tracking email engagement in your app's analytics. Like all incoming HTTP connections, Brevo webhooks cannot reach Bolt's WebContainer — the WebContainer runs inside a browser tab with no publicly accessible URL. You must deploy your app to Netlify or Vercel before registering webhooks. Follow Bolt's export workflow to push your code to GitHub, then connect the repo to Netlify or Vercel for automatic deployment. Once your app is deployed and you have a stable public URL, create a webhook in Brevo. Navigate to your Brevo account → Settings → Webhooks (under Developers). Click Create a new webhook, enter your endpoint URL (https://your-app.netlify.app/api/brevo/webhook), select the events you want to receive (Delivered, Opened, Clicked, Bounced are the most commonly needed), and click Save. Brevo does not include a built-in signature verification mechanism for webhooks on all plans. As a minimum security practice, add a secret query parameter to your webhook URL (e.g., /api/brevo/webhook?secret=random_secret) and check it on every incoming request. Store the expected secret in an environment variable on your hosting platform — set it in Netlify's Site settings → Environment variables or Vercel's Project settings → Environment variables before enabling the webhook.

1// app/api/brevo/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  // Basic security: validate secret query parameter
6  const secret = request.nextUrl.searchParams.get('secret');
7  if (secret !== process.env.BREVO_WEBHOOK_SECRET) {
8    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
9  }
10
11  let events: Array<Record<string, unknown>>;
12  try {
13    const body = await request.json();
14    // Brevo sends an array of events
15    events = Array.isArray(body) ? body : [body];
16  } catch {
17    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
18  }
19
20  for (const event of events) {
21    const eventType = event.event as string;
22    const email = event.email as string;
23    const messageId = event['message-id'] as string;
24
25    console.log(`Brevo event: ${eventType} | email: ${email} | id: ${messageId}`);
26
27    if (eventType === 'unsubscribe') {
28      // Update your database to mark this contact as unsubscribed
29      console.log(`Contact unsubscribed: ${email}`);
30    }
31
32    if (eventType === 'hard_bounce') {
33      // Invalid email address — consider removing from your list
34      console.log(`Hard bounce for: ${email}`);
35    }
36  }
37
38  return NextResponse.json({ received: true, processed: events.length });
39}