Blog Logo

Cómo usar REA para clonar una app desde cero

REA conecta tu agente de programación con herramientas de ingeniería inversa para investigar cómo funciona una aplicación. Con este flujo puedes montar un grabador de pantalla para macOS con zoom automático, tomando como referencia una función de Cursorful. Necesitas Node.js, un agente compatible y la aplicación instalada para analizarla. (github.com)

Lo probé con Cursorful, la aplicación que utilizo para grabar mis vídeos. Conseguí generar un grabador que aplicaba zooms, pero el movimiento necesitaba bastante trabajo para acercarse al original: entender parte de una función y reproducirla con buen acabado son tareas distintas.

Qué analiza REA y qué necesitas para esta prueba

REA es un MCP que conecta el agente con herramientas de análisis. El agente pide una inspección, recibe los resultados y los utiliza para investigar una función o escribir una implementación propia. Para analizar JavaScript de forma estática no necesitas un descompilador de aplicaciones nativas. (github.com)

El material disponible cambia según la aplicación. En una app Electron puedes encontrar JavaScript empaquetado; en una aplicación nativa trabajas con un binario compilado. Una función que se ejecuta en el servidor requiere otro enfoque, porque descargar el cliente no te entrega ese código.

Para repetir mi prueba, prepara lo siguiente:

  • Un Mac donde puedas ejecutar el grabador que vas a construir.
  • Cursorful instalado para localizar su paquete.
  • Node.js y npm.
  • Claude Code, que fue el agente que utilicé para el análisis y la implementación.

En el vídeo tenía Node.js 22.19. Comprueba tu versión antes de empezar con este comando:

node -v

Deberías ver el número de versión en la terminal. Si vas a utilizar otro editor como entorno de trabajo, tienes también mis trucos para trabajar con Cursor; en este tutorial mantén el mismo agente durante la investigación para conservar sus hallazgos.

Cómo instalar REA y conectarlo al agente

  1. Ejecuta el instalador desde una carpeta de confianza, fuera del proyecto que quieras analizar. El punto de entrada publicado en el repositorio oficial de REA es el siguiente. (github.com)

Captura de la sección de instalación del repositorio de REA en GitHub, mostrando los comandos de configuración y enlaces.

Fuente: GitHub - morluto/rea: Reverse engineer anything with agents, from app behavior down to native binaries.

npx rea-agents setup

Aparecerá un asistente para elegir los agentes y revisar los cambios de configuración. Selecciona Claude Code si quieres seguir el mismo flujo que utilicé.

  1. Revisa y aprueba la configuración propuesta. El instalador registra el servidor MCP y añade las instrucciones de trabajo para el agente; después, reinicia el agente para que cargue la integración. (github.com)

    En mi prueba seleccioné Claude Code y OpenCode. Para repetir el ejercicio con Claude Code basta con configurar ese cliente.

  2. Decide si necesitas Hopper. El asistente puede ofrecer su instalación para analizar binarios nativos, pero Hopper no hace falta para la inspección estática de JavaScript de este ejercicio. (github.com)

    Yo acepté instalarlo y se abrió el diálogo de licencia o modo demo. Lo cerré porque iba a analizar una aplicación Electron.

Cómo localizar el archivo app.asar de Cursorful

  1. Localiza Cursorful en Finder y abre el menú contextual de la aplicación. Selecciona «Mostrar contenido del paquete» y entra en Contents, después en Resources.

    En la prueba encontré allí el archivo app.asar. Ese fue el objetivo que entregué al agente para investigar la función.

La distinción entre el paquete y la aplicación abierta importa: al agente le tienes que señalar el archivo que debe inspeccionar. Pedirle que analice «Cursorful» deja sin concretar dónde está el material de trabajo.

Ojo: encontrar JavaScript dentro del paquete no implica encontrar el proyecto original con nombres claros y comentarios. En el vídeo expliqué que el código podía estar ofuscado; por eso pedí referencias a archivos y posiciones para comprobar las conclusiones.

Qué pedirle al agente para entender el zoom automático

  1. Abre Claude Code y pídele que use REA sobre el archivo app.asar. Acompaña la ruta con una petición centrada en el zoom automático, como la que utilicé:

    Quiero entender cómo funciona el zoom automático.
    
    Qué datos se graban durante la grabación:
    posición del ratón, clics, teclado, etcétera.
    
    Cómo decide cuándo hacer zoom, dónde centrarlo,
    cuánto dura y cómo se suaviza el movimiento del cursor.
    
    Para cada conclusión dame el archivo y la posición
    donde lo has visto y separa lo confirmado de lo deducido.

    La respuesta debería describir los hallazgos y señalar las evidencias que los sostienen. Revisa especialmente qué partes presenta como confirmadas y cuáles deduce.

En mi análisis, el agente encontró información sobre eventos del ratón y pudo explicar parte de su funcionamiento. Sin embargo, no localizó la decisión que activaba el zoom; respondió que la palabra «zoom» no aparecía.

Eso limita lo que puedes trasladar a la implementación. Si el agente identifica cómo se registra el ratón, ya tienes una pieza útil. El comportamiento del zoom todavía necesita investigación o decisiones propias.

Pedir evidencias por conclusión ayuda a separar ambas cosas. Guarda ese análisis junto al proyecto para poder volver a los archivos cuando una decisión de la nueva aplicación no encaje con la referencia. Si ya organizas documentación técnica con IA, puedes incorporar esos hallazgos a un segundo cerebro para recuperar lo que aprendes.

Cómo construir una versión mínima desde cero

  1. Pide al agente una aplicación pequeña con el alcance de la prueba. Mi petición fue construir desde cero, sin reutilizar el código de Cursorful, un grabador para macOS que guardase un JSON con posiciones del ratón y clics con su marca de tiempo, y generase un vídeo.

    Mantén el zoom automático como función que quieres reproducir, pero conserva también los datos de entrada. Así podrás distinguir un fallo de captura de un fallo en el movimiento del vídeo.

El alcance mínimo evita mezclar el análisis con una copia completa del producto. Para esta prueba necesitaba seleccionar pantalla, grabar una sesión y revisar el resultado con zooms. Añadir un editor o más opciones antes de comprobar eso habría complicado la revisión.

Después de trabajar, el agente me entregó una aplicación con una interfaz para seleccionar pantalla. Tenía dos pantallas disponibles, elegí una y pude iniciar la grabación desde esa interfaz.

La instrucción de escribir una implementación propia también deja claro qué le estás pidiendo al agente. Su tarea es usar los hallazgos para construir el comportamiento que necesitas, sin trasladar directamente el código de la aplicación analizada.

Cómo comprobar la grabación y los zooms

  1. Graba una sesión corta que incluya escritura, clics y cambios de ventana. En mi prueba escribí texto, abrí otra aplicación, minimicé una ventana y volví al grabador para detenerlo.

    Abre el vídeo generado y revisa en qué momentos aparece el zoom, hacia dónde se desplaza y cómo vuelve al encuadre anterior.

El resultado aplicaba zooms al escribir y durante algunas interacciones. También desplazaba el encuadre hacia la zona del ratón. El movimiento necesitaba ajustes: la función básica estaba, pero todavía no se acercaba al acabado de Cursorful.

Para juzgar vuestra versión, comprobad por separado estos comportamientos:

  • La pantalla elegida coincide con la que aparece en el vídeo.
  • El JSON guarda posiciones y clics con marcas de tiempo.
  • El zoom destaca la interacción que quieres enseñar.
  • El desplazamiento y la duración permiten seguir la acción sin movimientos molestos.

Una grabación correcta puede tener zooms malos. Si la captura funciona, centra la siguiente iteración en cuándo activar el efecto, dónde centrarlo y cómo suavizarlo.

Errores frecuentes y qué corregir después

Si el agente no dispone de REA tras instalarlo, reinícialo antes de repetir el análisis. Ese reinicio forma parte de la configuración indicada por el proyecto. (github.com)

Si aparece el diálogo de Hopper durante este ejercicio, recuerda que yo pude cerrarlo y continuar con el paquete Electron. Instalar más herramientas no mejoró por sí mismo la investigación del zoom.

Si el agente no encuentra la lógica que buscas, evita tratar su siguiente propuesta como una reproducción confirmada. En mi caso, la aplicación generada resolvió una función parecida, aunque el análisis previo no había localizado cómo Cursorful decidía activar el efecto.

Cuando la función depende de un servidor, el paquete local tampoco contiene toda la implementación. Acota la investigación a lo que puedas observar y al comportamiento que necesites construir, en lugar de pedir una copia completa del servicio.

Repite la grabación con las mismas interacciones y señala el primer zoom que quede mal. Pide al agente que corrija ese comportamiento concreto y vuelve a generar el vídeo antes de añadir más funciones.


¿Qué te ha parecido?

Déjame tu opinión, pregunta o sugerencia. Los comentarios se sincronizan con GitHub Discussions .

← Volver al blog