Vibe coding amb ChatGPT: canvas, Codex i com construir apps des de ChatGPT

Pots fer vibe coding amb ChatGPT de tres maneres. Demana-li al xat una app petita i previsualitza-la al canvas; encomana tasques en una base de codi real a Codex, l'agent de codi d'OpenAI; o connecta un creador d'apps amb IA com Mythex perquè ChatGPT pugui construir, allotjar i publicar una app completa amb una base de dades. La primera és la més ràpida per a una eina d'una sola pàgina, la segona és per a desenvolupadors, i la tercera et dona una app en directe amb inicis de sessió i dades sense sortir de ChatGPT.

Aquí tens com funciona cadascuna, un prompt per a cadascuna i on s'atura. Si vols el context del terme, llegeix què és el vibe coding.

Opció 1: el xat i el canvas de ChatGPT

Per a una eina ràpida, simplement demana-la. ChatGPT escriu el codi i, al canvas, pot mostrar pàgines senzilles en HTML i React perquè facis clic i demanis canvis.

Escriu una calculadora de propina d'una sola pàgina amb camps per a l'import de la factura, percentatge de propina (botons per al 10, 15, 20 i un camp personalitzat) i nombre de persones. Mostra la propina i l'import per persona, actualitzant-se mentre escric. Que es vegi net en un telèfon.

Bo per a: calculadores, jocs senzills, esborranys de pàgines de llançament i aprenentatge. Si preguntes «explica'm aquest fitxer com si fos nou en programació», aprendràs de pressa.

On s'atura: no hi ha backend. Res del que introdueixes es desa per a altres usuaris, no hi ha inici de sessió i, per compartir-la, hauries de copiar el codi en algun lloc i allotjar-la tu mateix. En el moment que dius «i desa-ho perquè el meu equip ho pugui veure», ja has superat el xat.

Vibe coding amb copiar i enganxar

Molta gent comença demanant codi a ChatGPT i enganxant-lo en fitxers del seu ordinador o en un servei d'allotjament. Funciona per a webs estàtiques petites, però es trenca ràpidament. Cada canvi vol dir trobar el fitxer correcte, enganxar la part correcta i esperar que res més no depenia del que has substituït. Si et trobes fent això més d'unes quantes vegades, passa a una de les dues opcions següents.

Opció 2: Codex per a una base de codi real

Codex és l'agent d'OpenAI per al treball de programari. Li dones una tasca en llenguatge senzill i treballa sobre un repositori: llegeix el codi, fa canvis entre fitxers, executa comandes i proves, i et lliura el resultat per revisar. OpenAI l'ofereix a ChatGPT, com a eina de línia de comandes i com a extensió d'editor; consulta el lloc web d'OpenAI per saber quins plans l'inclouen i quins són els límits actuals.

Un prompt en forma de tasca li va millor:

En aquest repo, afegeix un botó d'exportació a CSV a la pàgina de Comandes. Ha d'exportar les comandes filtrades actualment amb les columnes data, client, total i estat. Afegeix una prova per a la funció d'exportació i executa la suite de proves.

Bo per a: desenvolupadors i fundadors tècnics amb un projecte existent que volen que un agent s'enduu tasques senceres de la seva llista. Funciona amb la teva pila i les teves convencions.

Què encara gestiones tu: on s'executa l'app, la base de dades, els secrets, el desplegament i els dominis. Codex canvia el codi; no és un allotjament.

Codex i Mythex junts

Codex també es pot connectar a servidors MCP, inclòs el de Mythex. Afegeix https://mcp.mythex.ai/mcp com a servidor MCP personalitzat a Codex, aprova l'accés a Mythex i Codex pot treballar sobre un projecte de Mythex al seu sandbox al núvol, amb la previsualització, la base de dades i la publicació gestionades per Mythex. La nostra publicació sobre com construir apps de Mythex des de Claude, Cursor o Codex ho explica pas a pas.

Opció 3: construir una app completa des de ChatGPT amb Mythex

Si vols quedar-te en una conversa de ChatGPT i acabar amb una app real i allotjada, connecta Mythex. Mythex funciona dins de ChatGPT com una app: ChatGPT parla amb les eines de Mythex a través de MCP, el protocol obert que permet als assistents usar eines allotjades en un altre lloc (què és MCP).

Un cop connectat, ChatGPT pot crear un projecte de Mythex, escriure el codi en un sandbox privat al núvol, iniciar una previsualització en directe, afegir una base de dades i emmagatzematge de fitxers, i publicar l'app en una URL pública. Els resultats tornen amb un enllaç perquè puguis obrir el projecte a Mythex i veure la previsualització.

Com connectar-ho

1. A Mythex, obre Configuració del compte i copia l'adreça MCP.
2. A ChatGPT, afegeix Mythex des de la configuració d'apps o connectors amb aquesta adreça. Els menús de ChatGPT canvien de tant en tant, així que segueix la pàgina d'ajuda d'OpenAI per afegir una app si els noms no coincideixen.
3. S'obre una pàgina de Mythex: inicia sessió i tria Permet l'accés. No cal enganxar cap clau.
4. Comença una conversa i menciona Mythex a la teva petició.

Connectar-ho funciona en qualsevol pla de Mythex. Les eines del sandbox —construir, previsualitzar, publicar— necessiten Mythex Pro (25 $ al mes), i el temps de sandbox i l'allotjament surten dels teus crèdits de Mythex. L'ús de ChatGPT es queda al teu pla d'OpenAI.

Un primer prompt per provar

Usa Mythex per construir-me un seguidor de sol·licituds de feina. Afegeixo sol·licituds amb empresa, càrrec, enllaç, data d'enviament, estat (enviada, entrevista, oferta, rebutjada) i notes. Mostra un tauler per estat on pugui arrossegar les targetes, i un gràfic senzill de sol·licituds per setmana. Desa-ho tot en una base de dades i protegeix-ho amb un inici de sessió. Inicia la previsualització i dona'm l'enllaç.

Després, un canvi per missatge:

Al projecte de Mythex, afegeix una data de recordatori a cada sol·licitud i ressalta les targetes amb un recordatori d'avui o vençut.

Publica-la i envia'm l'URL en directe.

Bo per a: persones que ja planifiquen i pensen a ChatGPT i volen el resultat en directe, amb dades que persisteixen, sense aprendre a allotjar res. Com que és un projecte de Mythex normal, pots continuar al xat de Mythex en qualsevol moment.

Quina opció encaixa amb el que construeixes

Hàbits de prompt que funcionen a ChatGPT

• Nomena l'eina quan vols que s'usi. «Usa Mythex per…» deixa clar que la petició és per al teu projecte, no una resposta general.
• Un canvi per missatge. Les llistes llargues d'edicions produeixen llistes llargues d'efectes secundaris.
• Demana un pla abans de passos grans. «Abans de canviar res, enumera el que canviaràs i espera la meva aprovació.»
• Enganxa els errors exactes. El text complet de l'error val més que qualsevol descripció.
• Pregunta què ha canviat. «Resumeix els teus tres últims canvis en paraules senzilles» et manté orientat quan no llegeixes el codi.

N'hi ha més al nostre full de referència de prompts de vibe coding.

Mantén-ho segur

• Mai no enganxis contrasenyes reals ni claus d'API en una conversa de ChatGPT. Si la teva app necessita una clau, guarda-la als secrets del projecte. Les eines de Mythex només informen dels noms dels secrets, mai dels valors.
• Abans de publicar, comprova que els usuaris no puguin veure les dades dels altres i que cap clau no hagi acabat en codi que s'executi al navegador. La nostra guia el vibe coding és segur? enumera les comprovacions amb prompts que pots enganxar.

També uses Claude? La guia complementària cobreix el vibe coding amb Claude i Claude Code. Per a una visió model per model, consulta ChatGPT vs Claude vs Gemini per construir apps.

Preguntes