# Vercel Integration

> Connect Zavu to your Vercel projects for seamless messaging

The Zavu Vercel integration automatically provisions API keys and injects environment variables into your Vercel projects, enabling you to start sending messages in minutes.

## Features

- **One-Click Setup**: Install from the Vercel Marketplace and connect in minutes
- **Automatic API Key Provisioning**: API keys are created and injected automatically
- **Environment Variable Injection**: `ZAVUDEV_API_KEY` (also as `ZAVU_API_KEY`) and `ZAVU_PROJECT_ID` are added to your Vercel projects
- **Multi-Project Support**: Connect multiple Vercel projects to a single Zavu project

## Installation

  
#### Install from Vercel Marketplace

    Visit the [Zavu Integration on Vercel Marketplace](https://vercel.com/integrations/zavu) and click **Add Integration**.
  
  
#### Authorize Access

    Grant Zavu permission to access your Vercel account and projects.
  
  
#### Select Zavu Project

    Choose an existing Zavu project or create a new one to connect with your Vercel projects.
  
  
#### Choose Vercel Projects

    Select which Vercel projects should receive the Zavu environment variables.
  

## Environment Variables

After installation, the following environment variables are automatically added to your selected Vercel projects:

| Variable | Description |
|----------|-------------|
| `ZAVUDEV_API_KEY` | Your Zavu API key for authentication. The SDKs read it by default. |
| `ZAVU_API_KEY` | The same key, under the name integrations set up before October 2026 used. Keep reading it if your code already does. |
| `ZAVU_PROJECT_ID` | Your Zavu project ID |

> **Info:**
> Environment variables are injected for **all environments** (Development, Preview, and Production).

## Quick Start

Once the integration is complete, you can start sending messages immediately. The API key is already available as an environment variable.

### Install the SDK

```bash
npm install @zavudev/sdk
# or: bun add @zavudev/sdk
```

### Send Your First Message

```typescript
import Zavudev from "@zavudev/sdk";

const zavu = new Zavu({
  apiKey: process.env.ZAVUDEV_API_KEY!,
});

// Send a message
const { message } = await zavu.messages.send({
  to: "+1234567890",
  text: "Hello from Zavu!",
});

console.log("Message ID:", message.id);
```

```typescript
// app/api/send-message/route.ts
import Zavudev from "@zavudev/sdk";
import { NextResponse } from "next/server";

const zavu = new Zavu({
  apiKey: process.env.ZAVUDEV_API_KEY!,
});

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

  const { message } = await zavu.messages.send({ to, text });

  return NextResponse.json({ messageId: message.message.id });
}
```

```typescript
// app/actions/messaging.ts
"use server";

import Zavudev from "@zavudev/sdk";

const zavu = new Zavu({
  apiKey: process.env.ZAVUDEV_API_KEY!,
});

export async function sendMessage(to: string, text: string) {
  const { message } = await zavu.messages.send({ to, text });
  return message.message.id;
}
```

## Managing the Integration

### View Connected Projects

Go to **Integrations** in your [Zavu Dashboard](https://dashboard.zavu.dev/integrations) to see all connected Vercel projects and their status.

### Disconnect

Disconnect from **Developers › Integrations** in the Zavu dashboard. Zavu revokes the API key and removes the variables it added (`ZAVUDEV_API_KEY`, `ZAVU_API_KEY`, `ZAVU_PROJECT_ID`) from each connected Vercel project. If a project could not be cleaned, the integration's row says which one: remove the variables there by hand.

> **Warning:**
> Removing the integration from the Vercel side instead (**Settings > Integrations** in Vercel) revokes Zavu's access to your Vercel account first, so Zavu cannot remove the variables: delete them in the project's settings.

### Rotate API Key

If you need to rotate your API key:

1. Go to [API Keys](https://dashboard.zavu.dev/api-keys) in your Zavu Dashboard
2. Create a new API key
3. Update the `ZAVUDEV_API_KEY` environment variable in your Vercel project settings
4. Revoke the old API key

## Troubleshooting

### Environment Variables Not Appearing

If the environment variables are not showing up in your Vercel project:

1. Check the integration status in your Zavu Dashboard
2. Re-deploy your Vercel project to pick up the new environment variables
3. Ensure the integration has the correct permissions

### OAuth Errors

If you encounter OAuth errors during setup:

1. Try disconnecting and reconnecting the integration
2. Clear your browser cookies for Vercel and Zavu
3. Ensure popup blockers are disabled

### API Key Not Working

If messages fail to send:

1. Verify the API key is correctly set in your environment
2. Read the error code on the response or on the failed message: a daily ceiling (`daily_limit_exceeded`), a missing 10DLC campaign on a +1 SMS destination (`ten_dlc_required`), or a message the automated review stopped (`RISK_BLOCKED`, `RISK_REJECTED`, `RISK_REVIEW_EXPIRED`). See [Sending limits](https://www.zavu.dev/docs/concepts/sending-limits)
3. Review the [API Logs](https://dashboard.zavu.dev/api-logs) for detailed error messages

## Use Cases

  - **Transactional Notifications**: Send order confirmations, shipping updates, and password resets
  - **Two-Factor Authentication**: Implement SMS-based 2FA for your Next.js applications
  - **Customer Support**: Enable WhatsApp messaging for real-time customer communication
  - **Marketing Campaigns**: Run targeted SMS and WhatsApp marketing campaigns

## Next Steps

  - [Sending Messages](https://www.zavu.dev/docs/guides/sending-messages/easy-way): Learn different ways to send messages
  - [WhatsApp](https://www.zavu.dev/docs/guides/whatsapp/overview): Send rich WhatsApp messages with media and buttons
  - [Webhooks](https://www.zavu.dev/docs/guides/receiving-messages/webhooks): Receive delivery status updates and incoming messages
  - [AI Agents](https://www.zavu.dev/docs/guides/ai-agents/overview): Build automated conversational agents