Vibe coding med ChatGPT: canvas, Codex og bygging av apper fra ChatGPT

Du kan gjøre vibe coding med ChatGPT på tre måter. Be om en liten app i chatten og forhåndsvis den i canvas; gi oppgaver på en ekte kodebase til Codex, OpenAIs kodeagent; eller koble til en KI-appbygger som Mythex, slik at ChatGPT kan bygge, hoste og publisere en komplett app med database. Den første er raskest for et verktøy på én side, den andre passer utviklere, og den tredje gir deg en levende app med innlogging og data uten å forlate ChatGPT.

Her er hvordan hver fungerer, en prompt for hver, og hvor hver stopper. Hvis du vil ha bakgrunnen om begrepet, les hva vibe coding er.

Alternativ 1: ChatGPT-chat og canvas

For et raskt verktøy, bare spør. ChatGPT skriver koden, og i canvas kan den vise enkle HTML- og React-sider slik at du kan klikke rundt og be om endringer.

Skriv et enkelt drikkepengekalkulator-verktøy på én side med felt for regningsbeløp, drikkepengeprosent (knapper for 10, 15, 20 og et eget felt) og antall personer. Vis drikkepengene og beløpet per person, og oppdater mens jeg skriver. Det skal se rent ut på telefon.

Passer til: kalkulatorer, enkle spill, utkast til landingssider og læring. Spør «forklar denne filen som om jeg er ny i koding», så lærer du raskt.

Hvor det stopper: det finnes ingen backend. Det du skriver inn lagres ikke for andre brukere, det finnes ingen innlogging, og for å dele det må du kopiere koden et sted og hoste den selv. Så snart du sier «og lagre det slik at teamet mitt kan se det», har du vokst ut av chatten.

Kopier-og-lim-inn vibe coding

Mange begynner med å be ChatGPT om kode og lime den inn i filer på datamaskinen sin eller i en hostingtjeneste. Det fungerer for små statiske sider, men det brytes raskt sammen. Hver endring betyr å finne riktig fil, lime inn riktig del, og håpe at ingenting annet var avhengig av det du erstattet. Hvis du merker at du gjør dette mer enn noen få ganger, gå over til et av de to neste alternativene.

Alternativ 2: Codex for en ekte kodebase

Codex er OpenAIs agent for programvarearbeid. Du gir den en oppgave med vanlige ord, og den jobber i et repositorium: den leser koden, gjør endringer på tvers av filer, kjører kommandoer og tester, og gir deg resultatet å gjennomgå. OpenAI tilbyr den i ChatGPT, som et kommandolinjeverktøy og som en editorutvidelse; sjekk OpenAIs nettsted for hvilke planer som inkluderer den og de gjeldende grensene.

En oppgavebasert prompt passer best:

I dette repoet, legg til en CSV-eksportknapp på ordresiden. Den skal eksportere de filtrerte ordrene med kolonnene dato, kunde, totalsum og status. Legg til en test for eksportfunksjonen og kjør testsuiten.

Passer til: utviklere og tekniske gründere med et eksisterende prosjekt som vil at en agent skal ta hele oppgaver av listen deres. Den jobber med stacken din og konvensjonene dine.

Hva du fortsatt må håndtere: hvor appen kjører, databasen, hemmelighetene, deploy og domener. Codex endrer kode; den er ikke en hostingtjeneste.

Codex og Mythex sammen

Codex kan også koble til MCP-servere, inkludert Mythex sin. Legg til https://mcp.mythex.ai/mcp som en egendefinert MCP-server i Codex, godkjenn tilgang på Mythex, så kan Codex jobbe med et Mythex-prosjekt i sin sky-sandkasse, mens forhåndsvisning, database og publisering håndteres av Mythex. Vårt innlegg om å bygge Mythex-apper fra Claude, Cursor eller Codex går gjennom det.

Alternativ 3: Bygg en komplett app fra ChatGPT med Mythex

Hvis du vil bli i en ChatGPT-samtale og ende opp med en ekte, hostet app, koble til Mythex. Mythex fungerer inne i ChatGPT som en app: ChatGPT snakker med Mythex sine verktøy over MCP, den åpne protokollen som lar assistenter bruke verktøy som hostes andre steder (hva MCP er).

Når den er tilkoblet, kan ChatGPT opprette et Mythex-prosjekt, skrive koden i en privat sky-sandkasse, starte en levende forhåndsvisning, legge til en database og fillagring, og publisere appen til en offentlig URL. Resultatene kommer tilbake med en lenke, slik at du kan åpne prosjektet i Mythex og følge forhåndsvisningen.

Slik kobler du til

1. I Mythex, åpne Kontoinnstillinger og kopier MCP-adressen.
2. I ChatGPT, legg til Mythex fra innstillingene for apper eller connectors med den adressen. ChatGPTs menyer endrer seg av og til, så følg OpenAIs hjelpeside for å legge til en app hvis navnene er annerledes.
3. En Mythex-side åpnes: logg inn og velg Tillat tilgang. Det finnes ingen nøkkel å lime inn.
4. Start en samtale og nevn Mythex i forespørselen din.

Tilkobling fungerer på alle Mythex-planer. Sandkasseverktøyene, altså bygging, forhåndsvisning og publisering, krever Mythex Pro ($25 i måneden), og sandkasse-tid og hosting kommer fra dine Mythex-kreditter. ChatGPT-bruken din forblir på din OpenAI-plan.

En første prompt å prøve

Bruk Mythex til å bygge en søknadstracker for jobber til meg. Jeg legger til søknader med firma, stilling, lenke, dato for søknad, status (søkt, intervju, tilbud, avslått) og notater. Vis en tavle sortert etter status der jeg kan dra kort, og et enkelt diagram over søknader per uke. Lagre alt i en database og beskytt det med innlogging. Start forhåndsvisningen og gi meg lenken.

Deretter, én endring per melding:

I Mythex-prosjektet, legg til en påminnelsesdato på hver søknad og fremhev kort der påminnelsen er i dag eller forfalt.

Publiser den og send meg den offentlige URL-en.

Passer til: folk som allerede planlegger og tenker i ChatGPT og vil ha resultatet live, med data som vedvarer, uten å lære hosting. Siden det er et vanlig Mythex-prosjekt, kan du når som helst fortsette i Mythex-chatten.

Hvilket alternativ passer det du bygger

Promptvaner som fungerer i ChatGPT

• Nevn verktøyet når du vil at det skal brukes. «Bruk Mythex til å…» gjør det tydelig at forespørselen gjelder prosjektet ditt, ikke et generelt svar.
• Én endring per melding. Lange lister med redigeringer gir lange lister med bieffekter.
• Be om en plan før store steg. «Før du endrer noe, list hva du vil endre og vent på min OK.»
• Lim inn eksakte feil. Hele feilteksten er verdt mer enn enhver beskrivelse.
• Spør hva som endret seg. «Oppsummer de tre siste endringene dine med vanlige ord» holder deg oppdatert når du ikke leser koden.

Flere finner du i vårt jukseark med vibe coding-prompter.

Hold det trygt

• Lim aldri inn ekte passord eller API-nøkler i en ChatGPT-samtale. Hvis appen din trenger en nøkkel, lagre den i prosjektets hemmeligheter. Mythex sine verktøy rapporterer bare navn på hemmeligheter, aldri verdier.
• Før du publiserer, sjekk at brukere ikke kan se hverandres data, og at ingen nøkkel havnet i kode som kjører i nettleseren. Vår guide er vibe coding trygt? lister sjekkene med prompter du kan lime inn.

Bruker du Claude også? Den tilhørende guiden dekker vibe coding med Claude og Claude Code. For en modell-for-modell-oversikt, se ChatGPT vs Claude vs Gemini for bygging av apper.

Spørsmål