Vibe coding med ChatGPT: Canvas, Codex og bygning af apps fra ChatGPT

Du kan lave vibe coding med ChatGPT på tre måder. Bed den i chatten om en lille app og vis den i canvas; giv opgaver på en rigtig kodebase til Codex, OpenAIs kodeagent; eller forbind en AI-appbygger som Mythex, så ChatGPT kan bygge, hoste og publicere en fuld app med database. Den første er hurtigst til et værktøj på én side, den anden passer til udviklere, og den tredje giver dig en live app med logins og data uden at forlade ChatGPT.

Her er, hvordan hver enkelt virker, en prompt til hver, og hvor hver enkelt stopper. Hvis du vil have baggrunden for begrebet, så læs hvad vibe coding er.

Mulighed 1: ChatGPT-chat og canvas

Til et hurtigt værktøj skal du bare spørge. ChatGPT skriver koden, og i canvas kan den vise simple HTML- og React-sider, så du kan klikke rundt og bede om ændringer.

Skriv en drikkepengeberegner på én side med felter for regningens beløb, drikkepengeprocent (knapper for 10, 15, 20 og et felt til selv at indtaste) og antal personer. Vis drikkepengene og beløbet pr. person, og opdatér mens jeg skriver. Gør det pænt på en telefon.

Godt til: beregnere, simple spil, udkast til landingssider og læring. Spørg "forklar denne fil, som om jeg er ny til kodning", så lærer du hurtigt.

Hvor det stopper: der er ingen backend. Intet du indtaster gemmes for andre brugere, der er ikke noget login, og for at dele det skal du kopiere koden et sted hen og hoste den selv. Så snart du siger "og gem det, så mit team kan se det", er du vokset ud af chatten.

Kopiér-og-indsæt vibe coding

Mange starter med at bede ChatGPT om kode og indsætte den i filer på computeren eller en hostingtjeneste. Det virker til små statiske sider, men det bryder hurtigt sammen. Hver ændring betyder at finde den rigtige fil, indsætte den rigtige del og håbe, at intet andet afhang af det, du erstattede. Hvis du opdager, at du gør det mere end et par gange, så gå over til en af de to næste muligheder.

Mulighed 2: Codex til en rigtig kodebase

Codex er OpenAIs agent til softwarearbejde. Du giver den en opgave med almindelige ord, og den arbejder på et repository: den læser koden, laver ændringer på tværs af filer, kører kommandoer og tests og giver dig resultatet at gennemgå. OpenAI tilbyder den i ChatGPT, som kommandolinjeværktøj og som editor-udvidelse; tjek OpenAIs side for, hvilke planer der inkluderer den, og de aktuelle grænser.

En opgave-agtig prompt passer bedst til den:

I denne repo, tilføj en knap til CSV-eksport på ordresiden. Den skal eksportere de ordrer, der er filtreret lige nu, med kolonnerne dato, kunde, total og status. Tilføj en test for eksportfunktionen, og kør testsuiten.

Godt til: udviklere og tekniske grundlæggere med et eksisterende projekt, der vil have en agent til at tage hele opgaver af deres liste. Den arbejder med din stak og dine konventioner.

Det du stadig selv håndterer: hvor appen kører, databasen, hemmeligheder, deployment og domæner. Codex ændrer kode; den er ikke en host.

Codex og Mythex sammen

Codex kan også forbinde til MCP-servere, herunder Mythex'. Tilføj https://mcp.mythex.ai/mcp som en brugerdefineret MCP-server i Codex, godkend adgang på Mythex, og Codex kan arbejde på et Mythex-projekt i dets cloud-sandbox, mens preview, database og publicering håndteres af Mythex. Vores indlæg om at bygge Mythex-apps fra Claude, Cursor eller Codex gennemgår det.

Mulighed 3: Byg en fuld app fra ChatGPT med Mythex

Hvis du vil blive i en ChatGPT-samtale og ende med en rigtig, hostet app, så forbind Mythex. Mythex virker inde i ChatGPT som en app: ChatGPT taler med Mythex' værktøjer via MCP, den åbne protokol, der lader assistenter bruge værktøjer, der hostes andetsteds (hvad MCP er).

Når den er forbundet, kan ChatGPT oprette et Mythex-projekt, skrive koden i en privat cloud-sandbox, starte et live preview, tilføje en database og filopbevaring og publicere appen til en offentlig URL. Resultaterne kommer tilbage med et link, så du kan åbne projektet i Mythex og følge med i preview'et.

Sådan forbinder du

1. I Mythex, åbn Kontoindstillinger og kopiér MCP-adressen.
2. I ChatGPT, tilføj Mythex fra indstillingerne for apps eller connectors med den adresse. ChatGPTs menuer ændrer sig nu og da, så følg OpenAIs hjælpeside om at tilføje en app, hvis navnene er anderledes.
3. En Mythex-side åbnes: log ind og vælg Tillad adgang. Der er ingen nøgle at indsætte.
4. Start en samtale, og nævn Mythex i din anmodning.

Tilslutning virker på alle Mythex-planer. Sandbox-værktøjerne — bygning, preview, publicering — kræver Mythex Pro ($25 om måneden), og sandbox-tid og hosting kommer fra dine Mythex-kreditter. Dit ChatGPT-forbrug bliver på din OpenAI-plan.

En første prompt at prøve

Brug Mythex til at bygge en jobansøgningstracker til mig. Jeg tilføjer ansøgninger med firma, stilling, link, ansøgningsdato, status (ansøgt, samtale, tilbud, afvist) og noter. Vis en tavle grupperet efter status, hvor jeg kan trække kort, og et simpelt diagram over ansøgninger pr. uge. Gem alt i en database, og beskyt det med et login. Start preview'et, og giv mig linket.

Derefter, én ændring pr. besked:

I Mythex-projektet, tilføj en påmindelsesdato til hver ansøgning, og fremhæv kort, hvis påmindelse er i dag eller forfalden.

Publicér den, og send mig den live URL.

Godt til: folk, der allerede planlægger og tænker i ChatGPT, og som vil have resultatet live, med data der bliver gemt, uden at skulle lære hosting. Fordi det er et almindeligt Mythex-projekt, kan du når som helst fortsætte i Mythex-chatten.

Hvilken mulighed passer til det, du bygger

Promptvaner, der virker i ChatGPT

• Nævn værktøjet, når du vil have det brugt. "Brug Mythex til at…" gør klart, at anmodningen gælder dit projekt, ikke et generelt svar.
• Én ændring pr. besked. Lange lister af redigeringer giver lange lister af bivirkninger.
• Bed om en plan før store skridt. "Før du ændrer noget, så list hvad du vil ændre, og vent på mit OK."
• Indsæt præcise fejl. Den fulde fejltekst er mere værd end nogen beskrivelse.
• Spørg hvad der ændrede sig. "Opsummer dine sidste tre ændringer med almindelige ord" holder dig orienteret, når du ikke læser koden.

Flere findes i vores cheat sheet med vibe coding-prompts.

Hold det sikkert

• Indsæt aldrig rigtige adgangskoder eller API-nøgler i en ChatGPT-samtale. Hvis din app har brug for en nøgle, så gem den i projektets hemmeligheder. Mythex' værktøjer rapporterer kun hemmelighedernes navne, aldrig værdierne.
• Før du publicerer, så tjek at brugere ikke kan se hinandens data, og at ingen nøgle er havnet i kode, der kører i browseren. Vores guide er vibe coding sikkert? lister tjekkene med prompts, du kan indsætte.

Bruger du også Claude? Følgeguiden dækker vibe coding med Claude og Claude Code. For et overblik model for model, se ChatGPT vs. Claude vs. Gemini til at bygge apps.

Spørgsmål