Vibe coding ChatGPT-vel: canvas, Codex és app építése ChatGPT-ből

Háromféleképpen vibe codolhatsz ChatGPT-vel. Kérhetsz egy kis appot chatben, és canvasban előnézetben nézheted; átadhatsz valódi kódbázison végzendő feladatokat a Codexnek, az OpenAI kódolóügynökének; vagy egy AI app-építőt, például a Mythexet köthetsz be, hogy a ChatGPT egy teljes appot építsen, hostoljon és publikáljon adatbázissal együtt. Az első a leggyorsabb egyoldalas eszközhöz, a második a fejlesztőknek való, a harmadik pedig élő appot ad bejelentkezéssel és adatokkal anélkül, hogy kilépnél a ChatGPT-ből.

Itt mindegyik működését, egy promptot mindegyikhez, és azt, hol állnak meg, találod meg. Ha a kifejezés hátteréről szeretnél olvasni, nézd meg: mi a vibe coding.

1. lehetőség: ChatGPT-chat és canvas

Egy gyors eszközhöz egyszerűen kérd. A ChatGPT megírja a kódot, a canvasban pedig egyszerű HTML- és React-oldalakat tud mutatni, hogy átkattinthass rajtuk és változtatásokat kérhess.

Írj egyoldalas borravaló-kalkulátort, amelynek van számla összeg-, borravalószázalék- (10, 15, 20 gombok és egy egyedi mező) és fős mezője. Mutasd a borravalót és az egy főre eső összeget, gépelés közben frissülve. Legyen tiszta a telefonon.

Jó ehhez: kalkulátorok, egyszerű játékok, céloldal-vázlatok és tanulás. Kérdezd meg: „magyarázd el ezt a fájlt úgy, mintha most kezdenék a kódolást”, és gyorsan tanulsz.

Hol áll meg: nincs backendje. Amit beírsz, nem mentődik másoknak, nincs bejelentkezés, és a megosztáshoz a kódot máshová kellene másolnod és magadnak hostolnod. Abban a pillanatban, hogy azt mondod: „és mentsd el, hogy a csapatom láthassa”, kinőttad a chatet.

Másolj-és-illessz vibe coding

Sokan úgy kezdenek, hogy kódot kérnek a ChatGPT-től, és a számítógépükön vagy egy tárhelyszolgáltatónál lévő fájlokba illesztik. Kis statikus oldalaknál működik, de gyorsan szétesik. Minden változtatás azt jelenti, hogy megkeresed a megfelelő fájlt, bemásolod a megfelelő részt, és reméled, hogy nem függ tőle semmi más, amit kicseréltél. Ha ezt többször is megteszed, lépj a következő két lehetőség valamelyikére.

2. lehetőség: Codex valódi kódbázishoz

A Codex az OpenAI szoftverfejlesztési ügynöke. Egyszerű nyelven adsz neki feladatot, ő pedig egy repositoryn dolgozik: olvassa a kódot, változtatásokat hajt végre több fájlban, parancsokat és teszteket futtat, és az eredményt átnézésre adja. Az OpenAI a ChatGPT-ben, parancssoros eszközként és szerkesztő-bővítményként kínálja; a csomagokat és a jelenlegi korlátokat nézd meg az OpenAI oldalán.

Egy feladatjellegű prompt illik hozzá a legjobban:

Ebben a repositoryban adj egy CSV-exportáló gombot a Rendelések oldalhoz. A jelenleg szűrt rendeléseket exportálja ezekkel az oszlopokkal: dátum, vevő, összeg és állapot. Adj egy tesztet az exportáló függvényhez, és futtasd a tesztcsomagot.

Jó ehhez: fejlesztőknek és technikai alapítóknak, akiknek van meglévő projektjük, és azt szeretnék, hogy egy ügynök vegye le róluk az egész feladatokat. Az ő stackjükkel és konvencióikkal dolgozik.

Amivel neked kell foglalkoznod: hol fut az app, az adatbázis, a titkok, a telepítés és a domainek. A Codex kódot változtat; nem hosztoló.

Codex és Mythex együtt

A Codex MCP-szerverekhez is csatlakozhat, a Mythexéhez is. Add hozzá a https://mcp.mythex.ai/mcp címet egyedi MCP-szerverként a Codexben, hagyd jóvá a hozzáférést a Mythexen, és a Codex a Mythex-projekten dolgozhat a felhőbeli homokozójában, míg az előnézetet, az adatbázist és a közzétételt a Mythex kezeli. A Mythex-appok építése Claude-ból, Cursorból vagy Codexből bejegyzésünk végigvezet rajta.

3. lehetőség: Teljes app építése ChatGPT-ből a Mythexszel

Ha egy ChatGPT-beszélgetésben szeretnél maradni, és végül valódi, hostolt appot kapni, kösd be a Mythexet. A Mythex appként működik a ChatGPT-ben: a ChatGPT a Mythex eszközeivel beszél MCP-n keresztül, a nyílt protokollon, amely lehetővé teszi, hogy az asszisztensek máshol hostolt eszközöket használjanak (mi az MCP).

Amint csatlakoztatva van, a ChatGPT létrehozhat Mythex-projektet, megírhatja a kódot egy privát felhőbeli homokozóban, elindíthatja az élő előnézetet, adatbázist és fájltárhelyet adhat hozzá, és publikálhatja az appot nyilvános URL-re. Az eredmények linkkel érkeznek, így megnyithatod a projektet a Mythexben, és nézheted az előnézetet.

Hogyan csatlakozz

1. A Mythexben nyisd meg a Fiókbeállításokat, és másold ki az MCP-címet.
2. A ChatGPT-ben add hozzá a Mythexet az appok vagy összekötők beállításai közül ezzel a címmel. A ChatGPT menüi időnként változnak, ilyenkor kövesd az OpenAI súgóoldalát az appok hozzáadásáról, ha a nevek eltérnek.
3. Megnyílik egy Mythex-oldal: jelentkezz be, és válaszd az Hozzáférés engedélyezése lehetőséget. Nincs beilleszthető kulcs.
4. Indíts egy beszélgetést, és említsd meg a Mythexet a kérésedben.

A csatlakozás bármelyik Mythex-csomagon működik. A homokozói eszközök — építés, előnézet, közzététel — Mythex Pro csomagot ($25 havonta) igényelnek, a homokozói idő és a hosting pedig a Mythex-kreditjeidből jön. A ChatGPT-használatod az OpenAI-csomagodon marad.

Egy első prompt a kipróbáláshoz

Használd a Mythexet, hogy építs nekem állásjelentkezés-követőt. Jelentkezéseket veszek fel céggel, szerepkörrel, linkkel, jelentkezés dátumával, állapottal (jelentkeztem, interjú, ajánlat, elutasítottak) és megjegyzésekkel. Mutass állapot szerinti táblát, ahol húzhatom a kártyákat, és egy egyszerű diagramot a jelentkezések számáról hetente. Mentsd el mindent adatbázisba, és védd bejelentkezéssel. Indítsd el az előnézetet, és add meg a linket.

Ezután egy változtatás üzenetenként:

A Mythex-projektben adj minden jelentkezéshez egy emlékeztető dátumot, és emeld ki azokat a kártyákat, amelyek emlékeztetője ma van vagy lejárt.

Publikáld, és küldd el az élő URL-t.

Jó ehhez: azoknak, akik ChatGPT-ben terveznek és gondolkodnak, és azt szeretnék, hogy az eredmény élő legyen, tartós adatokkal, anélkül hogy hostolást kellene tanulniuk. Mivel ez egy szokásos Mythex-projekt, bármikor folytathatod a Mythex chatben.

Melyik lehetőség illik ahhoz, amit építesz

Promptolási szokások, amelyek működnek a ChatGPT-ben

• Nevezd meg az eszközt, ha használni akarod. A „Használd a Mythexet, hogy…” egyértelművé teszi, hogy a kérés a te projektedre vonatkozik, nem általános válasz kell.
• Egy változtatás üzenetenként. A hosszú szerkesztési listák hosszú mellékhatás-listákat adnak.
• Kérj tervet nagy lépések előtt. „Mielőtt bármit változtatnál, sorold fel, mit változtatnál, és várd meg a jóváhagyásomat.”
• Illessz be pontos hibákat. A teljes hibaszöveg többet ér bármilyen leírásnál.
• Kérdezd meg, mi változott. „Foglald össze egyszerű szavakkal az utolsó három változtatásodat” segít tájékozódni, ha nem olvasod a kódot.

További példák a vibe coding promptok puskájában vannak.

Tartsd biztonságban

• Soha ne illessz be valódi jelszót vagy API-kulcsot egy ChatGPT-beszélgetésbe. Ha az appodnak kulcs kell, tedd a projekt titkai közé. A Mythex eszközei csak titoknevet jelentenek, soha nem értéket.
• Közzététel előtt ellenőrizd, hogy a felhasználók nem látják egymás adatait, és hogy egyetlen kulcs sem került olyan kódba, amely a böngészőben fut. A biztonságos-e a vibe coding? útmutatónk felsorolja az ellenőrzéseket, bemásolható promptokkal.

Claude-ot is használsz? A kísérő útmutató a vibe coding Claude-dal és Claude Code-dal témával foglalkozik. Modellenkénti nézetért lásd: ChatGPT vs Claude vs Gemini appépítéshez.

Kérdések