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

Puedes hacer vibe coding con ChatGPT de tres maneras. Pídele en el chat una app pequeña y previsualízala en canvas; encárgale tareas sobre una base de código real con Codex, el agente de programación de OpenAI; o conecta un creador de apps con IA, como Mythex, para que ChatGPT construya, aloje y publique 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 encaja con quienes programan, y la tercera te da una app en directo con inicios de sesión y datos sin salir de ChatGPT.

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

Opción 1: el chat de ChatGPT y canvas

Para una herramienta rápida, basta con pedirla. 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 campos para el importe de la cuenta, el porcentaje de propina (botones para 10, 15, 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.

Ideal para: calculadoras, juegos sencillos, borradores de páginas de captación y aprendizaje. Pregunta «explícame este archivo como si fuera nuevo en la programación» y aprenderás rápido.

Hasta dónde llega: no hay backend. Nada de lo que introduces se guarda para otros usuarios, no hay inicio de sesión y, para compartirla, tendrías que copiar el código en algún sitio y alojarlo tú. En cuanto digas «y guárdalo para que mi equipo lo vea», has superado el chat.

Vibe coding copiar y pegar

Mucha gente empieza pidiendo código a ChatGPT y pegándolo en archivos de su ordenador o en un servicio de alojamiento. Sirve para webs estáticas pequeñas, pero se viene abajo enseguida. Cada cambio implica encontrar el archivo correcto, pegar la parte adecuada y esperar que nada más dependiera de lo que has reemplazado. Si te descubres haciendo esto más de unas pocas veces, pasa a una de las dos opciones siguientes.

Opción 2: Codex para una base de código 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 revisarlo. OpenAI lo ofrece dentro de ChatGPT, como herramienta de línea de comandos y como extensión del editor; consulta la web de OpenAI para saber qué planes lo incluyen y cuáles son los límites actuales.

Las tareas en forma de instrucción encajan mejor:

En este repositorio, añade un botón para exportar a CSV en 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.

Ideal para: personas que programan y fundadores técnicos con un proyecto existente que quieren que un agente se quite tareas completas de encima. Trabaja con tu pila 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 alojamiento.

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 entorno aislado en la nube, con la vista previa, la base de datos y la publicación gestionadas por Mythex. Nuestra entrada 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 acabar con una app real alojada, conecta Mythex. Mythex funciona dentro de ChatGPT como app: ChatGPT usa 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 entorno aislado en la nube, iniciar una vista previa en directo, 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 conectarlo

1. En Mythex, abre los 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 ayuda de OpenAI para añadir una app si los nombres no coinciden.
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.

Conectarlo funciona en cualquier plan de Mythex. Las herramientas del entorno (construir, previsualizar, publicar) necesitan Mythex Pro (25 $ al mes), y el tiempo de entorno y el alojamiento 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 tracker de solicitudes de empleo. Añado solicitudes con empresa, puesto, enlace, fecha de solicitud, estado (solicitada, entrevista, oferta, rechazada) y notas. Muestra un tablero por estado donde pueda arrastrar tarjetas, y un gráfico sencillo de solicitudes por semana. Guárdalo todo en una base de datos y protégelo con un inicio de sesión. Inicia la vista previa y dame el enlace.

Después, 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 directo.

Ideal para: personas que ya planifican y piensan en ChatGPT y quieren el resultado en directo, con datos que persistan, sin aprender a alojar nada. Como es un proyecto normal de Mythex, puedes seguir en el chat de Mythex en cualquier momento.

Qué opción encaja con lo que construyes

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 cambios 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 confirmación.»
• Pega los errores exactos. El texto completo del error vale más que cualquier descripción.
• Pregunta qué ha cambiado. «Resume en palabras sencillas tus tres últimos cambios» te mantiene orientado cuando no lees el código.

Hay más en nuestra chuleta 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 muestran los nombres de los secretos, nunca sus valores.
• Antes de publicar, comprueba que los usuarios no puedan 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.

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

Preguntas