Vibe coding med ChatGPT: canvas, Codex och att bygga appar från ChatGPT

Du kan vibe coda med ChatGPT på tre sätt. Be om en liten app i chatten och förhandsgranska den i canvas; ge uppgifter på en riktig kodbas till Codex, OpenAIs kodagent; eller koppla en AI-appbyggare som Mythex så att ChatGPT kan bygga, hosta och publicera en komplett app med databas. Det första är snabbast för ett verktyg på en sida, det andra passar utvecklare, och det tredje ger dig en levande app med inloggningar och data utan att lämna ChatGPT.

Så här fungerar varje alternativ, en prompt för var och en och var de tar slut. Om du vill ha bakgrunden till begreppet, läs vad vibe coding är.

Alternativ 1: ChatGPT-chatten och canvas

För ett snabbt verktyg, fråga bara. ChatGPT skriver koden, och i canvas kan den visa enkla HTML- och React-sidor så att du kan klicka runt och be om ändringar.

Skriv en räknare för dricks på en sida med fält för notabelopp, dricksprocent (knappar för 10, 15, 20 och ett eget fält) och antal personer. Visa dricket och beloppet per person, uppdaterat medan jag skriver. Gör det snyggt på en telefon.

Bra för: räknare, enkla spel, utkast till landningssidor och lärande. Fråga "förklara den här filen som om jag är ny på kodning" så lär du dig snabbt.

Där det tar slut: det finns ingen backend. Det du matar in sparas inte för andra användare, det finns ingen inloggning, och för att dela det måste du kopiera koden någonstans och hosta den själv. I det ögonblick du säger "och spara det så att mitt team kan se det" har du vuxit ur chatten.

Kopiera-klistra-vibe coding

Många börjar med att be ChatGPT om kod och klistra in den i filer på datorn eller i en hostingtjänst. Det fungerar för små statiska sidor, men det bryts snabbt. Varje ändring innebär att hitta rätt fil, klistra in rätt del och hoppas att inget annat berodde på det du ersatte. Om du märker att du gör det oftare än några gånger, gå över till ett av de två följande alternativen.

Alternativ 2: Codex för en riktig kodbas

Codex är OpenAIs agent för mjukvaruarbete. Du ger den en uppgift med vanliga ord, och den arbetar i ett repo: läser koden, gör ändringar över flera filer, kör kommandon och tester och ger dig resultatet att granska. OpenAI erbjuder den i ChatGPT, som ett kommandoradsverktyg och som ett editortillägg; kontrollera OpenAIs webbplats för vilka planer som ingår och de aktuella gränserna.

En uppgiftsliknande prompt passar bäst:

I det här repot, lägg till en knapp för CSV-export på Ordersidan. Den ska exportera de för närvarande filtrerade ordrarna med kolumnerna datum, kund, summa och status. Lägg till ett test för exportfunktionen och kör testsviten.

Bra för: utvecklare och tekniska grundare med ett befintligt projekt som vill att en agent tar hela uppgifter från deras lista. Den fungerar med din stack och dina konventioner.

Vad du fortfarande sköter själv: var appen körs, databasen, hemligheter, driftsättning och domäner. Codex ändrar kod; den är ingen hostingtjänst.

Codex och Mythex tillsammans

Codex kan också ansluta till MCP-servrar, inklusive Mythex. Lägg till https://mcp.mythex.ai/mcp som en egen MCP-server i Codex, godkänn åtkomst på Mythex, så kan Codex arbeta på ett Mythex-projekt i dess molnsandlåda, med förhandsvisning, databas och publicering hanterade av Mythex. Vårt inlägg om att bygga Mythex-appar från Claude, Cursor eller Codex går igenom det steg för steg.

Alternativ 3: Bygg en komplett app från ChatGPT med Mythex

Om du vill stanna i en ChatGPT-konversation och ändå få en riktig, hostad app, anslut Mythex. Mythex fungerar i ChatGPT som en app: ChatGPT talar med Mythex verktyg över MCP, det öppna protokollet som gör det möjligt för assistenter att använda verktyg som hostas någon annanstans (vad MCP är).

När det är anslutet kan ChatGPT skapa ett Mythex-projekt, skriva koden i en privat molnsandlåda, starta en live-förhandsvisning, lägga till en databas och fillagring, och publicera appen till en publik URL. Resultaten kommer tillbaka med en länk så att du kan öppna projektet i Mythex och följa förhandsvisningen.

Så ansluter du

1. I Mythex, öppna Kontoinställningar och kopiera MCP-adressen.
2. I ChatGPT, lägg till Mythex från inställningarna för appar eller connectors med den adressen. ChatGPTs menyer ändras då och då, så följ OpenAIs hjälpsida för att lägga till en app om namnen skiljer sig.
3. En Mythex-sida öppnas: logga in och välj Tillåt åtkomst. Det finns ingen nyckel att klistra in.
4. Starta en konversation och nämn Mythex i din begäran.

Att ansluta fungerar på alla Mythex-planer. Sandlådeverktygen, det vill säga bygge, förhandsvisning och publicering, kräver Mythex Pro ($25 i månaden), och sandlådetid och hosting kommer från dina Mythex-krediter. Din ChatGPT-användning ligger kvar på din OpenAI-plan.

En första prompt att prova

Använd Mythex för att bygga en jobbansökningstracker åt mig. Jag lägger till ansökningar med företag, roll, länk, ansökningsdatum, status (sökt, intervju, erbjudande, avslag) och anteckningar. Visa en tavla per status där jag kan dra kort, och ett enkelt diagram över ansökningar per vecka. Spara allt i en databas och skydda det med en inloggning. Starta förhandsvisningen och ge mig länken.

Ändra sedan en sak i taget i meddelandena:

Lägg till ett påminnelsedatum på varje ansökan i Mythex-projektet, och markera kort vars påminnelse är idag eller försenad.

Publicera den och skicka mig den levande URL:en.

Bra för: personer som redan planerar och tänker i ChatGPT och vill ha resultatet live, med data som består, utan att lära sig hosting. Eftersom det är ett vanligt Mythex-projekt kan du fortsätta i Mythex-chatten när som helst.

Vilket alternativ passar det du bygger

Promptvanor som fungerar i ChatGPT

• Nämn verktyget när du vill att det ska användas. "Använd Mythex för att…" gör det tydligt att begäran gäller ditt projekt, inte ett allmänt svar.
• En ändring per meddelande. Långa listor med redigeringar ger långa listor med bieffekter.
• Be om en plan före stora steg. "Innan du ändrar något, lista vad du kommer att ändra och vänta på mitt OK."
• Klistra in exakta fel. Den fullständiga feltexten är värd mer än någon beskrivning.
• Fråga vad som ändrades. "Sammanfatta dina tre senaste ändringar med vanliga ord" håller dig orienterad när du inte läser koden.

Fler finns i vår prompt-lista för vibe coding.

Håll det säkert

• Klistra aldrig in riktiga lösenord eller API-nycklar i en ChatGPT-konversation. Om din app behöver en nyckel, lagra den i projektets hemligheter. Mythex verktyg rapporterar bara hemlighetsnamn, aldrig värden.
• Innan du publicerar, kontrollera att användare inte kan se varandras data, och att ingen nyckel hamnat i kod som körs i webbläsaren. Vår guide är vibe coding säkert? listar kontrollerna med prompter du kan klistra in.

Använder du Claude också? Följeslagarguiden täcker vibe coding med Claude och Claude Code. För en modell-för-modell-översikt, se ChatGPT vs Claude vs Gemini för att bygga appar.

Frågor