IDit schooljaar (2025–2026) moet het jaar worden waarin we AI écht gaan toepassen in de klas. Niet blijven praten over AI, maar doen. Om het onderwijs te verbeteren voor de lerenden en ons werk als docenten leuker/makkelijker te maken. De komende tijd ga ik verschillende praktische tips & tricks delen (AI in de onderwijspraktijk – AI voor Docenten). Vandaag gaan we het hebben over een thema wat misschien heel lastig, eng en hoogdrempelig klinkt, maar dat helemaal niet hoeft te zijn: Vibe Coding.
Wat is het?
Vibe Coding is iets coderen zonder naar de code te kijken. Je hoeft tegenwoordig niet te kunnen coderen om simpele (maar zeer functionele) websites / appjes te maken. Ik ga enkele super simpele voorbeelden laten zien en ik hoop je te overtuigen dat jij dit vandaag nog gaat proberen!
We gebruik hiervoor de ‘build’ functionaliteit binnen Google AI Studio. Google AI Studio is een soort testomgeving van Google waarbij je allerlei producten GRATIS kan testen van Google.
We gebruik hiervoor de ‘build’ functionaliteit binnen Google AI Studio. Google AI Studio is een soort testomgeving van Google waarbij je allerlei producten GRATIS kan testen van Google. Het lijkt te goed om waar te zijn en dat is het voor een deel ook. Er zitten wel wat limieten op deze gratis versie maar je zult zien dat simpele dingen goed te maken zijn binnen de limieten. Het enige wat jij en je gebruikers nodig hebben is een (gratis) Gmail-account.
Werkwijze
Ik ga hier de werkwijze delen en daarna enkele voorbeelden laten zien om te tonen hoe simpel (en niet eng!) het is om te vibe coden.
- Ga naar https://aistudio.google.com/ en login met je Google account.
- Ga links in het menu naar ‘Build’
- In het tekstvak zet je je prompt (hier ga ik zo enkele voorbeelden van tonen).
- Gemini gaat even nadenken
- Het scherm transformeert naar 2 delen: links zie je het chatvenster. Rechts zie je dat er code wordt gegenereerd. Afhankelijk van je prompt kan het even duren voordat het coderen klaar is. Verbaas je ondertussen vooral over hoe bizar het is wat er nu gebeurd.
- Op een gegeven moment is de code gegenereerd en zal het automatisch een preview laden van je website / app.
- Gefeliciteerd! Je hebt zojuist een site / app gevibe coded 🎉 Ga het testen om te checken of alles werkt zoals je wilt. ///// Er is een foutje geslopen in de code. Klik op ‘auto-fix’ of zeg in het chatvenster welke error er staat. Vaak werkt het na 1 rondje error fixen. Zo niet: waarschijnlijk heb je iets moeilijks gevraagd. Maak een nieuwe build en vraag iets simpelers.
- Wil je de site / app nog gaver maken? Prompt dit dan in de linkerkant. Er zijn 2 gevaren hierbij: 1) als je moeilijke dingen prompt, dan kan je site/app kapot gaan en moet je de errors eruit laten halen; 2) het verbeteren van je site/app kan heel verslavend zijn en dan schrik je opeens dat er een hoop tijd voorbij is gegaan 😄
- Ben je tevreden? Rechtsbovenin staat de knop ‘share app’ (die 3 puntjes met 2 lijntjes). Klik daarop, vink ‘publish app’ aan en deel de link met je leerlingen/studenten. Zij moeten inloggen met hun Google-account kunnen dan de app gebruiken.
Let op, stap 9 is een trucje om het wat makkelijker te maken voor de beginners. Google wil eigenlijk dat je na het bouwen op het raketje (‘deploy app’) klikt. Dan moet je echter een betaalmethode koppelen aan je account. Je krijgt op dit moment dan 300 dollar gratis. Dit is een geweldige deal. Maar ik snap het als je dit niet wilt doen. Dan kunnen we het trucje gebruiken en de share button gebruiken. Werkt ook prima.
Voorbeelden
Voorbeeld 1: Een simpele quiz
We beginnen met een simpele (en vrij slechte want niet specifieke!) prompt:
maak een simpel interactief leerspel om marktvormen te leren
Gemini heeft ervoor gekozen om een quiz te bouwen over marktvormen met toepassingsvragen. Bij een fout antwoord krijgen we feedback.
Een prima eerste versie. Experts (docenten!) kunnen natuurlijk heel goed prompten om deze versie te verbeteren.
https://ai.studio/apps/drive/1V4CdX8FGkV1nnAIbz4W1QwSTUhgof9Wy
Voorbeeld 2: Simulaties
We gaan een flink stapje omhoog t.o.v. voorbeeld 1. Voorbeeld 1 was natuurlijk iets simpels en statisch. Maar we willen nu iets bouwen waarbij er een AI chatbot geïntegreerd wordt in onze app. We gaan nu een veel betere prompt geven waarbij we veel specifieker zijn:
Maak een simpele website waarop 3 simulaties staan waarbij de student ICT mbo 4 kan oefenen met gesprekken die binnen komen op een helpdesk. De casussen moeten zo echt mogelijk zijn. De caussen moeten dus met een fictief persoon zijn met een fictief probleem dat opgelost moet worden.
Het quizje bij voorbeeld 1 was leuk maar dit is wel even van een ander niveau. We krijgen een app met een simpele interface met 3 casussen en als we erop klikken dan begint de casus direct en het werkt allemaal in één keer. Volgens mij is dit een hele leuke leeractiviteit voor de leerlingen.
Eventueel kunnen we een code woord meegeven die ze krijgen als ze het probleem oplossen. We zouden eventueel ook een AI-docent kunnen laten meekijken die feedback geeft op hoe de leerling omgaat met de klant. De mogelijkheden zijn oneindig. Wederom: jij als docent moet gaan bepalen hoe je dit verbeteren en aanvullen. En ook hoe je dit wilt inzetten in je onderwijsontwerp.
https://ai.studio/apps/drive/1dF857O__lsKVQumBUVCUk2uU6mt-O3JC
Voorbeeld 3: Oefenexamen met gepersonaliseerde feedback
In de bijlage vind je in een pdf-bestand het oefenproefwerk wiskunde (incl. correctiemodel) voor klas 1a . Ik wil een omgeving maken voor de leerlingen waarin ze kunnen oefenen met dit proefwerk en waarbij ze bij elke vraag gepersonaliseerde feedback krijgen van een AI. De AI moet dus de opdracht kunnen lezen, het antwoordmodel kennen en het antwoord van de leerling kunnen zien. Op basis daarvan geeft het een score en constuctieve feedback.
Binnen enkele minuten krijgen we het proefwerk in een app-vorm met gepersonaliseerde feedback op de antwoorden die de leerling geeft. Als je nu niet onder de indruk bent, dan ben ik benieuwd naar wat voor rocksterleven jij hebt😂
https://ai.studio/apps/drive/11tbuLo3IMfL_tqpAxD_lcZ0fqKSt1ue1
Tips
- Houd het simpel! Probeer eerst een succeservaring te krijgen. Met vibe coden kan je de gaafste dingen maken maar vergeet niet dat je hier werkt met een gratis versie van een vibe code tool. Het is magisch maar je loopt snel tegen limieten. Houd het simpel.
- Probeer verschillende dingen. Als je nog niet veel gevibe code hebt, dan kan je waarschijnlijk nog niet inschatten wat makkelijk of moeilijk is voor de AI. Dat kan heel anders zijn dan voor mensen. Gewoon lekker experimenteren dus.
- Als je inspiratie nodig hebt, ga dan naar ‘build’ in Google AI Studio. In plaats van meteen prompten kan je allerlei templates zien. Die kan je gebruiken en aanpassen. Super handig!
Voor volle transparantie: alle voorbeelden waren de resulaten van 1 prompt en ik heb geen cherry picking gedaan. Verder is het goed om te weten dat ik zelf nooit Google Build gebruik omdat ik zelf Claude Code in Cursor gebruik (maar dit is niet geschikt voor beginners dus daarom leg ik Google Build uit.
Conclusie
Zelf een simpele site of appje maken is in 2025 makkelijker dan veel mensen denken en de toepassingen zijn eindeloos. Dit is waarom Marcel Mutsaarts en ik er ook niet over uitgepraat raken in het AI-tussenuurtje. Ik hoop met deze voorbeelden jullie te inspireren om dit eens uit te proberen.
Niet bang zijn, gewoon doen!
Meer weten over vibe coden?
Op https://aivoordocenten.nl/vibe-coding-in-het-onderwijs/ staan verschillende filmpjes over vibe coden in het onderwijs.
17 september start de vernieuwde en verbeterde webinarserie ‘AI Voor Docenten’ van Marcel Mutsaarts , Barend Last en mijzelf. Vibe coden is het hoofdthema van webinar 3 en dan gaan we er nog veel dieper op in dan in deze post. Zie https://aivoordocenten.nl/webinarserie-ai-in-het-onderwijs/ voor meer informatie.
Op 26 november geef ik een sessie over Vibe Coden bij het ‘Net Echt Congres´. Kom langs als je meer wilt weten of eens met me wil sparren.
