Vibe coding con ChatGPT: canvas, Codex y cómo crear apps desde ChatGPT

Puedes hacer vibe coding con ChatGPT de tres maneras. Pedirle en el chat una app pequeña y verla en canvas; encargar tareas sobre un código base real a Codex, el agente de programación de OpenAI; o conectar un creador de apps con IA como Mythex para que ChatGPT pueda construir, alojar y publicar una app completa con base de datos. La primera es la más rápida para una herramienta de una sola página, la segunda es para desarrolladores y la tercera te da una app en línea con inicio de sesión y datos sin salir de ChatGPT.

Aquí tienes cómo funciona cada una, un prompt para cada una y dónde se queda corta cada una. Si quieres el contexto del término, lee qué es el vibe coding.

Opción 1: chat de ChatGPT y canvas

Para una herramienta rápida, simplemente pídela. ChatGPT escribe el código y en canvas puede mostrar páginas HTML y React sencillas para que hagas clic y pidas cambios.

Escribe una calculadora de propinas de una sola página con entradas para el importe de la cuenta, el porcentaje de propina (botones de 10, 15 y 20 y un campo personalizado) y el número de personas. Muestra la propina y el importe por persona, actualizándose mientras escribo. Que se vea limpia en el móvil.

Bueno para: calculadoras, juegos sencillos, borradores de landing pages y aprender. Pide "explícame este archivo como si fuera nuevo en la programación" y aprenderás rápido.

Dónde se queda corto: no hay backend. Nada de lo que introduces se guarda para otros usuarios, no hay inicio de sesión y, para compartirlo, tendrías que copiar el código a otro sitio y alojarlo tú mismo. En el momento en que dices "y guárdalo para que mi equipo lo vea", has superado el chat.

Vibe coding de copiar y pegar

Mucha gente empieza pidiéndole código a ChatGPT y pegándolo en archivos de su ordenador o de un servicio de hosting. Funciona para sitios estáticos pequeños, pero se desmorona enseguida. Cada cambio implica encontrar el archivo correcto, pegar la parte correcta y esperar que nada dependiera de lo que has reemplazado. Si te sorprendes haciendo esto más de unas pocas veces, pasa a una de las dos opciones siguientes.

Opción 2: Codex para un código base real

Codex es el agente de OpenAI para trabajo de software. Le das una tarea en lenguaje natural y trabaja sobre un repositorio: lee el código, hace cambios en varios archivos, ejecuta comandos y pruebas, y te da el resultado para revisar. OpenAI lo ofrece en ChatGPT, como herramienta de línea de comandos y como extensión de editor; consulta el sitio de OpenAI para saber qué planes lo incluyen y los límites actuales.

Le va mejor un prompt en forma de tarea:

En este repositorio, añade un botón de exportar a CSV a la página de Pedidos. Debe exportar los pedidos filtrados actualmente con las columnas fecha, cliente, total y estado. Añade una prueba para la función de exportación y ejecuta el conjunto de pruebas.

Bueno para: desarrolladores y fundadores técnicos con un proyecto existente que quieren que un agente se encargue de tareas completas. Funciona con tu stack y tus convenciones.

Lo que sigues gestionando tú: dónde se ejecuta la app, la base de datos, los secretos, el despliegue y los dominios. Codex cambia código; no es un hosting.

Codex y Mythex juntos

Codex también puede conectarse a servidores MCP, incluido el de Mythex. Añade https://mcp.mythex.ai/mcp como servidor MCP personalizado en Codex, aprueba el acceso en Mythex y Codex podrá trabajar en un proyecto de Mythex en su sandbox en la nube, con la vista previa, la base de datos y la publicación a cargo de Mythex. Nuestro artículo sobre crear apps de Mythex desde Claude, Cursor o Codex lo explica paso a paso.

Opción 3: crear una app completa desde ChatGPT con Mythex

Si quieres quedarte en una conversación de ChatGPT y terminar con una app real y alojada, conecta Mythex. Mythex funciona dentro de ChatGPT como una app: ChatGPT habla con las herramientas de Mythex a través de MCP, el protocolo abierto que permite a los asistentes usar herramientas alojadas en otro lugar (qué es MCP).

Una vez conectado, ChatGPT puede crear un proyecto de Mythex, escribir el código en un sandbox privado en la nube, iniciar una vista previa en vivo, añadir una base de datos y almacenamiento de archivos y publicar la app en una URL pública. Los resultados llegan con un enlace para que abras el proyecto en Mythex y veas la vista previa.

Cómo conectar

1. En Mythex, abre Ajustes de cuenta y copia la dirección MCP.
2. En ChatGPT, añade Mythex desde los ajustes de apps o conectores usando esa dirección. Los menús de ChatGPT cambian de vez en cuando, así que sigue la página de ayuda de OpenAI para añadir una app si los nombres difieren.
3. Se abre una página de Mythex: inicia sesión y elige Permitir acceso. No hay ninguna clave que pegar.
4. Empieza una conversación y menciona Mythex en tu petición.

Conectar funciona en cualquier plan de Mythex. Las herramientas del sandbox (construir, previsualizar, publicar) requieren Mythex Pro ($25 al mes), y el tiempo de sandbox y el hosting salen de tus créditos de Mythex. Tu uso de ChatGPT sigue en tu plan de OpenAI.

Un primer prompt para probar

Usa Mythex para crear un seguimiento de solicitudes de empleo para mí. Añado solicitudes con empresa, puesto, enlace, fecha de solicitud, estado (solicitado, entrevista, oferta, rechazado) y notas. Muestra un tablero por estado donde pueda arrastrar tarjetas y un gráfico sencillo de solicitudes por semana. Guarda todo en una base de datos y protégelo con un inicio de sesión. Inicia la vista previa y dame el enlace.

Luego, un cambio por mensaje:

En el proyecto de Mythex, añade una fecha de recordatorio a cada solicitud y resalta las tarjetas cuyo recordatorio sea hoy o esté vencido.

Publícalo y envíame la URL en vivo.

Bueno para: quienes ya planifican y piensan en ChatGPT y quieren el resultado en línea, con datos que persisten, sin aprender hosting. Como es un proyecto de Mythex normal, puedes seguir en el chat de Mythex en cualquier momento.

Qué opción encaja con lo que estás creando

Hábitos de prompts que funcionan en ChatGPT

• Nombra la herramienta cuando quieras que se use. "Usa Mythex para…" deja claro que la petición es para tu proyecto, no una respuesta general.
• Un cambio por mensaje. Las listas largas de ediciones producen listas largas de efectos secundarios.
• Pide un plan antes de los pasos grandes. "Antes de cambiar nada, enumera lo que vas a cambiar y espera mi visto bueno."
• Pega los errores exactos. El texto completo del error vale más que cualquier descripción.
• Pregunta qué cambió. "Resume tus últimos tres cambios con palabras sencillas" te mantiene orientado cuando no estás leyendo el código.

Hay más en nuestra hoja de prompts de vibe coding.

Mantenlo seguro

• Nunca pegues contraseñas ni claves de API reales en una conversación de ChatGPT. Si tu app necesita una clave, guárdala en los secretos del proyecto. Las herramientas de Mythex solo informan de los nombres de los secretos, nunca de sus valores.
• Antes de publicar, comprueba que los usuarios no pueden ver los datos de otros y que ninguna clave haya acabado en código que se ejecuta en el navegador. Nuestra guía ¿es seguro el vibe coding? enumera las comprobaciones con prompts que puedes pegar.

¿Usas también Claude? La guía complementaria cubre el vibe coding con Claude y Claude Code. Para una visión modelo por modelo, mira ChatGPT vs Claude vs Gemini para crear apps.

Preguntas