Vibe coding s ChatGPT: Canvas, Codex a tvorba aplikácií z ChatGPT

Vibe coding s ChatGPT môžete robiť tromi spôsobmi. V chate si vypýtajte malú aplikáciu a zobrazte ju v canvase; úlohy nad skutočným kódovým základom zverte Codexu, kódovému agentovi od OpenAI; alebo pripojte tvorcu aplikácií pomocou AI, napríklad Mythex, aby ChatGPT dokázal vytvoriť, hostovať a publikovať úplnú aplikáciu s databázou. Prvá cesta je najrýchlejšia pre jednostránkový nástroj, druhá je určená pre vývojárov a tretia vám dá živú aplikáciu s prihlasovaním a dátami bez toho, aby ste museli opustiť ChatGPT.

Tu je, ako každá funguje, prompt pre každú a kde každá končí. Ak chcete pozadie k tomuto pojmu, prečítajte si čo je vibe coding.

Možnosť 1: Chat a canvas v ChatGPT

Na rýchly nástroj stačí len požiadať. ChatGPT napíše kód a v canvase dokáže zobraziť jednoduché stránky HTML a React, aby ste si ich mohli prekliknúť a žiadať zmeny.

Napíš jednostránkovú kalkulačku spropitného so vstupmi pre sumu účtu, percento spropitného (tlačidlá 10, 15, 20 a vlastné pole) a počet ľudí. Ukáž spropitné a sumu na osobu, ktoré sa aktualizujú počas písania. Nech vyzerá čisto na telefóne.

Vhodné na: kalkulačky, jednoduché hry, návrhy vstupných stránok a učenie. Opýtajte sa „vysvetli tento súbor, akoby som bol nováčik v programovaní“ a rýchlo sa naučíte.

Kde to končí: nie je tu žiadny backend. Nič, čo zadáte, sa neukladá pre ostatných používateľov, nie je tu prihlásenie a na zdieľanie by ste kód museli skopírovať niekam a hostovať ho sami. Vo chvíli, keď poviete „a ulož to, nech to vidí môj tím“, ste z chatu vyrástli.

Vibe coding kopírovaním a vkladaním

Mnoho ľudí začína tak, že si od ChatGPT vypýtajú kód a vložia ho do súborov na počítači alebo do hostingovej služby. Funguje to pre malé statické stránky, ale rýchlo sa to rozpadne. Každá zmena znamená nájsť správny súbor, vložiť správnu časť a dúfať, že na tom, čo ste nahradili, nič iné nezáviselo. Ak to robíte častejšie než pár krát, prejdite na jednu z ďalších dvoch možností.

Možnosť 2: Codex pre skutočný kódový základ

Codex je agent OpenAI pre softvérovú prácu. Zadáte mu úlohu obyčajným jazykom a pracuje nad repozitárom: číta kód, robí zmeny naprieč súbormi, spúšťa príkazy a testy a výsledok vám dá na kontrolu. OpenAI ho ponúka v ChatGPT, ako nástroj na príkazovom riadku a ako rozšírenie editora; aktuálne plány a limity zistíte na stránke OpenAI.

Najlepšie mu sedí prompt v štýle úlohy:

V tomto repozitári pridaj na stránku Objednávky tlačidlo na export do CSV. Má exportovať práve filtrované objednávky so stĺpcami dátum, zákazník, celkom a stav. Pridaj test pre exportnú funkciu a spusti testovaciu sadu.

Vhodné na: vývojárov a technických zakladateľov s existujúcim projektom, ktorí chcú, aby agent prebral celé úlohy z ich zoznamu. Pracuje s vaším technologickým stackom a konvenciami.

Čo stále riešite vy: kde aplikácia beží, databázu, tajomstvá, nasadenie a domény. Codex mení kód; nie je hosting.

Codex a Mythex spolu

Codex sa dokáže pripojiť aj k MCP serverom vrátane toho Mythex. Pridajte https://mcp.mythex.ai/mcp ako vlastný MCP server v Codexe, schváľte prístup v Mythex a Codex dokáže pracovať na projekte Mythex v jeho cloudovom sandboxe, pričom náhľad, databázu a publikovanie zabezpečí Mythex. Náš článok o tvorbe aplikácií Mythex z Claude, Cursor alebo Codexu to prejde krok za krokom.

Možnosť 3: Vytvorte úplnú aplikáciu z ChatGPT pomocou Mythex

Ak chcete zostať v konverzácii s ChatGPT a na konci mať skutočnú hostovanú aplikáciu, pripojte Mythex. Mythex funguje v ChatGPT ako aplikácia: ChatGPT komunikuje s nástrojmi Mythex cez MCP, otvorený protokol, ktorý asistentom umožňuje používať nástroje hostované inde (čo je MCP).

Akonáhle je pripojený, ChatGPT dokáže vytvoriť projekt Mythex, napísať kód v súkromnom cloudovom sandboxe, spustiť živý náhľad, pridať databázu a úložisko súborov a publikovať aplikáciu na verejnú URL. Výsledky sa vrátia s odkazom, aby ste mohli projekt otvoriť v Mythex a sledovať náhľad.

Ako pripojiť

1. V Mythex otvorte Nastavenia účtu a skopírujte MCP adresu.
2. V ChatGPT pridajte Mythex v nastaveniach aplikácií alebo konektorov pomocou tejto adresy. Ponuky ChatGPT sa občas menia, takže ak sa názvy líšia, postupujte podľa pomocnej stránky OpenAI o pridávaní aplikácie.
3. Otvorí sa stránka Mythex: prihláste sa a zvoľte Povoliť prístup. Nemusíte nič kopírovať ako kľúč.
4. Začnite konverzáciu a v požiadavke spomeňte Mythex.

Pripojenie funguje na ľubovoľnom pláne Mythex. Nástroje sandboxu — tvorba, náhľad, publikovanie — vyžadujú Mythex Pro ($25 mesačne) a čas sandboxu a hosting sa platia z vašich kreditov Mythex. Vaše použitie ChatGPT zostáva na vašom pláne OpenAI.

Prvý prompt na vyskúšanie

Použi Mythex a vytvor mi sledovač žiadostí o prácu. Pridávam žiadosti s firmou, pozíciou, odkazom, dátumom podania, stavom (podaná, pohovor, ponuka, zamietnutá) a poznámkami. Zobraz nástenku podľa stavu, kde môžem presúvať karty, a jednoduchý graf žiadostí za týždeň. Ulož všetko do databázy a chráň to prihlasovaním. Spusti náhľad a daj mi odkaz.

Potom po jednej zmene v správe:

V projekte Mythex pridaj ku každej žiadosti dátum pripomienky a zvýrazni karty, ktorých pripomienka je dnes alebo po termíne.

Publikuj to a pošli mi živú URL.

Vhodné na: ľudí, ktorí už plánujú a myslia v ChatGPT a chcú výsledok nažive, s dátami, ktoré pretrvajú, bez učenia sa hostingu. Keďže je to bežný projekt Mythex, môžete kedykoľvek pokračovať v chate Mythex.

Ktorá možnosť sa hodí na to, čo stavate

Návyky pri promptoch, ktoré fungujú v ChatGPT

• Pomenujte nástroj, keď ho chcete použiť. „Použi Mythex na…“ jasne ukáže, že žiadosť sa týka vášho projektu, nie všeobecnej odpovede.
• Jedna zmena v správe. Dlhé zoznamy úprav vytvoria dlhé zoznamy vedľajších efektov.
• Pred veľkými krokmi si vyžiadajte plán. „Predtým než čokoľvek zmeníš, vypíš, čo zmeníš, a počkaj na môj súhlas.“
• Vkladajte presné chyby. Úplný text chyby stojí viac než akýkoľvek opis.
• Pýtajte sa, čo sa zmenilo. „Zhrň svoje posledné tri zmeny obyčajnými slovami“ vás udrží v orientácii, keď kód nečítate.

Ďalšie nájdete v našom cheat sheete s promptmi pre vibe coding.

Ako to udržať v bezpečí

• Nikdy nevkladajte skutočné heslá ani API kľúče do konverzácie s ChatGPT. Ak vaša aplikácia kľúč potrebuje, uložte ho do tajomstiev projektu. Nástroje Mythex hlásia iba názvy tajomstiev, nikdy ich hodnoty.
• Pred publikovaním skontrolujte, že používatelia nevidia dáta ostatných a že sa žiadny kľúč nedostal do kódu bežiaceho v prehliadači. Náš návod je vibe coding bezpečný? uvádza kontroly s promptmi, ktoré môžete vložiť.

Používate aj Claude? Sprievodca k nemu pokrýva vibe coding s Claude a Claude Code. Pre pohľad model po modeli si pozrite ChatGPT vs Claude vs Gemini pri tvorbe aplikácií.

Otázky