Tutorial: construye un agente WhatsApp con Vercel AI SDK + Claude en 60 minutos

Tres cuentas y dos herramientas locales:

• Cuenta Anthropic (console.anthropic.com) con tarjeta + API key generada.
• Cuenta Vercel (vercel.com) free tier suficiente para empezar.
• Cuenta Twilio (twilio.com) con número WhatsApp sandbox o productivo.
• Node.js 20+ instalado localmente.
• Editor (VS Code recomendado) + Cursor o Claude Code para acelerar.

Tiempo total esperado: 60 minutos a 90 minutos según experiencia previa con APIs.

Twilio reenvía mensajes WhatsApp a un endpoint nuestro. Creamos src/app/api/whatsapp/route.ts:

import { NextResponse } from 'next/server';
import { anthropic } from '@ai-sdk/anthropic';
import { generateText, tool } from 'ai';
import { z } from 'zod';
import twilio from 'twilio';

const client = twilio(
  process.env.TWILIO_ACCOUNT_SID!,
  process.env.TWILIO_AUTH_TOKEN!
);

export async function POST(request: Request) {
  const formData = await request.formData();
  const from = formData.get('From') as string;
  const body = formData.get('Body') as string;

  if (!from || !body) {
    return NextResponse.json({ error: 'missing fields' }, { status: 400 });
  }

  const { text } = await generateText({
    model: anthropic('claude-opus-4-7'),
    system: `Eres un agente de atención al cliente chileno de la empresa "Acme".
Respondes en espanol de Chile, registro formal-ejecutivo, sin emojis.
Si no puedes ayudar, deriva con la frase "Te conecto con un humano".`,
    prompt: body,
    maxSteps: 5,
    tools: {
      consultarPedido: tool({
        description: 'Consulta el estado de un pedido por numero.',
        parameters: z.object({ numero: z.string().min(1) }),
        execute: async ({ numero }) => {
          return { estado: 'En transito', ETA: '3 dias habiles', numero };
        },
      }),
    },
  });

  await client.messages.create({
    from: process.env.TWILIO_WHATSAPP_NUMBER,
    to: from,
    body: text,
  });

  return NextResponse.json({ ok: true });
}

Notas clave del código: (1) usamos generateText (no streamText) porque Twilio espera respuesta sincrónica; (2) maxSteps=5 permite hasta 5 vueltas de tool calling antes de responder; (3) las tools se declaran tipadas con Zod, no como functions sueltas; (4) la respuesta se envía vía Twilio en lugar de devolverla por HTTP.

Para producción reemplazamos ngrok por la URL de Vercel:

npm install -g vercel
vercel login
vercel --prod

Configurar variables de entorno en el dashboard de Vercel (Settings → Environment Variables) con los mismos valores que .env.local.

Actualizar el webhook de Twilio con la URL de producción: https://tu-app.vercel.app/api/whatsapp.

Para número WhatsApp productivo (no sandbox) necesitas: cuenta Twilio business + aprobación de Meta para tu marca + número aprobado. Proceso 1-3 semanas.

En producción necesitas saber qué pasa. Cuatro cosas que recomendamos desde el día uno:

• Logs estructurados de cada interacción (input, output, tools llamadas, latencia, tokens consumidos).
• Alerta por error o latencia anómala (Sentry, Logflare o equivalente).
• Métricas agregadas diarias (cantidad de conversaciones, ratio resolución sin escalamiento, costo de inferencia).
• Eval suite con 20-30 casos golden para detectar regresiones cuando se actualiza modelo o prompt.

Implementación mínima: console.log estructurado + dashboard en Grafana o Logflare. Mejorar después con LangSmith o Honeycomb.