Vibe coding cu ChatGPT: canvas, Codex și construirea aplicațiilor din ChatGPT

Poți face vibe coding cu ChatGPT în trei moduri. Ceri în chat o aplicație mică și o previzualizezi în canvas; dai sarcini pe o bază de cod reală lui Codex, agentul de cod al OpenAI; sau conectezi un constructor de aplicații AI, precum Mythex, ca ChatGPT să poată construi, găzdui și publica o aplicație completă, cu bază de date. Primul este cel mai rapid pentru un instrument dintr-o singură pagină, al doilea este potrivit dezvoltatorilor, iar al treilea îți dă o aplicație live cu autentificări și date fără să părăsești ChatGPT.

Iată cum funcționează fiecare, un prompt pentru fiecare și unde se oprește. Dacă vrei contextul termenului, citește ce este vibe coding-ul.

Varianta 1: chat ChatGPT și canvas

Pentru un instrument rapid, pur și simplu cere. ChatGPT scrie codul, iar în canvas poate afișa pagini simple HTML și React, ca să poți da click prin ele și să ceri modificări.

Scrie un calculator de bacșiș dintr-o singură pagină, cu câmpuri pentru suma notei, procentul de bacșiș (butoane pentru 10, 15, 20 și un câmp personalizat) și numărul de persoane. Arată bacșișul și suma pe persoană, actualizându-se pe măsură ce scriu. Fă-l să arate curat pe telefon.

Potrivit pentru: calculatoare, jocuri simple, schițe de pagini de lansare și învățare. Întreabă „explică-mi acest fișier ca și cum nu aș ști programare” și vei învăța repede.

Unde se oprește: nu există backend. Nimic din ce introduci nu se salvează pentru alți utilizatori, nu există autentificare, iar ca să îl partajezi ar trebui să copiezi codul undeva și să îl găzduiești singur. Din momentul în care spui „și salvează-l ca echipa mea să poată vedea”, ai depășit chatul.

Vibe coding prin copiere-lipire

Mulți oameni încep cerând cod de la ChatGPT și lipindu-l în fișiere de pe calculator sau într-un serviciu de găzduire. Funcționează pentru site-uri statice mici, dar se strică repede. Fiecare modificare înseamnă să găsești fișierul potrivit, să lipești partea potrivită și să speri că nimic altceva nu depindea de ce ai înlocuit. Dacă te prinzi că faci asta de mai mult de câteva ori, treci la una dintre următoarele două variante.

Varianta 2: Codex pentru o bază de cod reală

Codex este agentul OpenAI pentru lucrul cu software. Îi dai o sarcină în limbaj simplu, iar el lucrează pe un repository: citește codul, face modificări în mai multe fișiere, rulează comenzi și teste și îți dă rezultatul spre revizuire. OpenAI îl oferă în ChatGPT, ca instrument de linie de comandă și ca extensie pentru editor; verifică pe site-ul OpenAI ce planuri îl includ și care sunt limitele actuale.

Un prompt sub formă de sarcină i se potrivește cel mai bine:

În acest repo, adaugă un buton de export CSV pe pagina Comenzi. Să exporte comenzile filtrate în acel moment, cu coloanele data, client, total și stare. Adaugă un test pentru funcția de export și rulează suita de teste.

Potrivit pentru: dezvoltatori și fondatori tehnici cu un proiect existent, care vor ca un agent să preia sarcini întregi de pe lista lor. Lucrează cu stack-ul tău și cu convențiile tale.

Ce rămâne în sarcina ta: unde rulează aplicația, baza de date, secretele, implementarea și domeniile. Codex schimbă cod; nu este o platformă de găzduire.

Codex și Mythex împreună

Codex se poate conecta și la servere MCP, inclusiv cel al Mythex. Adaugă https://mcp.mythex.ai/mcp ca server MCP personalizat în Codex, aprobă accesul pe Mythex, iar Codex poate lucra pe un proiect Mythex în sandbox-ul său din cloud, cu previzualizarea, baza de date și publicarea gestionate de Mythex. Articolul nostru despre construirea aplicațiilor Mythex din Claude, Cursor sau Codex parcurge pașii.

Varianta 3: o aplicație completă din ChatGPT cu Mythex

Dacă vrei să rămâi într-o conversație ChatGPT și să ajungi la o aplicație reală, găzduită, conectează Mythex. Mythex funcționează în ChatGPT ca aplicație: ChatGPT vorbește cu instrumentele Mythex prin MCP, protocolul deschis care permite asistenților să folosească instrumente găzduite în altă parte (ce este MCP).

Odată conectat, ChatGPT poate crea un proiect Mythex, poate scrie codul într-un sandbox privat din cloud, poate porni o previzualizare live, poate adăuga o bază de date și stocare de fișiere și poate publica aplicația la un URL public. Rezultatele vin cu un link ca să deschizi proiectul în Mythex și să urmărești previzualizarea.

Cum te conectezi

1. În Mythex, deschide Setările contului și copiază adresa MCP.
2. În ChatGPT, adaugă Mythex din setările de aplicații sau conectori, folosind adresa respectivă. Meniurile ChatGPT se schimbă din când în când, deci urmează pagina de ajutor OpenAI pentru adăugarea unei aplicații dacă denumirile diferă.
3. Se deschide o pagină Mythex: autentifică-te și alege Permite accesul. Nu există o cheie de lipit.
4. Începe o conversație și menționează Mythex în cererea ta.

Conectarea funcționează pe orice plan Mythex. Instrumentele de sandbox — construire, previzualizare, publicare — necesită Mythex Pro (25 USD pe lună), iar timpul de sandbox și găzduirea vin din creditele tale Mythex. Utilizarea ChatGPT rămâne pe planul tău OpenAI.

Un prim prompt de încercat

Folosește Mythex ca să construiești pentru mine un tracker de cereri de angajare. Adaug cereri cu companie, post, link, data aplicării, stare (aplicat, interviu, ofertă, respins) și notițe. Arată un panou pe stări în care pot muta cardurile și un grafic simplu cu cererile pe săptămână. Salvează totul într-o bază de date și protejează-l cu o autentificare. Pornește previzualizarea și dă-mi linkul.

Apoi, o schimbare pe mesaj:

În proiectul Mythex, adaugă o dată de reamintire la fiecare cerere și evidențiază cardurile a căror reamintire este azi sau este depășită.

Publică-l și trimite-mi URL-ul live.

Potrivit pentru: oameni care deja plănuiesc și gândesc în ChatGPT și vor rezultatul live, cu date care persistă, fără să învețe găzduirea. Pentru că este un proiect Mythex obișnuit, poți continua în chatul Mythex oricând.

Ce variantă se potrivește cu ce construiești

Obiceiuri de prompt care funcționează în ChatGPT

• Numește instrumentul când vrei să fie folosit. „Folosește Mythex ca să…” arată clar că cererea este pentru proiectul tău, nu un răspuns general.
• O schimbare pe mesaj. Listele lungi de modificări produc liste lungi de efecte secundare.
• Cere un plan înainte de pași mari. „Înainte să schimbi ceva, listează ce vei modifica și așteaptă acordul meu.”
• Lipește erorile exacte. Textul complet al erorii face mai mult decât orice descriere.
• Întreabă ce s-a schimbat. „Rezumă ultimele trei modificări în cuvinte simple” te ține orientat când nu citești codul.

Mai multe sunt în cheat sheet-ul nostru cu prompturi de vibe coding.

Păstrează-l sigur

• Nu lipi niciodată parole reale sau chei API într-o conversație ChatGPT. Dacă aplicația ta are nevoie de o cheie, stocheaz-o în secretele proiectului. Instrumentele Mythex raportează doar numele secretelor, niciodată valorile.
• Înainte să publici, verifică dacă utilizatorii nu pot vedea datele altora și dacă nicio cheie nu a ajuns în cod care rulează în browser. Ghidul nostru este vibe coding-ul sigur? listează verificările cu prompturi pe care le poți lipi.

Folosești și Claude? Ghidul complementar acoperă vibe coding-ul cu Claude și Claude Code. Pentru o privire model cu model, vezi ChatGPT vs Claude vs Gemini pentru construirea aplicațiilor.

Întrebări