Agente de IA para WhatsApp com Next.js 15 e Zavu

Next.js (app router) facilita a construcao de webhooks serverless. Veja como conectar um sender de WhatsApp da Zavu e usar agentes de IA prontos.

Setup

bash
npx create-next-app whatsapp-agent
cd whatsapp-agent
bun add @zavudev/sdk

Crie .env.local com ZAVUDEV_API_KEY, ZAVU_WEBHOOK_SECRET, ZAVU_SENDER_ID.

Cliente

app/lib/zavu.ts:

typescript
import Zavudev from '@zavudev/sdk'

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

Route Handler

app/api/webhooks/whatsapp/route.ts:

typescript
import { NextRequest, NextResponse } from 'next/server'
import crypto from 'crypto'
import { zavu } from '@/lib/zavu'

export async function POST(req: NextRequest) {
  const body = await req.text()
  const signature = req.headers.get('x-zavu-signature') || ''
  const digest = crypto
    .createHmac('sha256', process.env.ZAVU_WEBHOOK_SECRET!)
    .update(body)
    .digest('hex')

  if (!crypto.timingSafeEqual(Buffer.from(digest), Buffer.from(signature))) {
    return NextResponse.json({ error: 'invalid signature' }, { status: 401 })
  }

  const event = JSON.parse(body)
  if (event.type === 'message.received') {
    await zavu.senders.agent.reply({
      senderId: process.env.ZAVU_SENDER_ID!,
      contactId: event.data.contact.id,
      messageId: event.data.message.id
    })
  }

  return NextResponse.json({ status: 'ok' })
}

Implemente export const runtime = 'edge' se quiser rodar no edge.

Criando o agente

No dashboard selecione seu sender e configure:

Provider: zavu
Modelo: gpt-4o-mini/claude-3-5-sonnet
Prompt: defina tom e limites
Context window: 6-10 mensagens
Ferramentas: HTTP para consultar CRM, knowledge base para docs

Ou via codigo:

typescript
await zavu.senders.agent.create({
  senderId: process.env.ZAVU_SENDER_ID!,
  name: 'Next Support',
  provider: 'zavu',
  model: 'gpt-4o-mini',
  systemPrompt: 'Ajude clientes SaaS em portugues',
  includeContactMetadata: true,
  enabled: true
})

Bases de conhecimento + ferramentas

zavu.senders.agent.knowledge_bases.attach para anexar Notion, Zendesk, Github
zavu.senders.agent.tools.create para endpoints GraphQL/REST

Observabilidade

Use Logs do Vercel / Next para ver cada webhook
Configure webhooks de analytics (agent.executed) para medir latencia
Use metadata para rastrear tickets

Deploy

Deploy no Vercel (set env vars)

Ative Protect Webhook no dashboard (valida assinatura)

Use vercel env pull para sincronizar localmente

Seu agente Next.js esta ativo! Para ver casos complexos (roteamento multi-sender, integracao com Salesforce), agende uma demo.