Vibe coding uz ChatGPT: canvas, Codex i izrada aplikacija iz ChatGPT-ja

Vibe coding uz ChatGPT možete raditi na tri načina. Zamolite ga u chatu za malu aplikaciju i pregledajte je u canvasu; zadajte zadatke na pravoj kodnoj bazi Codexu, OpenAI-jevom agentu za kodiranje; ili povežite AI alat za izradu aplikacija poput Mythexa da ChatGPT može izgraditi, hostovati i objaviti punu aplikaciju sa bazom. Prvi je najbrži za alat na jednoj stranici, drugi je za programere, a treći vam daje živu aplikaciju sa prijavama i podacima bez napuštanja ChatGPT-ja.

Evo kako svaki radi, prompt za svaki i gdje staje. Ako želite pozadinu o pojmu, pročitajte šta je vibe coding.

Opcija 1: ChatGPT chat i canvas

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

Napiši jednostranični kalkulator napojnice sa poljima za iznos računa, procenat napojnice (dugmad za 10, 15, 20 i polje za svoj iznos) i broj osoba. Prikaži napojnicu i iznos po osobi, koji se ažurira dok kucam. Neka izgleda uredno na telefonu.

Dobro za: kalkulatore, jednostavne igre, nacrte landing stranica i učenje. Pitajte „objasni mi ovaj fajl kao da sam novi u programiranju” i brzo ćete naučiti.

Gdje staje: nema backenda. Ništa što unesete se ne čuva za druge korisnike, nema prijave, a da biste ga podijelili, morali biste kopirati kod negdje i sami ga hostovati. Čim kažete „i sačuvaj to da moj tim može da vidi”, prerasli ste chat.

Vibe coding kopiraj-nalijepi

Mnogi ljudi počinju tako što traže kod od ChatGPT-ja i lijepe ga u fajlove na računaru ili u servis za hosting. Radi za male statične sajtove, ali brzo postaje teško. Svaka promjena znači traženje pravog fajla, lijepljenje pravog dijela i nadu da ništa drugo nije zavisilo od onoga što ste zamijenili. Ako to radite više od nekoliko puta, prebacite se na jednu od sljedeće dvije opcije.

Opcija 2: Codex za pravu kodnu bazu

Codex je OpenAI-jev agent za softverski rad. Zadajete mu zadatak običnim jezikom, a on radi nad repozitorijumom: čita kod, pravi promjene kroz više fajlova, pokreće komande i testove i daje vam rezultat za pregled. OpenAI ga nudi u ChatGPT-ju, kao alat u komandnoj liniji i kao ekstenziju za editor; provjerite na OpenAI sajtu koji planovi ga uključuju i aktuelne limite.

Za njega najbolje radi zadatak u obliku naredbe:

U ovom repou dodaj dugme za izvoz CSV-a na stranici Narudžbine. Neka izvozi trenutno filtrirane narudžbine sa kolonama datum, kupac, ukupno i status. Dodaj test za funkciju izvoza i pokreni test paket.

Dobro za: programere i tehničke osnivače sa postojećim projektom koji žele da agent preuzme cijele zadatke sa liste. Radi sa vašim stekom i konvencijama.

Šta i dalje sami radite: gdje se aplikacija pokreće, bazu podataka, tajne, deploy i domene. Codex mijenja kod; nije hosting.

Codex i Mythex zajedno

Codex se takođe može povezati na MCP servere, uključujući Mythexov. Dodajte https://mcp.mythex.ai/mcp kao prilagođeni MCP server u Codexu, odobrite pristup na Mythexu i Codex može raditi na Mythex projektu u cloud sandboxu, dok pregled, bazu i objavljivanje rješava Mythex. Naš post o pravljenju Mythex aplikacija iz Claude-a, Cursora ili Codexa prolazi kroz to korak po korak.

Opcija 3: izgradite punu aplikaciju iz ChatGPT-ja uz Mythex

Ako želite ostati u razgovoru sa ChatGPT-jem, a na kraju imati pravu, hostovanu aplikaciju, povežite Mythex. Mythex radi unutar ChatGPT-ja kao aplikacija: ChatGPT koristi Mythexove alate preko MCP-a, otvorenog protokola koji asistentima omogućava korištenje alata hostovanih negdje drugo (šta je MCP).

Kad je povezan, ChatGPT može napraviti Mythex projekat, napisati kod u privatnom cloud sandboxu, pokrenuti živi pregled, dodati bazu podataka i skladište fajlova i objaviti aplikaciju na javni URL. Rezultati dolaze sa linkom da možete otvoriti projekat u Mythexu i pratiti pregled uživo.

Kako se povezati

1. U Mythexu otvorite Podešavanja naloga i kopirajte MCP adresu.
2. U ChatGPT-ju dodajte Mythex iz podešavanja aplikacija ili konektora koristeći tu adresu. ChatGPT-jevi meniji se s vremena na vrijeme mijenjaju, pa pratite OpenAI-jevu pomoć o dodavanju aplikacije ako se nazivi razlikuju.
3. Otvara se Mythex stranica: prijavite se i izaberite Dozvoli pristup. Nema ključa koji treba kopirati.
4. Počnite razgovor i spomenite Mythex u zahtjevu.

Povezivanje radi na bilo kojem Mythex planu. Alati za sandbox, tj. izrada, pregled i objavljivanje, traže Mythex Pro ($25 mjesečno), a vrijeme sandboxa i hosting dolaze iz vaših Mythex kredita. Vaša upotreba ChatGPT-ja ostaje na vašem OpenAI planu.

Prvi prompt za isprobavanje

Koristi Mythex da napraviš tracker prijava za posao. Dodajem firmu, poziciju, link, datum prijave, status (prijavljen, intervju, ponuda, odbijen) i bilješke. Prikaži tablu po statusu gdje mogu prevlačiti kartice, i jednostavan grafikon prijava po sedmici. Sačuvaj sve u bazu i zaštiti prijavom. Pokreni pregled i daj mi link.

Zatim, jednu promjenu po poruci:

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

Objavi ga i pošalji mi živi URL.

Dobro za: ljude koji već planiraju i razmišljaju u ChatGPT-ju i žele rezultat uživo, sa podacima koji se čuvaju, bez učenja hostinga. Pošto je to običan Mythex projekat, u bilo kom trenutku možete nastaviti u Mythex chatu.

Koja opcija odgovara onome što pravite

Navike u promptovima koje rade u ChatGPT-ju

• Imenujte alat kad želite da se koristi. „Koristi Mythex da…” jasno kaže da se zahtjev odnosi na vaš projekat, a ne na opšti odgovor.
• Jedna promjena po poruci. Duge liste izmjena donose duge liste nuspojava.
• Zatražite plan prije velikih koraka. „Prije nego što mijenjaš bilo šta, navedi šta ćeš promijeniti i čekaj moje odobrenje.”
• Nalijepite tačne greške. Cijeli tekst greške vrijedi više od bilo kakvog opisa.
• Pitajte šta se promijenilo. „Sažmi tri posljednje promjene običnim riječima” vas drži u toku kad ne čitate kod.

Više ih ima u našem spisku promptova za vibe coding.

Držite to sigurnim

• Nikad ne lijepite prave lozinke ili API ključeve u razgovor sa ChatGPT-jem. Ako vaša aplikacija treba ključ, sačuvajte ga u tajnama projekta. Mythexovi alati prijavljuju samo nazive tajni, nikad vrijednosti.
• Prije objavljivanja provjerite da korisnici ne mogu vidjeti tuđe podatke i da nijedan ključ nije završio u kodu koji se izvršava u pregledaču. Naš vodič da li je vibe coding siguran? nabraja provjere uz prompte koje možete nalijepiti.

Koristite i Claude? Prateći vodič pokriva vibe coding uz Claude i Claude Code. Za pregled po modelima pogledajte ChatGPT naspram Claude-a naspram Gemini-ja za izradu aplikacija.

Pitanja