Vibe coding s ChatGPT-om: Canvas, Codex i izrada aplikacija iz ChatGPT-a

Vibe coding s ChatGPT-om možeš raditi na tri načina. Zamoli ga u chatu za malu aplikaciju i pregledaj je u canvasu; prepusti zadatke na pravoj kodnoj bazi Codexu, OpenAI-jevom agentu za kodiranje; ili poveži AI graditelj aplikacija poput Mythexa, pa ChatGPT može izgraditi, hostati i objaviti punu aplikaciju s bazom podataka. Prvi je najbrži za alat s jednom stranicom, drugi je za developere, a treći daje živu aplikaciju s prijavama i podacima bez napuštanja ChatGPT-a.

Evo kako svaki radi, upit za svaki i gdje staje. Ako želiš pozadinu o pojmu, pročitaj što je vibe coding. Ova stranica je praktična strana.

Opcija 1: ChatGPT chat i canvas

Za brzi alat samo zatraži. ChatGPT piše kod, a u canvasu može prikazati jednostavne HTML i React stranice da kliknete i tražite promjene.

Napiši jednostranični kalkulator napojnice s poljima za iznos računa, postotak napojnice (gumbi za 10, 15, 20 i prilagođeno polje) i broj osoba. Prikaži napojnicu i iznos po osobi, ažurirano dok tipkam. Neka izgleda čisto na telefonu.

Dobro za: kalkulatore, jednostavne igre, nacrte landing stranica i učenje. Pitaj „objasni mi ovu datoteku kao da sam novi u kodiranju“ i brzo ćeš naučiti.

Gdje staje: nema backenda. Ono što uneseš ne sprema se za druge korisnike, nema prijave, a da bi to podijelio, kod bi morao kopirati negdje i sam hostati. Čim kažeš „i spremi to da moj tim može vidjeti“, prerastao si chat.

Vibe coding kopiraj-zalijepi

Mnogi ljudi počinju tako da od ChatGPT-a traže kod i lijepe ga u datoteke na računalu ili u uslugu za hosting. Radi za male statične stranice, ali brzo se raspadne. Svaka promjena znači traženje prave datoteke, lijepljenje pravog dijela i nadu da ništa drugo nije ovisilo o onome što si zamijenio. Ako to radiš više od nekoliko puta, prijeđi na jednu od sljedeće dvije opcije.

Opcija 2: Codex za pravu kodnu bazu

Codex je OpenAI-jev agent za softverski rad. Zadaš mu zadatak običnim jezikom, a on radi nad repozitorijem: čita kod, mijenja datoteke, pokreće naredbe i testove te ti daje rezultat za pregled. OpenAI ga nudi u ChatGPT-u, kao alat naredbenog retka i kao proširenje za uređivač; provjeri OpenAI-jevu stranicu za to koji paketi ga uključuju i aktualna ograničenja.

Zadatak u obliku naloga najbolje mu odgovara:

U ovom repozitoriju dodaj gumb za izvoz CSV-a na stranicu Narudžbe. Neka izvozi trenutno filtrirane narudžbe sa stupcima datum, kupac, ukupno i status. Dodaj test za funkciju izvoza i pokreni skup testova.

Dobro za: developere i tehničke osnivače s postojećim projektom koji žele da agent preuzme cijele zadatke s liste. Radi s tvojim stackom i konvencijama.

Što i dalje sam rješavaš: gdje aplikacija radi, bazu podataka, tajne, objavu i domene. Codex mijenja kod; nije hosting.

Codex i Mythex zajedno

Codex se također može povezati s MCP serverima, uključujući Mythexov. Dodaj https://mcp.mythex.ai/mcp kao prilagođeni MCP server u Codexu, odobri pristup na Mythexu i Codex može raditi na Mythex projektu u njegovom cloud sandboxu, dok pregled, bazu i objavu obrađuje Mythex. Naš post o izradi Mythex aplikacija iz Claudea, Cursora ili Codexa prolazi kroz to.

Opcija 3: Izradi punu aplikaciju iz ChatGPT-a uz Mythex

Ako želiš ostati u razgovoru s ChatGPT-om i na kraju imati pravu, hostanu aplikaciju, poveži Mythex. Mythex radi unutar ChatGPT-a kao aplikacija: ChatGPT koristi Mythexove alate preko MCP-a, otvorenog protokola koji asistentima omogućuje korištenje alata hostanih negdje drugdje (što je MCP).

Kada je povezan, ChatGPT može napraviti Mythex projekt, napisati kod u privatnom cloud sandboxu, pokrenuti živi pregled, dodati bazu podataka i pohranu datoteka te objaviti aplikaciju na javnu URL adresu. Rezultati dolaze s poveznicom da otvoriš projekt u Mythexu i pratiš pregled uživo.

Kako povezati

1. U Mythexu otvori postavke računa i kopiraj MCP adresu.
2. U ChatGPT-u dodaj Mythex iz postavki aplikacija ili konektora koristeći tu adresu. Izbornici ChatGPT-a se povremeno mijenjaju, pa prati OpenAI-jevu stranicu pomoći za dodavanje aplikacije ako se nazivi razlikuju.
3. Otvorit će se Mythex stranica: prijavi se i odaberi Dopusti pristup. Nema ključa za upisati.
4. Započni razgovor i spomeni Mythex u zahtjevu.

Povezivanje radi na svakom Mythex paketu. Alati za sandbox (izrada, pregled, objava) traže Mythex Pro (25 dolara mjesečno), a vrijeme sandboxa i hosting dolaze iz tvojih Mythex kredita. Tvoja ChatGPT potrošnja ostaje na tvom OpenAI paketu.

Prvi upit za isprobavanje

Koristi Mythex i izradi mi aplikaciju za praćenje prijava za posao. Dodajem tvrtku, ulogu, poveznicu, datum prijave, status (prijavljen, intervju, ponuda, odbijen) i bilješke. Prikaži ploču po statusu gdje mogu povlačiti kartice i jednostavan grafikon prijava po tjednu. Spremi sve u bazu i zaštiti prijavom. Pokreni pregled i pošalji mi poveznicu.

Zatim, jedna promjena po poruci:

U Mythex projektu dodaj datum podsjetnika za svaku prijavu i istakni kartice čiji je podsjetnik danas ili prošao.

Objavi ju i pošalji mi živu URL adresu.

Dobro za: ljude koji već planiraju i razmišljaju u ChatGPT-u i žele rezultat uživo, s podacima koji se čuvaju, bez učenja hostinga. Budući da je to običan Mythex projekt, u bilo kojem trenutku možeš nastaviti u Mythex chatu.

Koja opcija odgovara onome što gradiš

Navike upita koje rade u ChatGPT-u

• Imenuj alat kada želiš da se koristi. „Koristi Mythex za…“ jasno pokazuje da zahtjev vrijedi za tvoj projekt, a ne za opći odgovor.
• Jedna promjena po poruci. Dugi popisi izmjena donose dugi popis nusefekata.
• Zatraži plan prije velikih koraka. „Prije nego išta promijeniš, navedi što ćeš mijenjati i pričekaj moj OK.“
• Zalijepi točne greške. Potpuni tekst greške vrijedi više od svakog opisa.
• Pitaj što se promijenilo. „Sažmi svoje tri posljednje promjene običnim riječima“ održava te u toku kada ne čitaš kod.

Više ih je u našem cheat sheetu s upitima za vibe coding.

Čuvaj sigurnost

• Nikada ne lijepi prave lozinke ili API ključeve u razgovor s ChatGPT-om. Ako aplikacija treba ključ, spremi ga u tajne projekta. Mythexovi alati prijavljuju samo nazive tajni, nikada vrijednosti.
• Prije objave provjeri da korisnici ne mogu vidjeti tuđe podatke i da ni jedan ključ nije završio u kodu koji se izvodi u pregledniku. Naš vodič je li vibe coding siguran? navodi provjere s upitima koje možeš zalijepiti.

Koristiš li i Claude? Pratni vodič pokriva vibe coding s Claudeom i Claude Codeom. Za pregled po modelima pogledaj ChatGPT vs Claude vs Gemini za izradu aplikacija.

Pitanja