Vibe coding s ChatGPT: canvas, Codex a stavba aplikací z ChatGPT

Vibe coding s ChatGPT můžete dělat třemi způsoby. Požádejte ho v chatu o malou aplikaci a náhled uvidíte na canvasu; zadejte úkoly nad skutečnou kódovou základnou Codexu, kódovému agentovi od OpenAI; nebo připojte AI nástroj pro tvorbu aplikací, jako je Mythex, aby ChatGPT mohl postavit, hostovat a publikovat plnou aplikaci s databází. První je nejrychlejší pro nástroj na jednu stránku, druhý se hodí vývojářům a třetí vám dá živou aplikaci s přihlášením a daty, aniž byste opustili ChatGPT.

Jak každý z nich funguje, prompt pro každý a kde každý končí. Pokud chcete pozadí k pojmu, přečtěte si co je vibe coding.

Možnost 1: Chat a canvas v ChatGPT

Pro rychlý nástroj prostě požádejte. ChatGPT napíše kód a na canvasu může ukázat jednoduché HTML a React stránky, takže si je můžete proklikat a žádat změny.

Napiš jednostránkovou kalkulačku spropitného s poli pro částku účtu, procento spropitného (tlačítka 10, 15, 20 a vlastní pole) a počet osob. Ukaž spropitné a částku na osobu, které se aktualizují, jak píšu. Ať to na telefonu vypadá čistě.

Hodí se pro: kalkulačky, jednoduché hry, koncepty přistávacích stránek a učení. Zeptejte se „vysvětli mi tento soubor, jako bych byl v programování nováček“ a naučíte se rychle.

Kde to končí: nemá backend. Nic, co zadáte, se neuloží pro ostatní uživatele, není tu přihlášení a pro sdílení byste kód museli zkopírovat jinam a hostovat ho sami. V okamžiku, kdy řeknete „a ulož to, ať to můj tým může vidět“, jste z chatu přerostli.

Vibe coding copy-paste

Mnoho lidí začíná tak, že si od ChatGPT vyžádá kód a vloží ho do souborů na svém počítači nebo do hostingové služby. Funguje to pro malé statické weby, ale rychle se to rozpadne. Každá změna znamená najít správný soubor, vložit správnou část a doufat, že na tom, co jste nahradili, nezávisel jiný kus kódu. Pokud se přistihnete, že to děláte víckrát než několikrát, přejděte na jednu z dalších dvou možností.

Možnost 2: Codex pro skutečnou kódovou základnu

Codex je agent OpenAI pro softwarovou práci. Zadáte mu úkol běžným jazykem a pracuje nad repozitářem: čte kód, dělá změny napříč soubory, spouští příkazy a testy a výsledek vám předá ke kontrole. OpenAI ho nabízí v ChatGPT, jako nástroj pro příkazovou řádku i jako rozšíření editoru; které tarify ho obsahují a jaké jsou aktuální limity, zjistíte na webu OpenAI.

Nejlépe mu sedí prompt ve formě úkolu:

V tomto repozitáři přidej na stránku Objednávky tlačítko pro export do CSV. Mělo by exportovat aktuálně filtrované objednávky se sloupci datum, zákazník, celkem a stav. Přidej test pro exportní funkci a spusť testovací sadu.

Hodí se pro: vývojáře a technické zakladatele se stávajícím projektem, kteří chtějí, aby agent převzal celé úkoly z jejich seznamu. Pracuje s vaším technologickým stackem a konvencemi.

Co stále řešíte vy: kde aplikace běží, databázi, tajné hodnoty, nasazení a domény. Codex mění kód; není to hosting.

Codex a Mythex společně

Codex se umí připojit také k MCP serverům, včetně Mythexu. Přidejte https://mcp.mythex.ai/mcp jako vlastní MCP server v Codexu, schvalte přístup v Mythexu a Codex může pracovat na projektu Mythex v jeho cloudovém sandboxu, zatímco náhled, databázi a publikování řeší Mythex. Náš článek o stavbě aplikací Mythex z Claude, Cursoru nebo Codexu to prochází krok za krokem.

Možnost 3: Postavte plnou aplikaci z ChatGPT pomocí Mythexu

Pokud chcete zůstat v konverzaci s ChatGPT a skončit se skutečnou hostovanou aplikací, připojte Mythex. Mythex funguje v ChatGPT jako aplikace: ChatGPT komunikuje s nástroji Mythexu přes MCP, otevřený protokol, který umožňuje asistentům používat nástroje hostované jinde (co je MCP).

Jakmile je připojený, může ChatGPT vytvořit projekt Mythex, napsat kód v soukromém cloudovém sandboxu, spustit živý náhled, přidat databázi a úložiště souborů a publikovat aplikaci na veřejnou adresu URL. Výsledky se vrátí s odkazem, abyste mohli projekt otevřít v Mythexu a sledovat náhled.

Jak připojit

1. V Mythexu otevřete Nastavení účtu a zkopírujte MCP adresu.
2. V ChatGPT přidejte Mythex z nastavení aplikací nebo konektorů pomocí této adresy. Nabídky ChatGPT se čas od času mění, takže pokud se názvy liší, řiďte se nápovědou OpenAI k přidání aplikace.
3. Otevře se stránka Mythexu: přihlaste se a zvolte Povolit přístup. Není tu žádný klíč k vložení.
4. Začněte konverzaci a v žádosti zmiňte Mythex.

Připojení funguje na každém tarifu Mythexu. Nástroje sandboxu — stavba, náhled, publikování — vyžadují Mythex Pro (25 USD měsíčně) a čas v sandboxu i hosting se platí z vašich kreditů Mythexu. Vaše používání ChatGPT zůstává ve vašem tarifu OpenAI.

První prompt k vyzkoušení

Použij Mythex a postav mi aplikaci na sledování žádostí o zaměstnání. Přidávám žádosti se společností, pozicí, odkazem, datem podání, stavem (podáno, pohovor, nabídka, zamítnuto) a poznámkami. Ukaž nástěnku podle stavu, kde můžu přesouvat karty, a jednoduchý graf počtu žádostí za týden. Ulož vše do databáze a chraň to přihlášením. Spusť náhled a dej mi odkaz.

Potom, jednu změnu v každé zprávě:

V projektu Mythex přidej ke každé žádosti datum připomenutí a zvýrazni karty, jejichž připomenutí je dnes nebo už prošlo.

Publikuj to a pošli mi živou URL.

Hodí se pro: lidi, kteří už plánují a přemýšlejí v ChatGPT a chtějí výsledek naživo, s daty, která přetrvají, bez učení se hostingu. Protože jde o běžný projekt Mythex, můžete kdykoli pokračovat v chatu Mythexu.

Který způsob se hodí k tomu, co stavíte

Návyky při psaní promptů, které v ChatGPT fungují

• Pojmenujte nástroj, když ho chcete použít. „Použij Mythex k…“ jasně říká, že žádost je pro váš projekt, a ne obecná odpověď.
• Jedna změna v každé zprávě. Dlouhé seznamy úprav vytvoří dlouhé seznamy vedlejších efektů.
• Před velkými kroky požádejte o plán. „Než cokoli změníš, vypiš, co změníš, a počkej na můj souhlas.“
• Vkládejte přesné chyby. Úplný text chyby stojí za víc než jakýkoli popis.
• Ptejte se, co se změnilo. „Shrň mi svoje poslední tři změny běžnými slovy“ vás udrží v orientaci, když kód nečtete.

Další najdete v našem přehledu promptů pro vibe coding.

Udržte to v bezpečí

• Nikdy do konverzace s ChatGPT nevkládejte skutečná hesla nebo API klíče. Pokud vaše aplikace klíč potřebuje, uložte ho do tajných hodnot projektu. Nástroje Mythexu hlásí jen názvy tajných hodnot, nikdy ne jejich obsah.
• Před publikováním zkontrolujte, že uživatelé nevidí data jeden druhého a že se žádný klíč nedostal do kódu běžícího v prohlížeči. Náš návod je vibe coding bezpečný? uvádí kontroly s prompty, které můžete vložit.

Používáte i Claude? Doprovodný průvodce pokrývá vibe coding s Claude a Claude Code. Pro pohled model po modelu viz ChatGPT vs Claude vs Gemini pro stavbu aplikací.

Otázky