> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.brevo.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.brevo.com/_mcp/server.

# Send emails from your v0 app with Brevo

## Overview

v0 generates Next.js applications that deploy to Vercel — and you can manage the whole thing, including environment variables, without leaving v0's own UI. There's no native Brevo entry in the Vercel Marketplace, so the most direct path is to call Brevo's transactional email API from a server-side Route Handler, keeping your API key out of client code.

Use Brevo's HTTP API rather than raw SMTP here: Vercel Functions are request/response and don't hold a connection open, which makes multi-step SMTP handshakes unreliable (Vercel's own guidance recommends an HTTP email API for exactly this reason). A single awaited `fetch` call doesn't have that problem.

## Prerequisites

* A v0 project (Next.js App Router)
* A Brevo account and a verified sender

## Send email from your v0 app

### Create a Brevo API key

1. In Brevo, click **Settings** (gear icon) in the left sidebar, then open **SMTP & API > API keys & MCP** (direct link: [app.brevo.com/settings/keys/api](https://app.brevo.com/settings/keys/api)).
2. Click **+ Generate API key**, name it (e.g. `v0 app`), and copy it. It starts with `xkeysib-`.

### Connect a Vercel project and add the key as an environment variable

v0 doesn't create a Vercel project automatically — you connect or create one from its own Settings panel, and environment variables live in that same panel afterward:

1. In your v0 project, open the **"..."** menu (or the project menu) and click **Settings**.
2. Go to **Vercel Project** in the settings sidebar. If it says "No Vercel project connected," click **Create** to create one (or connect an existing one).
3. Go to **Environment Variables** (same settings sidebar, still inside v0).
4. Add `BREVO_API_KEY` with your key as the value, scoped to **Production** (and Preview/Development if you want it available there too).
5. Publish/redeploy so the new variable is available at runtime.

If you'd rather manage it from Vercel's own dashboard instead, the equivalent path there is **Settings > Environment Variables** on the linked Vercel project — both surfaces edit the same underlying variables.

### Add a Route Handler that calls the Brevo API

Create `app/api/send-email/route.ts`:

```typescript
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const { to, subject, html } = await request.json();

  const res = await fetch("https://api.brevo.com/v3/smtp/email", {
    method: "POST",
    headers: {
      "api-key": process.env.BREVO_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      sender: { name: "Your App", email: "no-reply@yourdomain.com" },
      to: [{ email: to }],
      subject,
      htmlContent: html,
    }),
  });

  if (!res.ok) {
    return NextResponse.json({ error: await res.text() }, { status: res.status });
  }
  return NextResponse.json({ ok: true });
}
```

In your v0 prompt, you can describe this directly, e.g. *"Add an API route that sends an email through the Brevo transactional email API using the BREVO\_API\_KEY environment variable."*

Prefer an SDK over raw `fetch`? Brevo maintains an official [Node.js API client](/guides/node-js) (`@getbrevo/brevo`) that wraps the same endpoint.

### Call it from your app

```typescript
await fetch("/api/send-email", {
  method: "POST",
  body: JSON.stringify({ to: "user@example.com", subject: "Welcome!", html: "<p>Hi there</p>" }),
});
```

### Test it

Trigger the route and confirm delivery in **Brevo > Transactional > Email logs**. Check your Vercel function logs if the request fails.

## Troubleshooting

* **401 from the Brevo API**: the `api-key` header is missing or the environment variable isn't set for the environment you deployed to.
* **Emails not received**: confirm the `sender.email` is a verified sender in Brevo (unverified senders are rejected or heavily throttled).
* **Works in Preview, fails in Production**: environment variables on Vercel are scoped per environment — confirm `BREVO_API_KEY` is set for **Production**, not just Preview, then redeploy.
* **Route returns 200 but nothing arrives**: check that the `fetch` call to Brevo is `await`ed — an un-awaited call can let the function return before the request completes.
* **"No Vercel project connected"**: you need to create or connect a Vercel project first (Settings > Vercel Project > Create) before environment variables or Production deploys are available.

## Related resources

* [Brevo — Send a transactional email](/docs/send-a-transactional-email)
* [Brevo — Node.js API client](/guides/node-js)
* [Brevo — API key authentication](/docs/api-key-authentication)
* [Vercel — How to send emails from an application on Vercel](https://vercel.com/kb/guide/sending-emails-from-an-application-on-vercel)