Cómo crear un clon de WhatsApp full stack con IA usando InsForge

Crear una aplicación full stack ya no es tan complicado como solía ser. Hoy existen herramientas que aceleran enormemente el proceso, y en este artículo vamos a aprovecharlas para construir algo concreto y divertido: un clon de WhatsApp completo, con subida de archivos, comunicación en tiempo real, persistencia en base de datos y autenticación por correo.

Lo mejor es que no vamos a montar el backend a mano. Para eso usaremos InsForge, una plataforma que nos provee base de datos PostgreSQL, comunicación en tiempo real, almacenamiento de archivos y hasta skills de IA que ayudan a escribir la lógica directamente desde nuestro agente de código.

El resultado: una app desplegada en producción, con una URL que podemos compartir y probar con otros usuarios en tiempo real.

Qué vamos a construir

La aplicación es un clon de WhatsApp, tanto en interfaz como en lógica. Entre sus funciones:

• Enviar y recibir mensajes de texto en tiempo real
• Enviar y reproducir notas de voz
• Subir imágenes (incluso arrastrándolas al chat)
• Autenticación con Google
• Añadir contactos por correo electrónico
• Estados (imágenes y videos con expiración)
• Doble check / visto y contador de mensajes no leídos
• Fotos de perfil por usuario

Para el frontend usaremos Cursor como asistente de IA, pero todo el proceso aplica para cualquier agente (Claude Code, Codex, etc.). El proyecto final queda desplegado en producción.

¿Qué es InsForge?

InsForge es una plataforma que nos da prácticamente todo el backend hecho. Con ella obtenemos:

• Autenticación: registrar y hacer login de usuarios.
• Base de datos (PostgreSQL): para guardar usuarios y los mensajes del chat.
• Cloud Storage: para alojar archivos (imágenes, audios, videos, PDFs, etc.).

Además incluye funciones adicionales como Edge Functions (para conectar con plataformas externas o añadir funcionalidad), Real Time (que usaremos para el chat), Cron Jobs (tareas programadas) e integración con modelos de IA.

Una de sus ventajas clave es que cada servicio está pensado para que un agente de IA lo opere directamente mediante CLI y skills, en lugar de tener que configurar todo manualmente desde un dashboard. Y para empezar es muy fácil: ofrece un plan gratuito.

Paso 1: Registrarse y crear el proyecto en InsForge

Lo primero es entrar al landing de InsForge y registrarse con una cuenta de Google o GitHub. Una vez dentro, nos pedirá el nombre de nuestro primer proyecto; en este caso lo llamamos WhatsApp InsForge y le damos a crear proyecto.

A partir de aquí ya podemos conectar nuestra aplicación con el backend. En el panel veremos un resumen de todas las características disponibles: base de datos, almacenamiento de archivos, funciones para conectar apps externas e incluso la forma de comunicarlo con una API de IA.

Paso 2: Generar el frontend con IA

Antes de tocar el backend, conviene tener una interfaz inicial. Creamos una carpeta nueva (WhatsApp InsForge) y la abrimos en Cursor.

En lugar de empezar desde cero, le pedimos al agente una planificación usando el modo Plan. Un prompt como este funciona bien:

"Crea un clon de WhatsApp Web en Next.js solo en UI (solo interfaz gráfica). Deben haber chats, estados y una página de perfil."

El agente arma rápidamente un plan: usará Next.js, temas claro/oscuro, un sidebar, layout, chats, etc. Si quieres fijar la versión, basta con indicar "utiliza Next 16". Luego le damos a construir y esperamos unos minutos.

Cuando termina, le pedimos "ejecuta el proyecto" y revisamos la interfaz. El resultado luce bastante bien: tiene datos demo, cambio de tema, página de perfil y un sidebar con chats y estados. Es usable, pero todavía le falta un backend real.

Paso 3: Conectar el backend con InsForge

Aquí entra InsForge. En el panel, en la sección Instalar, encontramos guías para cada agente popular (Claude Code, Codex, Cursor, etc.). Si tu herramienta no aparece, simplemente copias el comando genérico y se lo das a tu IA.

En resumen, lo que hace ese comando es instalar un skill más una herramienta de consola que se encarga de configurar el proyecto. Copiamos el comando con el token, lo pegamos en el chat del agente y le damos enter.

Tras unos segundos veremos:

• El login del CLI autenticado con nuestra cuenta.
• El link del proyecto.
• Los skills instalados (en Cursor puedes escribir /insforge para verlos).

Con esto, el frontend ya está vinculado al backend que acabamos de crear.

Paso 4: Modelo de datos, autenticación y contactos

Ahora le pedimos al agente que cree la estructura de datos y la autenticación:

"Crea en InsForge un modelo de datos de contactos y chats, además de poder autenticarme en la aplicación con Google y crea un seed de contactos."

El seed son datos de ejemplo para poder probar la app. El agente genera tareas para crear los modelos de contactos, perfiles, chats y mensajes, y va escribiendo el código SQL en una carpeta migrations (recuerda que InsForge usa PostgreSQL por detrás, así que puedes leer el SQL si conoces la sintaxis).

Si entras a la sección Database del panel, verás cada tabla: contactos, mensajes, perfiles, chats, etc. También se crean varios contactos de ejemplo por usuario y queda lista la autenticación con Google.

Al hacer login con Google, InsForge usa nuestra propia cuenta para autenticar, lo que nos evita tener que configurarlo manualmente para hacer pruebas.

Limpiar datos y buscar contactos

Como los chats iniciales están hardcodeados, le pedimos al agente dos cosas (Cursor permite lanzar varios agentes en paralelo):

"Añade la funcionalidad de buscar los contactos desde la UI." "Quita los chats hardcodeados."

Luego creamos contactos de prueba asociados a nuestro propio correo, para que al iniciar sesión tengamos contactos reales con quienes chatear. En la sección de autenticación del panel podemos ver al usuario logueado (nombre, correo, verificación), que es justamente el que necesita tener esos contactos relacionados.

Abrir el chat al hacer clic

Por defecto, al seleccionar un contacto solo aparecía un botón de "enviar mensaje". Lo arreglamos:

"Al dar clic en un contacto se debe abrir la UI de ese chat y se puede enviar un mensaje en tiempo real."

Ahora, al hacer clic en un contacto, el chat se abre directamente. Podemos verificar que los mensajes se guardan de dos formas: revisando la tabla mensajes en la base de datos, o refrescando la página y comprobando que el mensaje persiste.

Paso 5: Añadir contactos por correo

Como no trabajamos con números telefónicos sino con correos, pedimos:

"Permite añadir contacto usando correo electrónico."

Con esto podemos registrar un segundo usuario (cerrando sesión y entrando con otro correo) y añadirlo como contacto desde la búsqueda.

Paso 6: Comunicación en tiempo real

Al probar entre dos sesiones distintas (en navegadores diferentes, no pestañas, para no compartir sesión), notamos que los mensajes no llegaban al otro usuario sin refrescar. Lo solucionamos con dos prompts:

"Cuando un usuario envíe un mensaje a otro, ese chat debería abrirse inmediatamente para el usuario receptor." "Verifica la comunicación en tiempo real para que tanto al enviar como al recibir funcionen los mensajes."

Tras esto, los mensajes se envían y reciben al instante entre ambos usuarios. El real time de InsForge se encarga de mantener las sesiones sincronizadas.

Paso 7: Subir archivos adjuntos (Storage)

InsForge incluye una sección Storage donde podemos guardar cualquier tipo de archivo: imágenes, audios, videos, PDFs, etc. Para los adjuntos del chat pedimos:

"Permite subir archivos adjuntos por sesión y guardarlos en storage. /insforge" "Permite también hacer drag and drop en el chat para cargar."

(El /insforge carga el skill correspondiente para que el agente sepa cómo hacerlo.)

Ahora podemos arrastrar una imagen al chat y se sube automáticamente, apareciendo también en el chat del otro usuario. Si revisamos Storage → chat attachments en el panel, veremos la imagen recién subida. También funciona seleccionando la imagen desde el botón "+" y enviándola junto con texto.

Paso 8: Notas de voz

Las notas de voz son simplemente archivos de audio, así que se guardan igual que las imágenes:

"Permíteme enviar notas de voz. También se deben alojar en InsForge."

Probamos grabando un audio, lo enviamos, y el otro usuario puede reproducirlo. En Storage aparece el archivo de audio guardado. El mismo proceso aplica para videos, documentos y cualquier otro tipo de archivo.

Paso 9: Fotos de perfil

Para las imágenes de perfil:

"Permite subir imágenes de perfil para cada usuario."

Al autenticarnos con Google, la foto se carga automáticamente desde la cuenta de Google. Pero también podemos subir una imagen propia desde el escritorio y se actualiza el avatar. Para que la foto aparezca en el chat:

"Si el usuario tiene foto de perfil debería aparecer en el header del chat."

Paso 10: Desplegar en producción

Desplegar es muy sencillo. En la sección Deployments, basta con pedir:

"Despliega mi aplicación en InsForge."

InsForge usa un proveedor de nube por detrás (en este caso Vercel), pero se encarga de configurar todo automáticamente. Tras unos minutos obtenemos una URL de producción bajo un subdominio de InsForge, lista para compartir.

En producción la app va mucho más rápido, ya que no estamos en un entorno de desarrollo con live reload. Podemos probar el flujo completo entre dos navegadores: mensajes de texto, notas de voz e imágenes, todo en tiempo real.

Funcionalidades extra

Estados

Los estados son imágenes o videos públicos asociados a un usuario, que pueden expirar tras un tiempo. Los pedimos así:

"Permite que los usuarios puedan publicar estados (subir imágenes y videos). Se alojarán en InsForge y se pueden configurar para que expiren después de un tiempo establecido."

Ahora podemos publicar un estado con una expiración (por ejemplo, una hora) y el otro usuario lo ve en su sección de estados.

Doble check / visto

Para que el sistema de "visto" funcione como en WhatsApp:

"Implementen la funcionalidad de doble check o visto para que se actualice el contador de mensajes del chat."

Esto añade una columna de estado del mensaje, un contador de mensajes no leídos y el estado "enviado/leído". Los mensajes aparecen con dos checks grises hasta que el otro usuario los lee.

Después de cada cambio, actualizamos el despliegue:

"Actualiza el deployment en InsForge."

Bonus: ramas (branches) del backend

Un detalle importante: en el panel verás arriba que dice production, que son tus datos reales (donde los usuarios se registran, usan tu lógica y suben datos).

Pero puedes crear otra rama con Create new branch y darle un nombre (por ejemplo, staging). Esto crea una copia del backend —datos incluidos— para que puedas trabajar y hacer cambios sin interrumpir el backend real. Es decir, tienes un backend de verdad y uno de pruebas, y puedes crear cuantas ramas quieras.

Conclusión

Hemos creado una aplicación completa de forma rápida y sencilla, usando IA de principio a fin. Crear un clon es relativamente fácil cuando la plataforma ya nos da todas las funcionalidades hechas: conexión en tiempo real, base de datos, subida de archivos y despliegue.

Y aunque esta es una aplicación sencilla, se puede extender con muchas más características. Lo interesante de este enfoque es cómo InsForge permite que el agente de IA opere todo el backend sin que tengamos que salir nunca del editor de código.

¿Te gustaría ver otra aplicación construida con InsForge? Déjalo en los comentarios. Y si quieres asesorías personalizadas, visita fast.dev.