How to Integrate Plivo with V0

Start by prompting V0 to create the front-end component for your SMS or communication feature. Be specific about what the interface should do — a contact form that sends SMS confirmations, a notification dashboard, a verification flow, or an admin panel for sending bulk messages. V0 excels at generating clean forms with Tailwind CSS and the appropriate loading and error states. The key detail to include in your V0 prompt is the API endpoint the UI should call. For SMS sending, your component will POST to /api/plivo/send with a JSON body containing the destination phone number and message text. V0 will wire up the fetch request automatically when you specify the endpoint in the prompt. Review the generated code for the fetch call. It should send a POST request with headers including Content-Type: application/json and a body containing the phone number (formatted as E.164, e.g., +12025551234) and the message content. If V0 generates placeholder text for the endpoint, update it to match your actual API route path. Also confirm that the component handles the response — showing a success state when the API returns 200 and an error message if the call fails.

Now create the server-side API route that will call Plivo's SDK. First, ensure the plivo-node package is in your project's package.json dependencies. In your V0 project code editor, open package.json and add plivo to the dependencies object, then trigger a new Vercel deployment — this installs the package during the build process. Create the file app/api/plivo/route.ts in your project. This file runs as a serverless function on Vercel, which means it has access to server-side environment variables (your Plivo Auth Token) but its source code is never exposed to the browser. The API route initializes a Plivo client using your Auth ID and Auth Token, reads the destination phone number and message from the request body, then calls client.messages.create() with the required parameters: src (your Plivo phone number), dst (the recipient), and text (the message). Plivo's SDK returns a response object containing the message UUID and API response status, which you can return to the client for confirmation. One important note about phone number formatting: Plivo requires E.164 format for all numbers — a plus sign followed by the country code and number, like +12025551234 for a US number. If your UI collects phone numbers without the plus sign or country code, you need to normalize them in the API route before passing them to Plivo. A simple check for a leading plus sign and adding the country code if absent prevents most formatting errors.

1import plivo from 'plivo';
2import { NextRequest, NextResponse } from 'next/server';
3
4const client = new plivo.Client(
5  process.env.PLIVO_AUTH_ID!,
6  process.env.PLIVO_AUTH_TOKEN!
7);
8
9export async function POST(request: NextRequest) {
10  try {
11    const { to, message } = await request.json();
12
13    if (!to || !message) {
14      return NextResponse.json(
15        { error: 'to and message are required' },
16        { status: 400 }
17      );
18    }
19
20    // Normalize to E.164 format if missing plus sign
21    const formattedTo = to.startsWith('+') ? to : `+${to}`;
22
23    const response = await client.messages.create(
24      process.env.PLIVO_SENDER_NUMBER!,
25      formattedTo,
26      message
27    );
28
29    return NextResponse.json({
30      success: true,
31      messageUuid: response.messageUuid,
32      apiId: response.apiId,
33    });
34  } catch (error: any) {
35    console.error('Plivo SMS error:', error);
36    return NextResponse.json(
37      { error: error.message || 'Failed to send SMS' },
38      { status: 500 }
39    );
40  }
41}

Your API route reads three environment variables: PLIVO_AUTH_ID, PLIVO_AUTH_TOKEN, and PLIVO_SENDER_NUMBER. Add all three to Vercel's environment configuration before deploying. Open your Vercel Dashboard, select your project, click the Settings tab, then click Environment Variables in the left sidebar. Add each variable: PLIVO_AUTH_ID: Your Plivo Auth ID, found at the top of Plivo Console → Overview. It looks like a string of alphanumeric characters like MAXXXXXXXXXXXXXXXXXX. This is a public identifier, but keeping it server-side is still best practice. PLIVO_AUTH_TOKEN: Your Plivo Auth Token, shown next to your Auth ID in the Plivo Console. This is a secret credential — never add the NEXT_PUBLIC_ prefix. It must stay server-side only. PLIVO_SENDER_NUMBER: The Plivo phone number you purchased, in E.164 format (e.g., +12025551234). Find this in Plivo Console → Phone Numbers → Your Numbers. If you are using a Plivo Powerpack for high-volume sending, use the Powerpack UUID instead. Set all three variables to apply to Production, Preview, and Development environments. After saving, trigger a new Vercel deployment by pushing a commit to your GitHub repository — environment variables only take effect after a redeployment. You can also use the vercel env pull command to sync these variables to a local .env.local file for testing with the Vercel CLI.

If your application needs to receive and respond to SMS replies — for two-way conversations, support ticket systems, or keyword-triggered flows — you need to configure a Plivo webhook that points to a Next.js API route. When a user texts your Plivo number, Plivo sends a POST request to your webhook URL with details about the inbound message. Create the file app/api/plivo/webhook/route.ts to handle these inbound events. Plivo sends form-encoded data (not JSON) for SMS webhooks, so you need to parse the request using request.formData() rather than request.json(). The key fields are From (the sender's number), To (your Plivo number), and Text (the message content). After creating the route, configure it in the Plivo Console. Go to Phone Numbers → Your Numbers, click the number you want to configure, and set the SMS URL to your Vercel deployment URL: https://your-project.vercel.app/api/plivo/webhook with HTTP Method set to POST. Save the configuration. For the webhook response, Plivo expects either a 200 OK with no body (to acknowledge receipt) or a valid XML response if you want to reply automatically. To send an automated reply, return XML with the Response element containing a Message element. This is Plivo Markup Language (PML) and allows you to build SMS autoresponders without making an additional outbound API call. For production applications handling sensitive customer conversations, RapidDev's team can help design the full two-way SMS architecture, including message queuing, conversation threading, and CRM integration.

1import { NextRequest, NextResponse } from 'next/server';
2
3export async function POST(request: NextRequest) {
4  try {
5    // Plivo sends form-encoded data for SMS webhooks
6    const formData = await request.formData();
7    
8    const from = formData.get('From') as string;
9    const to = formData.get('To') as string;
10    const text = formData.get('Text') as string;
11    const messageUuid = formData.get('MessageUUID') as string;
12
13    console.log('Inbound SMS:', { from, to, text, messageUuid });
14
15    // Handle opt-outs
16    if (text?.toUpperCase().trim() === 'STOP') {
17      console.log(`Opt-out request from ${from}`);
18      // TODO: Update your database to mark this number as opted out
19    }
20
21    // To send an automatic reply, return Plivo XML (PML)
22    // Uncomment to enable auto-reply:
23    // const xmlResponse = `<?xml version="1.0" encoding="utf-8"?><Response><Message>Thanks for your message! We will get back to you shortly.</Message></Response>`;
24    // return new NextResponse(xmlResponse, {
25    //   headers: { 'Content-Type': 'application/xml' },
26    // });
27
28    // Acknowledge receipt without auto-reply
29    return new NextResponse('', { status: 200 });
30  } catch (error) {
31    console.error('Plivo webhook error:', error);
32    return new NextResponse('', { status: 200 }); // Always return 200 to Plivo
33  }
34}

Before sending real messages to real customers, test the full flow using Plivo's trial environment. In the Plivo Console, navigate to Sandbox → Sandbox Numbers and add your own mobile phone number as a verified test number. Plivo trial accounts can only send messages to verified sandbox numbers — this prevents trial abuse. With the environment variables set in Vercel and your project deployed, open your V0-generated UI, enter your verified test phone number in E.164 format (+12025551234), type a test message, and click Send. Within a few seconds you should receive the SMS on your phone. In the Plivo Console → Logs → Message Logs, you can see the delivery status, the message content, and the cost per message. For the inbound webhook, text a reply to your Plivo number and check your Vercel function logs (Vercel Dashboard → your project → Functions → View Logs) to confirm the webhook is being received and the form data is parsed correctly. To go live with real customers, upgrade your Plivo account from trial by adding billing information in the Plivo Console. After upgrading, your application can send to any phone number without the sandbox restriction. Update your PLIVO_SENDER_NUMBER environment variable if you are switching from a sandbox number to a production number, and redeploy on Vercel. Monitor your message delivery rates in Plivo Console → Logs. A delivery rate below 90% warrants investigation — common causes include invalid phone numbers in your dataset, carrier filtering for marketing content, and sending outside local quiet hours.