Cómo construí WhatSimule: Suite 3D y video para WhatsApp

Crear anuncios o historias de WhatsApp para redes solía ser una pesadilla artesanal: grababas la pantalla de tu propio teléfono, fingías dos cuentas con números reales, importabas el video a Premiere o CapCut para acelerar el tipeo y luego sincronizabas sonidos de teclado a mano durante horas. Si el guion cambiaba una sola palabra, había que rehacer todo desde cero.

Por qué los chats simulados dominan la atención hoy

El contenido en formato de conversación de mensajería es uno de los ganchos visuales más poderosos del internet moderno. Retiene la atención al instante porque emula la interfaz que consultamos docenas de veces al día.

Los casos de uso van mucho más allá de un mockup estático:

• Demostración de Chatbots y Agentes de IA en tu web: En lugar de explicar con texto aburrido cómo funciona tu bot, cuelgas un widget interactivo embebido en tu landing page que simula la interacción paso por paso, en vivo y sin arriesgar números de teléfono reales.
• Entrenamiento y análisis de conversaciones de ventas: Simular paso a paso el manejo de objeciones, cierres comerciales y secuencias de prospección con hiperrealismo visual.
• Creación de contenido viral para TikTok y YouTube: Las historias de chats (storytimes, anécdotas graciosas, conversaciones con giros inesperados) generan una curiosidad y un morbo irresistibles. De hecho, personalmente estoy abriendo canales en YouTube y TikTok enfocados en este formato de simulación porque la retención que logran es absurda.

Para resolver estas necesidades con nivel profesional, en CHAMBAPRO desarrollamos WhatSimule Studio: una suite integral de simulación 3D de WhatsApp con generación de video en alta definición y widgets web embebibles, disponible hoy en producción en whatsimule.com.

Tres canales de acceso: Web, API REST y Agentes de IA (MCP)

WhatSimule no se limita a un editor en el navegador; está diseñado como una plataforma accesible desde cualquier punto de tu flujo de trabajo:

1. Plataforma Web interactiva: Editor visual en tiempo real para redactar mensajes, personalizar fotos de perfil, ajustar rotación tridimensional en ejes X/Y/Z y previsualizar con audio nativo.
2. API REST (OpenAPI 3.1): Endpoints seguros con autenticación para crear simulaciones, solicitar capturas PNG en milisegundos o encolar renderizados de video programáticamente.
3. Model Context Protocol (MCP) para ChatGPT y Claude: Puedes conectar el servidor MCP de WhatSimule directamente a Claude Desktop, Cursor, Antigravity o ChatGPT. Le pides a tu agente de IA en lenguaje natural: “Crea una conversación de WhatsApp donde un lead pregunta por el software y el asesor resuelve sus dudas con una nota de voz”. La IA ejecuta las herramientas correspondientes y la simulación se crea y almacena automáticamente en tu cuenta de WhatSimule, lista para ser editada o exportada a video.

Los mejores casos de uso en el mundo real

• Demostración de Chatbots y Agentes de IA en tu sitio web: En vez de explicar con texto plano o diagramas cómo atiende tu bot, incrustas el simulador interactivo en tu landing page. El visitante ve la conversación desenvolverse en tiempo real con tiempos de lectura, tipeo y multimedia.
• Entrenamiento de equipos comerciales y Playbooks de ventas: Desglosa paso a paso cómo responder a objeciones complejas (“está muy caro”, “déjame revisarlo con mi socio”) con ejemplos visuales hiperrealistas para tu equipo de ventas en WhatsApp.
• Creación de contenido viral para TikTok, Reels y Shorts: Las historias basadas en conversaciones de mensajería (anécdotas cómicas, dramas cotidianos, storytimes) generan un morbo y una retención de audiencia excepcionales.
• Prototipado rápido de flujos UX: Valida la naturalidad y el tono de respuesta de un nuevo canal de atención antes de gastar recursos de desarrollo en la integración con la API de WhatsApp Business.

Simulador embebido en acción: interactúa con este ejemplo

A continuación puedes ver exactamente cómo luce el simulador incrustado mediante su Web Component oficial:

Incrustar una simulación en cualquier sitio web (Webflow, WordPress, Astro, Next.js o HTML puro) es tan simple como copiar y pegar este bloque desde tu panel:

<!-- Import Stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/rrortega-whatsimule/dist/whatsapp-simulator.css" />

<!-- Web Component with Embed ID -->
<what-simule embed-id="145baff2-754a-459f-9242-a29ef2b1bc69" src="https://whatsimule.com/embed/145baff2-754a-459f-9242-a29ef2b1bc69/alex"></what-simule>

Qué ofrece WhatSimule y cómo está conceptualizado

WhatSimule ofrece un conjunto robusto de herramientas para creadores, empresas y desarrolladores:

1. Simulador 3D en tiempo real: Perspectiva tridimensional con rotación libre en ejes X/Y/Z, sombras dinámicas y teclado reactivo con sonidos nativos vía Web Audio API.
2. Widgets e iFrames embebibles (<what-simule>): Componentes web listos para incrustar en cualquier sitio web o landing page comercial para mostrar flujos de chatbots o testimonios interactivos.
3. Hiper-renderizado de video MP4 a 60 FPS: Animación fluida de tipeo sincronizada cuadro a cuadro con sonidos de teclado, envío y recepción, adaptada a formatos clave: vertical 9:16 (TikTok, Reels, Shorts), cuadrado 1:1 (feed) y horizontal 16:9 (YouTube).
4. Generación instantánea de PNG en 2X HD: Con sistema de caché inteligente en Redis (24 horas) que responde en menos de 5 milisegundos para solicitudes repetidas.
5. Control total para Agentes de IA vía MCP: Servidor bajo el estándar Model Context Protocol para que herramientas como Claude Desktop, Cursor o Antigravity generen chats y videos mediante instrucciones en lenguaje natural.

La arquitectura técnica detrás del SaaS

Construir un software que combine edición visual reactiva, procesamiento de video pesado en el servidor y entrega de archivos multimedia en milisegundos requirió una arquitectura distribuida y desacoplada:

[ Cliente Web / Next.js 16 ]     [ Agentes de IA / Claude Desktop ]
               │                                │
               │ (REST / WebSockets)            │ (Model Context Protocol)
               ▼                                ▼
       [ API Gateway / Next.js Server & MCP Route ]
               │
       ┌───────┴────────────────────────┐
       ▼                                ▼
[ Better-SQLite3 ]             [ Redis + BullMQ ]
(Estados & Usuarios)           (Cola de Video & Cache 24h)
                                        │
                                        ▼
                           [ Video Rendering Worker ]
                           ├── Playwright (Chromium Headless)
                           ├── Web Audio API / Sintetizador WAV
                           └── FFmpeg Transcoding Engine (60 FPS)
                                        │
                                        ▼
                           [ Deepstream Realtime Server ]
                           (Progreso en vivo hacia la UI)

El stack tecnológico está compuesto por:

• Frontend & API: Next.js 16 (App Router), React 19, TypeScript, TailwindCSS v4 y Framer Motion.
• Motor visual de mensajería: Paquete propietario rrortega-whatsimule (Web Component aislado).
• Persistencia ágil: Better-SQLite3 para metadatos de usuario, configuraciones y control de licencias.
• Motor de Video: Playwright (Chromium Headless) + FFmpeg.
• Distribución asíncrona: Redis con BullMQ y Deepstream WebSockets para notificaciones de progreso en vivo.
• Monetización: Stripe Checkout con webhooks para planes Free, Small ($2.99/mes) y Business ($9.99/mes).

Paso 1: El motor del simulador y perspectiva 3D

El núcleo del renderizado visual vive en un componente desacoplado capaz de ejecutarse tanto en el navegador del cliente como dentro de una instancia headless en el servidor.

El componente encapsula la geometría exacta de las burbujas de WhatsApp, los estados de entrega (reloj, una palomita, doble gris, doble azul), notas de voz interactivas y transformaciones CSS 3D:

// Preview/SimulatorPreview.tsx (Fragmento de proyección 3D)
<div
  className="relative transition-transform duration-300 ease-out will-change-transform"
  style={{
    transform: is3DEnabled
      ? `perspective(1200px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`
      : 'none',
    transformStyle: 'preserve-3d',
  }}
>
  <what-simule
    ref={simuleRef}
    theme={theme}
    chat-title={contactName}
    avatar-url={avatarUrl}
    enable-sounds={enableSounds}
  />
</div>

Esto permite al usuario rotar el dispositivo en un espacio tridimensional realista antes de exportar la imagen o el video final.

Paso 2: Pipeline de video a 60 FPS con Playwright y FFmpeg

El reto más complejo fue generar videos en alta definición que capturen la animación fluida de tipeo y la aparición de mensajes sin tirones ni pérdidas de sincronización de audio.

En lugar de grabar la pantalla en tiempo real (lo cual depende de la potencia de la GPU del servidor y sufre caídas de cuadros por segundo), implementé un renderizador basado en pasos deterministas:

1. El worker de BullMQ levanta una instancia headless de Chromium con dimensiones exactas según la plantilla seleccionada (por ejemplo, 1080×1920 para formato 9:16).
2. Playwright carga la vista de renderizado (/embed/[id]?render=true) con los estilos optimizados.
3. Se activa la captura de fotogramas controlados y la multiplexación de audio mediante FFmpeg:

// lib/video/renderer.ts (Fragmento del orquestador de renderizado)
import { chromium } from 'playwright';
import ffmpeg from 'fluent-ffmpeg';

export async function renderSimulationVideo(options: RenderOptions): Promise<RenderResult> {
  const browser = await chromium.launch({
    headless: true,
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--use-gl=swiftshader', // Renderizado consistente por software en VPS
    ],
  });

  const page = await browser.newPage({
    viewport: { width: options.width || 1080, height: options.height || 1920 },
    deviceScaleFactor: 2, // Calidad retina 2X
  });

  // Carga determinista del simulador
  await page.goto(`${process.env.APP_URL}/embed/${options.embedId}?autoplay=true`);
  await page.waitForSelector('.whatsimule-ready');

  // Transcodificación sincronizada con FFmpeg a 60 FPS
  return new Promise((resolve, reject) => {
    ffmpeg()
      .input(videoStream)
      .inputFPS(options.fps || 60)
      .input(audioTrackPath)
      .outputOptions([
        '-c:v libx264',
        '-preset fast',
        '-pix_fmt yuv420p',
        '-c:a aac',
        '-b:a 192k',
        '-movflags +faststart',
      ])
      .output(outputPath)
      .on('end', () => resolve({ outputPath, duration: options.durationSeconds }))
      .on('error', (err) => reject(err))
      .run();
  });
}

Paso 3: Desacoplamiento asíncrono y WebSockets en tiempo real

Generar un video de 30 segundos en resolución 1080p a 60 cuadros por segundo toma entre 10 y 25 segundos de procesamiento computacional. El usuario no debe quedarse esperando en una pantalla congelada.

La aplicación delega el trabajo a una cola BullMQ en Redis y notifica el progreso mediante Deepstream WebSockets:

// lib/video/queue.ts
import { Queue } from 'bullmq';
import { getRedisClient } from '@/lib/redis';

export const videoQueue = new Queue('video-rendering-queue', {
  connection: getRedisClient(),
  defaultJobOptions: {
    attempts: 3,
    backoff: { type: 'exponential', delay: 2000 },
    removeOnComplete: 100,
    removeOnFail: 200,
  },
});

En el navegador del cliente, un hook de React (useRealtimeVideoJobs) se suscribe a los eventos del WebSocket. Cuando el worker avanza (inicialización, captura de fotogramas, codificación MP4), la interfaz actualiza una barra de progreso fluida sin necesidad de hacer polling repetitivo.

Paso 4: Exportación PNG ultra rápida con caché inteligente

Muchos usuarios solo necesitan una captura estática de alta calidad para un artículo, anuncio de imagen o carrusel. Generar una captura con Playwright en cada solicitud tardaría ~1.5 segundos.

Para optimizar esto, implementé una capa de caché de 24 horas (TTL 86400s) sobre Redis:

// lib/cache/index.ts
export async function getCachedPng(simulationId: string, hash: string): Promise<Buffer | null> {
  const cacheKey = `whatsimule:png:${simulationId}:${hash}`;
  const cachedData = await redis.getBuffer(cacheKey);
  return cachedData || null;
}

export async function setCachedPng(simulationId: string, hash: string, buffer: Buffer): Promise<void> {
  const cacheKey = `whatsimule:png:${simulationId}:${hash}`;
  await redis.set(cacheKey, buffer, 'EX', 86400); // 24 horas de vigencia
}

Si la simulación no ha cambiado de contenido ni de ángulo 3D, el servidor entrega la imagen directamente desde la memoria RAM en tan solo 5 milisegundos.

Paso 5: Control total para Agentes de IA con MCP

Uno de los diferenciales más potentes de WhatSimule es su soporte nativo para Model Context Protocol (MCP). Esto permite que asistentes de inteligencia artificial creen y gestionen simulaciones de forma programática.

El servidor expone herramientas para:

• create_simulation: Generar un chat con roles, avatares, textos y marcas de tiempo.
• export_png: Obtener la captura HD con encuadre o perspectiva 3D.
• export_video: Encolar la renderización de video en formato vertical u horizontal.
• wait_for_video: Esperar el resultado y descargar la URL pública del MP4 listo.

{
  "name": "create_simulation",
  "description": "Crea una conversación simulada de WhatsApp para generación de contenido o video.",
  "parameters": {
    "type": "object",
    "properties": {
      "contactName": { "type": "string" },
      "messages": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "sender": { "type": "string", "enum": ["me", "them"] },
            "text": { "type": "string" },
            "time": { "type": "string" }
          }
        }
      }
    }
  }
}

Un redactor o creador de contenido puede pedirle a su asistente: “Genera un guion de venta sobre mi curso y dame el video listo para Reels”, y el agente interactúa con WhatSimule para entregarle el archivo MP4 terminado en minutos.

Desafíos técnicos en producción

Llevar este proyecto a producción en un entorno auto-hospedado presentó varios desafíos:

• Consumo de memoria en Chromium Headless: Múltiples pestañas de Playwright renderizando a 60 FPS pueden agotar rápidamente la memoria de un VPS. Limitar la concurrencia del worker a 2 tareas simultáneas y reciclar el contexto del navegador cada 10 trabajos eliminó cualquier fuga de memoria.
• Sincronización de audio en FFmpeg: Cuando la tasa de cuadros por segundo de los fotogramas capturados variaba ligeramente, el audio del teclado se desfasaba hacia el final del video. Forzar una entrada con -r 60 constante y ajustar los filtros de multiplexación garantizó una sincronización exacta al milisegundo.
• Perspectiva 3D en dispositivos móviles: En teléfonos de gama media, aplicar transformaciones tridimensionales continuas sobre animaciones de chat provocaba lentitud. Implementé la propiedad CSS will-change: transform y restringí los cálculos pesados mientras el usuario está deslizando la pantalla.

Conclusión

WhatSimule demuestra que los productos más atractivos nacen al eliminar fricciones reales en flujos de trabajo repetitivos. Combinando un simulador interactivo de alta fidelidad, colas de procesamiento asíncrono de video y capacidades nativas de integración para agentes de IA, logramos transformar una tarea que tomaba horas de edición en un proceso de un par de clics.

Puntos clave:

• Renderizado determinista: El video a 60 FPS debe procesarse por fotogramas controlados, nunca por grabación en vivo de pantalla.
• Caché en memoria para I/O frecuente: Almacenar activos estáticos en Redis reduce los tiempos de respuesta de segundos a milisegundos.
• Preparado para la era de los agentes: Diseñar interfaces compatibles con protocolos como MCP abre canales de distribución automáticos para usuarios que trabajan directamente con IA.

Puedes probar la suite completa y crear tus propias simulaciones de chat hoy mismo:

Librería Open Source: el simulador para la comunidad

Para devolverle algo al ecosistema que tanto nos da, decidí liberar el motor del simulador como una librería independiente de código abierto:

⭐ Repositorio en GitHub: https://github.com/rrortega/whatsimule

Si te resulta útil para tus propios proyectos, landings o herramientas de contenido, pásate por GitHub y déjale una estrella ⭐️. Los Pull Requests, issues y sugerencias son más que bienvenidos; si te animas a sumar nuevas burbujas, animaciones o mejorar el motor de audio, el código está listo para recibir tus contribuciones.

Artículos relacionados sobre pipelines de audio, IA y arquitectura

• Convertir audio con Rust y FFmpeg en milisegundos
• OmniRoute: Gateway de IA auto-hospedado en tu VPS
• Auditoría web 360: De 5 CLIs a prompts para tu agente IA
• CombusTicket: Automatiza tu facturación de gasolina
• Trayectoria y filosofía en mi perfil personal