How to Whitelabel the Vapi AI Twilio Inbound Webhook

This guide provides a step-by-step walkthrough for setting up a Cloudflare Worker to whitelabel Twilio’s inbound call webhook. You’ll learn how to route requests through a custom domain and forward them to VAPI AI. We assume familiarity with Twilio and VAPI AI.

Prerequisites

• A Cloudflare account
• A domain managed on Cloudflare (DNS setup complete)
• Familiarity with Twilio and VAPI AI
• Visual Studio Code (VSCode) installed
• Node.js and npm installed for Wrangler CLI

Install Cloudflare Wrangler CLI

1. Open your terminal.
2. Install Wrangler globally:

   npm install -g wrangler
           

3. Verify installation:

   wrangler --version
           

Once installed, you’re ready to initialize your Worker project.

Set Up Your Worker Project

1. Create a new directory for your project:

   mkdir twilio-vapi-middleware
   cd twilio-vapi-middleware
           

2. Initialize a Cloudflare Worker project:

   wrangler init
           

3. Replace the default content in wrangler.toml with:

   # Basic Worker Configuration
   name = "twilio-vapi-middleware"
   main = "src/index.ts"
   compatibility_date = "2024-12-05"
   
   # Route Configuration
   routes = [
     { pattern = "https://INSERT_CUSTOM_DOMAIN/*", zone_id = "INSERT_DOMAIN_ID" }
   ]
   
   # Environment Variables
   [vars]
   VAPI_WEBHOOK_URL = "https://api.vapi.ai/twilio/inbound_call"
           

   Replace INSERT_CUSTOM_DOMAIN and INSERT_DOMAIN_ID with your actual domain and Zone ID.

Add Your Worker Code

1. Open src/index.ts and replace its content with:

   export default {
     async fetch(req: Request): Promise {
       try {
         if (req.method === "POST" && req.url.includes("/twilio-webhook")) {
           return forwardToVAPI(req);
         }
         return new Response("Not Found", { status: 404 });
       } catch {
         return new Response("Internal Server Error", { status: 500 });
       }
     },
   };
   
   const VAPI_WEBHOOK_URL = "https://api.vapi.ai/twilio/inbound_call";
   
   async function forwardToVAPI(req: Request): Promise {
     const body = await req.text();
     const response = await fetch(VAPI_WEBHOOK_URL, {
       method: "POST",
       headers: req.headers,
       body,
     });
     return new Response(response.body, {
       status: response.status,
       headers: response.headers,
     });
   }
           

2. Save the file and proceed to deploy.

Deploy the Worker

1. Log in to Cloudflare:

   wrangler login
           

2. Deploy your Worker:

   wrangler publish
           

Wrangler will output the URL of your deployed Worker.

Set Up a Custom Domain

1. Go to the Workers section of the Cloudflare dashboard.
2. Add a route:
   • Route: https://your-custom-domain/*
   • Worker: Select your Worker
3. Update DNS settings:
   • Add a CNAME record.
   • Name: api
   • Target: workers.dev

Configure Twilio Webhook

1. Log in to Twilio and go to Phone Numbers > Manage > Active Numbers.
2. Select the number you want to configure.
3. Set the webhook URL to your custom domain:

   https://your-custom-domain/twilio-webhook
           

4. Save the changes and test the configuration.

Testing and Troubleshooting

Make a test call to your Twilio number and verify that the Worker forwards the request to VAPI. If issues occur, use Wrangler to view logs:

wrangler tail
    

This guide should help you deploy a robust and scalable middleware for Twilio and VAPI. Ensure you monitor usage limits and upgrade if needed.