ChatGPT Sites Tutorial: Webapps Bouwen Zonder Code

Sinds 9 juli 2026 kunnen betalende ChatGPT-gebruikers echte webapps bouwen en hosten zonder ChatGPT te verlaten. U beschrijft de app, ChatGPT schrijft de frontend en backend, host beide en geeft u een live URL. Deze handleiding richt zich op wat u kunt bouwen, hoe de backend werkt en precies hoe u met ChatGPT moet communiceren om een bruikbare tool te krijgen - met alleen de Sites-functie en de ChatGPT desktop-app.

De onderdelen die u krijgt

Elke Site heeft maximaal drie lagen, en u kiest welke uw app nodig heeft:

• Frontend - de pagina's die mensen zien en waarop ze klikken.
• Backend met een database (D1) - een echte relationele database die records permanent opslaat. Dit maakt formulieren, trackers en dashboards mogelijk: data overleeft verversingen en wordt gedeeld tussen alle bezoekers.
• Bestandsopslag (R2) - voor uploads zoals afbeeldingen of documenten.
• Inloggen met ChatGPT - bezoekers identificeren zich met hun ChatGPT-account, zodat uw app weet wie wat heeft ingediend, acties kan beperken tot één per persoon, of elke gebruiker alleen hun eigen data kan tonen.

U configureert dit nooit zelf. U vraagt erom in gewone taal, en ChatGPT genereert de code voor alle lagen. Het enige wat u moet doen is duidelijk aangeven wat opgeslagen moet worden - als u persistentie niet noemt, krijgt u mogelijk een pagina die alles vergeet bij verversing.

De magische zin die backend-codegeneratie activeert is een variant van:

"Data moet behouden blijven bij verversingen en gedeeld worden tussen alle bezoekers. Gebruik een database."

Wat echt de moeite waard is om te bouwen

Denk aan "kleine interne tools die wrijving uit uw week halen":

• Een persoonlijk of team-dashboard - één pagina die uw projecten, statussen, deadlines en overtijdige items in rood toont.
• Een e-mailtriage-bord - plak e-mails erin, en de app archiveert ze als vandaag beantwoorden / delegeren / later lezen / archiveren, met een persistente lijst per categorie. (Sites kunnen niet verbinden met uw inbox - het plakken is de input.)
• Een indieningsformulier - verzamel verzoeken, feedback, aanmeldingen of bugrapporten van anderen via een URL.
• Een tracker - gewoontes, te declareren uitgaven, sollicitaties, alles met rijen en statussen.
• Een intern portaal - links, handleidingen en veelgestelde vragen voor een klein team, alleen door u bewerkbaar.
• Een stem- of rankingtool - één stem per ingelogde persoon, resultaten centraal opgeslagen. Een vroege tester leverde precies dit op, inclusief backend, in ongeveer 23 minuten.

Niet mogelijk, dus begin hier niet mee: betalingen en e-commerce, verbinding met externe databases of privé-API's, achtergrondtaken, alles met gezondheids- of kaartgegevens.

Hoe u met ChatGPT praat vóór het bouwen - de interviewprompt

De grootste kwaliteitshefboom is niet de bouwprompt - het is ChatGPT eerst u laten interviewen. Open de desktop-app, vermeld @Sites, en begin met:

Prompt 1 - het interview: "Ik wil een kleine webapp bouwen: [één zin - bijv. 'een plek waar mijn familie dinerideeën indient en erop stemt']. Voordat je iets bouwt, interview me. Stel me één vraag tegelijk over: wie het zal gebruiken, welke acties elke persoon kan ondernemen, welke data opgeslagen moet worden, wie de data mag zien, en wat het hoofdscherm moet tonen. Als je genoeg hebt, toon me het plan - pagina's, datavelden en permissies - en wacht op mijn goedkeuring."

Dit verandert vage ideeën in een concrete specificatie, en de specificatie wordt de bouwopdracht:

Prompt 2 - de bouw: "Bouw het volgens plan. Privé-backend: sla alle records op in een database, gedeeld tussen bezoekers, persistent bij verversingen. Vereist Inloggen met ChatGPT voor indienen. Genereer eerst een te beoordelen versie - publiceer nog niets."

Tutorial: een indieningsformulier met een privé-backend

Dit is het patroon waar bijna elke nuttige Site op neerkomt - een publiek formulier vooraan, een privé-dataweergave erachter.

Prompt: "Bouw een indieningsformulier voor [functieverzoeken]. Velden: naam (automatisch ingevuld via ChatGPT-inlog), titel, beschrijving, prioriteit (laag/normaal/urgent). Bij indienen: sla het record op in de database met een tijdstempel en toon een bedankbericht. Voeg een aparte /admin-pagina toe die alle inzendingen in een tabel toont, nieuwste eerst, met filters op prioriteit - en maak de adminpagina alleen zichtbaar voor mij, niet voor andere bezoekers. Eerst te beoordelen versie, niet publiceren."

Waar leven de indieningsgegevens, en waar vindt u ze? Ze worden opgeslagen in de ingebouwde database van de Site (D1). U leest ze op twee manieren, beide binnen het product:

1. De privé-adminpagina die u zojuist vroeg - dit is het standaardpatroon. Het formulier is publiek; de tabel met resultaten is beperkt tot u. Vraag om CSV-export op die pagina als u de data eruit wilt.
2. Vraag in de chat - in hetzelfde Sites-gesprek kunt u simpelweg vragen: "Toon me de tot nu toe ontvangen inzendingen," en itereren over hoe ze worden weergegeven.

Het dashboard en de e-mailtriage, elk in één prompt

Dashboard: "Bouw een persoonlijk dashboard. Secties: Projecten (naam, status, deadline), Vandaag (taken die vandaag af moeten), en Wacht Op (dingen waar ik op wacht van anderen, met de naam van de persoon en verstreken dagen). Alle data opgeslagen in de database, inline bewerkbaar alleen door mij. Overtijdige items in rood. Toegang: privé, alleen ik."

E-mailtriage: "Bouw een e-mailtriage-bord. Ik plak de afzender, onderwerp en tekst van een e-mail in een invoervak. Elke e-mail wordt een kaart die ik kan slepen tussen vier kolommen: Vandaag Beantwoorden, Delegeren, Later Lezen, Klaar. Kaarten blijven behouden in de database. Toon een teller per kolom en laat me een hele kolom tegelijk archiveren. Toegang: privé."

Verfijn met gewone genummerde verzoeken - "1) sorteer Vandaag Beantwoorden op oudste eerst, 2) voeg een zoekvak toe, 3) laat me een kaart bewerken na opslaan" - en laat al het andere onaangeroerd.

Hoe het online live gaat

Publiceren is een bewuste tweestap, en het is belangrijk omdat er geen staging is - elke gedeployde URL is productie:

1. Sla een versie op. Dit creëert een snapshot die u kunt beoordelen zonder iets bloot te stellen.
2. Deploy, kies dan het publiek: privé (u), geselecteerde mensen, uw workspace, of publiek - publiek betekent iedereen op internet met de link, geen ChatGPT-account nodig om te bekijken.

Uw app is direct live op uwnaam.openai.chatgpt.site, met een aangepast domein beschikbaar waar ondersteund. Ingebouwde analytics tonen unieke bezoekers en paginaweergaven. Bezoekers kunnen de site gebruiken - indienen, stemmen, browsen - maar nooit bewerken; bewerken gebeurt alleen in uw chat.

Begin met het smalste publiek, klik zelf door elke flow, verbreed dan. Hosting is inbegrepen bij uw betaalde plan (Free en Go uitgesloten; EER, Zwitserland en VK nog niet ondersteund) - gebruik telt mee voor de limiet van uw plan zoals Codex dat doet.

De gewoonte die dit laat werken

Één zin om te onthouden: eerst interviewen, dan bouwen, als laatste publiceren. Laat ChatGPT de vragen stellen, sta op een database wanneer data moet overleven, zet een privé-adminpagina achter elk publiek formulier - en u gaat van idee naar een live, nuttige tool in één sessie.