Lección 05

Deploy en Vercel + dominio + protecciones

Tu chatbot, en producción, con dominio y sin que el primer botcoiner que pase te funda los créditos.

Despliegue básico

npm install -g vercel
vercel

Te pide login, eliges el proyecto, y Vercel detecta Next.js automáticamente.

Importante: define la variable de entorno en el dashboard de Vercel:

• Proyecto → Settings → Environment Variables
• ANTHROPIC_API_KEY = tu key
• Environment: Production + Preview + Development
• Encrypted ✅

Después: vercel --prod.

Conecta tu dominio

En Vercel: Settings → Domains → Add.

Si tu dominio está en otro proveedor (Namecheap, OVH, Cloudflare):

• Si añades el dominio raíz: crea un A record apuntando a 76.76.21.21.
• Para www: CNAME a cname.vercel-dns.com.

Vercel te emite el certificado SSL automáticamente.

Las protecciones que SÍ o SÍ tienes que tener

1. Rate limiting

Sin esto, el primer aburrido que descubra tu chatbot te puede fundir la API key.

npm install @upstash/ratelimit @upstash/redis

// app/api/chat/route.ts
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, "1 m"),
});

export async function POST(req: Request) {
  const ip = req.headers.get("x-forwarded-for") ?? "anonymous";
  const { success } = await ratelimit.limit(ip);

  if (!success) {
    return new Response("Too many requests", { status: 429 });
  }

  // ... resto del código
}

Crea una BD gratis en upstash.com, pon UPSTASH_REDIS_REST_URL y UPSTASH_REDIS_REST_TOKEN en Vercel.

2. Validación de input

import { z } from "zod";

const Schema = z.object({
  messages: z.array(z.object({
    role: z.enum(["user", "assistant"]),
    content: z.string().max(4000),
  })).max(50),
});

export async function POST(req: Request) {
  const parsed = Schema.safeParse(await req.json());
  if (!parsed.success) {
    return new Response("Invalid input", { status: 400 });
  }

  const { messages } = parsed.data;
  // ...
}

3. Límite de tokens por petición

const totalChars = messages.reduce((acc, m) => acc + m.content.length, 0);
if (totalChars > 20000) {
  return new Response("Conversation too long", { status: 400 });
}

4. Modelo barato por defecto

claude-haiku-4-5 cuesta una fracción de claude-opus-4-7 y para la mayoría de chats casuales es indistinguible. Usa Opus sólo cuando el contexto pasa de 50k tokens o el razonamiento es crítico.

Monitoreo

Vercel Analytics viene gratis. Para errores:

npm install @sentry/nextjs

Y configura sentry.client.config.ts con tu DSN.

Lo que llevas hecho

• ✅ Chatbot con API de Claude
• ✅ Memoria conversacional (con estrategia de compresión)
• ✅ Tool use (clima, podrías añadir las que quieras)
• ✅ Streaming de tokens (UX rápida)
• ✅ UI con Markdown y syntax highlighting
• ✅ Deploy en Vercel con dominio
• ✅ Rate limiting y validación

Mejoras que puedes meter ahora

• Persistencia: guarda las conversaciones en Postgres (Neon, Supabase) para que el usuario las vea al volver.
• Auth: añade NextAuth con login de Google o GitHub.
• Múltiples conversaciones: sidebar tipo ChatGPT.
• Voz: añade Whisper para entrada por micro y ElevenLabs para salida.

Compártelo y mándame el link. Buen trabajo. 🎉