> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zavu.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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**: `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

<Steps>
  <Step title="Install from Vercel Marketplace">
    Visit the [Zavu Integration on Vercel Marketplace](https://vercel.com/integrations/zavu) and click **Add Integration**.
  </Step>

  <Step title="Authorize Access">
    Grant Zavu permission to access your Vercel account and projects.
  </Step>

  <Step title="Select Zavu Project">
    Choose an existing Zavu project or create a new one to connect with your Vercel projects.
  </Step>

  <Step title="Choose Vercel Projects">
    Select which Vercel projects should receive the Zavu environment variables.
  </Step>
</Steps>

## Environment Variables

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

| Variable          | Description                          |
| ----------------- | ------------------------------------ |
| `ZAVU_API_KEY`    | Your Zavu API key for authentication |
| `ZAVU_PROJECT_ID` | Your Zavu project ID                 |

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

## 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

<CodeGroup>
  ```bash TypeScript theme={null}
  npm install @zavudev/sdk
  # or: bun add @zavudev/sdk
  ```

  ```bash Python theme={null}
  pip install zavudev
  # or: uv add zavudev
  ```

  ```bash Ruby theme={null}
  gem install zavudev
  ```

  ```bash Go theme={null}
  go get github.com/zavudev/sdk-go
  ```

  ```bash PHP theme={null}
  composer require zavudev/sdk
  ```
</CodeGroup>

### Send Your First Message

<CodeGroup>
  ```typescript TypeScript theme={null}
  import Zavudev from "@zavudev/sdk";

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

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

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

  ```python Python theme={null}
  import os
  from zavudev import Zavu

  client = Zavu(
      api_key=os.environ["ZAVU_API_KEY"],
  )

  # Send a message
  message = client.messages.send(
      to="+1234567890",
      text="Hello from Zavu!",
  )

  print(f"Message ID: {message.message.id}")
  ```

  ```ruby Ruby theme={null}
  require "zavudev"

  client = Zavudev::Client.new(api_key: ENV["ZAVU_API_KEY"])

  # Send a message
  message = client.messages.send(
    to: "+1234567890",
    text: "Hello from Zavu!"
  )

  puts "Message ID: #{message.message.id}"
  ```

  ```go Go theme={null}
  package main

  import (
  	"context"
  	"fmt"
  	"os"

  	"github.com/zavudev/sdk-go"
  )

  func main() {
  	client := zavudev.NewClient(zavudev.WithAPIKey(os.Getenv("ZAVU_API_KEY")))

  	message, _ := client.Messages.Send(context.TODO(), zavudev.MessageSendParams{
  		To:   zavudev.String("+1234567890"),
  		Text: zavudev.String("Hello from Zavu!"),
  	})

  	fmt.Printf("Message ID: %s\n", message.Message.ID)
  }
  ```

  ```php PHP theme={null}
  $client = new Zavudev\Client(apiKey: getenv('ZAVU_API_KEY'));

  // Send a message
  $message = $client->messages->send([
      'to' => '+1234567890',
      'text' => 'Hello from Zavu!',
  ]);

  echo "Message ID: {$message->message->id}\n";
  ```

  ```typescript Next.js API Route theme={null}
  // app/api/send-message/route.ts
  import Zavudev from "@zavudev/sdk";
  import { NextResponse } from "next/server";

  const zavu = new Zavu({
    apiKey: process.env.ZAVU_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 Next.js Server Action theme={null}
  // app/actions/messaging.ts
  "use server";

  import Zavudev from "@zavudev/sdk";

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

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

## 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 Projects

To disconnect a Vercel project:

1. Go to your Vercel Dashboard
2. Navigate to **Settings > Integrations**
3. Find Zavu and click **Configure**
4. Remove the integration from specific projects

<Warning>
  Disconnecting the integration will **not** automatically remove the environment variables from your Vercel project. You may need to remove them manually.
</Warning>

### 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 `ZAVU_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. Check that your Zavu project is not in sandbox mode (or that you're sending to verified numbers)
3. Review the [API Logs](https://dashboard.zavu.dev/api-logs) for detailed error messages

## Use Cases

<CardGroup cols={2}>
  <Card title="Transactional Notifications" icon="bell">
    Send order confirmations, shipping updates, and password resets
  </Card>

  <Card title="Two-Factor Authentication" icon="shield-check">
    Implement SMS-based 2FA for your Next.js applications
  </Card>

  <Card title="Customer Support" icon="message-circle">
    Enable WhatsApp messaging for real-time customer communication
  </Card>

  <Card title="Marketing Campaigns" icon="megaphone">
    Run targeted SMS and WhatsApp marketing campaigns
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Sending Messages" icon="paper-plane" href="/guides/sending-messages/easy-way">
    Learn different ways to send messages
  </Card>

  <Card title="WhatsApp" icon="whatsapp" href="/guides/whatsapp/overview">
    Send rich WhatsApp messages with media and buttons
  </Card>

  <Card title="Webhooks" icon="webhook" href="/guides/receiving-messages/webhooks">
    Receive delivery status updates and incoming messages
  </Card>

  <Card title="AI Agents" icon="robot" href="/guides/ai-agents/overview">
    Build automated conversational agents
  </Card>
</CardGroup>