Vibe coding met ChatGPT: canvas, Codex en apps bouwen vanuit ChatGPT

Je kunt op drie manieren vibe coden met ChatGPT. Vraag in de chat om een kleine app en bekijk hem in canvas; geef taken op een echte codebase aan Codex, de codeeragent van OpenAI; of koppel een AI-appbouwer zoals Mythex, zodat ChatGPT een complete app met database kan bouwen, hosten en publiceren. De eerste is het snelst voor een tool van één pagina, de tweede past bij ontwikkelaars en met de derde krijg je een live app met logins en data zonder ChatGPT te verlaten.

Hier lees je hoe elke manier werkt, een prompt per manier en waar elke ophoudt. Wil je de achtergrond van de term, lees dan wat vibe coding is.

Optie 1: ChatGPT-chat en canvas

Voor een snelle tool vraag je het gewoon. ChatGPT schrijft de code en in canvas kan het eenvoudige HTML- en React-pagina's tonen, zodat je rond kunt klikken en om wijzigingen kunt vragen.

Schrijf een fooienrekenaar van één pagina met invoer voor het rekeningbedrag, het fooipercentage (knoppen voor 10, 15, 20 en een eigen veld) en het aantal personen. Toon de fooi en het bedrag per persoon, bijgewerkt terwijl ik typ. Laat het er schoon uitzien op een telefoon.

Goed voor: rekenmachines, eenvoudige spellen, concepten voor landingspagina's en leren. Vraag "leg dit bestand uit alsof ik nieuw ben met coderen" en je leert snel.

Waar het ophoudt: er is geen backend. Niets wat je invoert wordt voor andere gebruikers opgeslagen, er is geen login en om het te delen kopieer je de code ergens heen en host je hem zelf. Zodra je zegt "en sla het op zodat mijn team het kan zien", ben je uit de chat gegroeid.

Kopiëren-en-plakken vibe coding

Veel mensen beginnen met ChatGPT om code te vragen en die in bestanden op hun computer of bij een hostingdienst te plakken. Het werkt voor kleine statische sites, maar loopt snel vast. Elke wijziging betekent het juiste bestand zoeken, het juiste deel plakken en hopen dat niets anders afhing van wat je verving. Merk je dat je dit vaker dan een paar keer doet, stap dan over op een van de volgende twee opties.

Optie 2: Codex voor een echte codebase

Codex is de agent van OpenAI voor softwarewerk. Je geeft het een taak in gewone taal en het werkt aan een repository: het leest de code, maakt wijzigingen over bestanden heen, voert opdrachten en tests uit en geeft je het resultaat ter beoordeling. OpenAI biedt het aan in ChatGPT, als opdrachtregeltool en als editor-extensie; kijk op de site van OpenAI welke abonnementen het bevatten en wat de huidige limieten zijn.

Een prompt in taakstijl past er het best bij:

Voeg in deze repo een CSV-exportknop toe aan de pagina Bestellingen. Die moet de huidige gefilterde bestellingen exporteren met de kolommen datum, klant, totaal en status. Voeg een test toe voor de exportfunctie en draai de testsuite.

Goed voor: ontwikkelaars en technische oprichters met een bestaand project die willen dat een agent hele taken van hun lijst overneemt. Het werkt met jouw stack en jouw conventies.

Wat je nog zelf regelt: waar de app draait, de database, geheimen, deployment en domeinen. Codex wijzigt code; het is geen host.

Codex en Mythex samen

Codex kan ook verbinden met MCP-servers, waaronder die van Mythex. Voeg https://mcp.mythex.ai/mcp toe als eigen MCP-server in Codex, keur de toegang goed bij Mythex en Codex kan werken aan een Mythex-project in zijn cloud-sandbox, terwijl Mythex het voorbeeld, de database en het publiceren afhandelt. Ons bericht over Mythex-apps bouwen vanuit Claude, Cursor of Codex loopt het door.

Optie 3: een complete app bouwen vanuit ChatGPT met Mythex

Wil je in een ChatGPT-gesprek blijven en toch eindigen met een echte, gehoste app, koppel dan Mythex. Mythex werkt in ChatGPT als app: ChatGPT praat met de tools van Mythex via MCP, het open protocol waarmee assistenten tools kunnen gebruiken die elders worden gehost (wat MCP is).

Zodra het gekoppeld is, kan ChatGPT een Mythex-project maken, de code schrijven in een privé-cloud-sandbox, een live voorbeeld starten, een database en bestandsopslag toevoegen en de app op een openbare URL publiceren. Resultaten komen terug met een link, zodat je het project in Mythex kunt openen en het voorbeeld kunt bekijken.

Zo koppel je het

1. Open in Mythex de Accountinstellingen en kopieer het MCP-adres.
2. Voeg in ChatGPT Mythex toe via de instellingen voor apps of connectors met dat adres. De menu's van ChatGPT veranderen af en toe, dus volg de helppagina van OpenAI over het toevoegen van een app als de namen afwijken.
3. Er opent een Mythex-pagina: log in en kies Toegang toestaan. Je hoeft geen sleutel te plakken.
4. Begin een gesprek en noem Mythex in je verzoek.

Koppelen werkt op elk Mythex-abonnement. De sandbox-tools — bouwen, voorbeeld bekijken, publiceren — vragen Mythex Pro ($25 per maand), en sandbox-tijd en hosting komen uit je Mythex-credits. Je ChatGPT-gebruik blijft binnen je OpenAI-abonnement.

Een eerste prompt om te proberen

Gebruik Mythex om een tracker voor sollicitaties voor me te bouwen. Ik voeg sollicitaties toe met bedrijf, functie, link, datum van solliciteren, status (gesolliciteerd, gesprek, aanbod, afgewezen) en notities. Toon een bord per status waarop ik kaarten kan slepen en een eenvoudige grafiek van sollicitaties per week. Sla alles op in een database en beveilig het met een login. Start het voorbeeld en geef me de link.

Daarna één wijziging per bericht:

Voeg in het Mythex-project een herinneringsdatum toe aan elke sollicitatie en markeer kaarten waarvan de herinnering vandaag is of verlopen.

Publiceer het en stuur me de live-URL.

Goed voor: mensen die al in ChatGPT plannen en denken en het resultaat live willen, met data die bewaard blijft, zonder hosting te leren. Omdat het een gewoon Mythex-project is, kun je op elk moment verdergaan in de Mythex-chat.

Welke optie past bij wat je bouwt

Promptgewoontes die werken in ChatGPT

• Noem de tool als je wilt dat hij wordt gebruikt. "Gebruik Mythex om…" maakt duidelijk dat het verzoek voor jouw project is, niet voor een algemeen antwoord.
• Eén wijziging per bericht. Lange lijsten met aanpassingen geven lange lijsten met bijwerkingen.
• Vraag om een plan vóór grote stappen. "Som op wat je gaat wijzigen voordat je iets verandert en wacht op mijn akkoord."
• Plak exacte foutmeldingen. De volledige foutmelding is meer waard dan elke beschrijving.
• Vraag wat er veranderd is. "Vat je laatste drie wijzigingen samen in gewone woorden" houdt je op koers als je de code niet leest.

Meer staan in ons spiekbriefje met vibe coding prompts.

Houd het veilig

• Plak nooit echte wachtwoorden of API-sleutels in een ChatGPT-gesprek. Heeft je app een sleutel nodig, bewaar die dan in de geheimen van het project. De tools van Mythex melden alleen namen van geheimen, nooit waarden.
• Controleer voor het publiceren dat gebruikers elkaars data niet kunnen zien en dat er geen sleutel in code terecht is gekomen die in de browser draait. Onze gids is vibe coding veilig? somt de controles op met prompts die je kunt plakken.

Gebruik je ook Claude? De bijbehorende gids behandelt vibe coding met Claude en Claude Code. Voor een overzicht per model, zie ChatGPT vs Claude vs Gemini voor het bouwen van apps.

Veelgestelde vragen