# Docenttekst Les 1: Introductie AI & Large Language Models > **Totale lesduur:** 3 uur (180 minuten) > **Spreektijd docent:** ~55 minuten > **Format:** Volledig uitgeschreven script per slide > **Kernworkflow:** Schets op papier → ChatGPT → v0.dev → Website --- ## BLOK 1: WELKOM & INTRODUCTIE (13 minuten) ### Slide 1: Welkomstslide **[0:00 - 0:30]** _(30 seconden)_ _[Wacht tot iedereen zit, maak oogcontact]_ "Goedemorgen allemaal, welkom bij de eerste les van AI Fundamentals. Fijn dat jullie er zijn. Neem even de tijd om je laptop open te klappen en je spullen klaar te leggen." _[Korte pauze van 20-30 seconden]_ --- ### Slide 2: Planning **[0:30 - 2:00]** _(1,5 minuut)_ "Voordat we beginnen, laat ik jullie even zien wat we vandaag gaan doen. Zo weten jullie waar je aan toe bent." _[Wijs naar de tijdsblokken op de slide]_ "We beginnen met theorie over wat AI is en hoe het werkt. Daarna gaan we praktisch aan de slag met ChatGPT - ik laat zien hoe je die tool effectief gebruikt." "Dan komt het spannende deel: prompt engineering. Hoe stel je de juiste vraag? Hoe geef je aan welke technologie, kleuren en stijl je wilt?" _[Met nadruk]_ "En dan de grote finale: ik ga live demonstreren hoe je van een **tekening op papier** naar een **werkende website** gaat. En daarna gaan jullie dat zelf doen." "Jullie gaan vandaag letterlijk een website bouwen die begint als een schets op papier. Dat is het doel." --- ### Slide 3: Voorstellen docent **[2:00 - 3:30]** _(1,5 minuut)_ "Laat ik mezelf even voorstellen. Mijn naam is [NAAM] en ik ben jullie docent voor deze leerlijn. Ik werk zelf als developer en gebruik dagelijks AI-tools in mijn werk." "Wat ik heel gaaf vind aan dit vak is dat het zo snel verandert - wat vandaag cutting edge is, kan over drie maanden alweer achterhaald zijn. Dat maakt het ook uitdagend om les te geven, maar vooral heel leuk." "Ik geef hier twee keer per week les en daarnaast werk ik aan mijn eigen projecten. Als je vragen hebt buiten de les om, kun je me altijd bereiken via Teams." --- ### Slide 4: Kennismaking **[3:30 - 8:30]** _(5 minuten - studenten aan het woord)_ "Maar genoeg over mij - ik ben veel nieuwsgieriger naar jullie. Laten we een snelle ronde doen. Vertel kort je naam en geef antwoord op deze vraag..." _[Wijs naar de slide]_ "...heb je al eens ChatGPT of een andere AI-tool gebruikt? En zo ja, waarvoor?" _[Laat iedereen kort reageren]_ "Mooi, ik zie dat de meesten van jullie al wel eens met AI hebben gewerkt. Dat is een goed startpunt." --- ### Slide 5: De Leerlijn AI Developer **[8:30 - 10:30]** _(2 minuten)_ "Even een vooruitblik op wat we de komende 18 weken gaan doen. De cursus is verdeeld over vier delen." _[Wijs naar de vier delen op de slide]_ "Deel 1, les 1 tot 4, is waar we nu zitten: AI Foundations. Hier leer je de basis - wat is AI, hoe werkt het, prompt engineering, en tools als ChatGPT en OpenCode." "Deel 2, les 5 tot 9, gaat over Technical Foundations. Dan leer je TypeScript, Next.js, en databases met Supabase. Een stevige technische basis." "Deel 3, les 10 tot 12, focust op AI Tooling. Je leert welke tool je wanneer gebruikt, hoe je snel prototypes bouwt, en je maakt kennis met Cursor." "En deel 4, les 13 tot 18, is het eindspel: Advanced AI Features. AI agents, de Vercel AI SDK om AI in je eigen app te bouwen, en deployment. Je eindigt met een volledig werkend eindproject." "Maar dat is ver weg. Vandaag focussen we op de basis - en vooral op de workflow van schets naar website." --- ### Slide 6: Accounts check **[10:30 - 13:00]** _(2,5 minuten)_ _[Iets serieuzer toon]_ "Oké, even een praktisch punt. Jullie hebben vandaag drie accounts nodig. Laten we even checken." _[Scan de groep, vraag om handopsteken per account]_ "Allereerst: wie heeft een ChatGPT account? Wie nog niet? Maak die dan nu even aan op chat.openai.com - het is gratis." "Ten tweede: GitHub. Wie heeft dat? GitHub is waar developers hun code opslaan - we hebben het straks nodig om te deployen." "En tot slot: Vercel. Dit is het platform waar jullie website straks live komt te staan. Ga naar vercel.com en maak een account aan - het makkelijkst is om direct te koppelen met je GitHub account." _[Geef 2 minuten]_ "Is iedereen zover? Alle drie de accounts? Mooi, dan gaan we de diepte in." --- ## BLOK 2: WAT IS AI? (15 minuten) ### Slide 7: Wat is Artificial Intelligence? **[13:00 - 16:00]** _(3 minuten)_ "Oké, eerste grote vraag: wat ís eigenlijk AI?" _[Laat dit even hangen]_ _[INTERACTIE: Quick poll]_ "Maar eerst - noem eens voorbeelden van AI die je vandaag misschien al hebt gebruikt. Denk aan je telefoon, apps, websites..." _[Laat 3-4 studenten antwoorden]_ _[Verwachte antwoorden en hoe je erop reageert:]_ - **Spotify/Netflix aanbevelingen:** "Ja! Die analyseert je luister/kijkgedrag en voorspelt wat je leuk vindt" - **Google Maps routes:** "Precies - die voorspelt verkeer en berekent de snelste route" - **Autocorrect/predictive text:** "Goed voorbeeld - dat is letterlijk next-word prediction, zoals ChatGPT" - **Gezichtsherkenning (telefoon unlock):** "Ja, patroonherkenning in pixels" - **Siri/Google Assistant:** "Taalverwerking - heel vergelijkbaar met ChatGPT" _[Als niemand antwoordt:]_ "Denk aan je telefoon vanochtend. Heb je getypt? Autocorrect. Route gepland? Google Maps. Muziek geluisterd? Spotify kiest nummers voor je. Dat is allemaal AI." "Al die voorbeelden zijn AI. Maar wat is het dan precies?" "AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is." "Denk aan: patronen herkennen in data, beslissingen nemen op basis van informatie, taal begrijpen en genereren. Dingen die wij mensen doen met ons brein, maar dan door een computer." _[Maak onderscheid]_ "Nu is er een belangrijk onderscheid dat je moet kennen. Er is Narrow AI - ook wel Weak AI genoemd - dat is AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. Het kan heel goed tekst genereren, maar het kan niet autorijden of schaken - tenzij je het specifiek daarop traint." "En dan heb je General AI - of Strong AI - dat zou AI zijn die alles kan wat een mens kan. Die kan leren, redeneren, problemen oplossen in elke context. Dat bestaat nog niet, en niemand weet of het ooit zal bestaan." "Wat we vandaag gebruiken is Narrow AI. Heel krachtig, maar beperkt tot specifieke taken." --- ### Slide 8: Hoe werken Large Language Models? **[16:00 - 20:00]** _(4 minuten)_ "Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk?" _[INTERACTIE: Laat studenten raden]_ "Wat denken jullie? Als je een vraag typt in ChatGPT, wat gebeurt er dan 'under the hood'? Heeft iemand een idee?" _[Laat 2-3 studenten antwoorden - noteer antwoorden kort, bouw spanning op]_ _[Korte samenvatting antwoord:]_ "Het korte antwoord: het voorspelt steeds het volgende woord. Meer niet. Maar het doet dat zó goed dat het lijkt alsof het 'denkt'." "Interessante ideeën. De werkelijkheid is fascinerend, en als je dit snapt, snap je ook waarom AI soms briljant is en soms complete onzin produceert." "Een Large Language Model - een LLM - is getraind op gigantische hoeveelheden tekst. En met gigantisch bedoel ik: miljarden pagina's. Boeken, websites, Wikipedia, wetenschappelijke papers, code repositories. Een groot deel van wat ooit op het internet is gepubliceerd." "Het model heeft al deze tekst 'gelezen' en daarvan geleerd. Maar wat heeft het precies geleerd?" _[Laat dit even landen]_ "Het heeft geleerd: als ik deze woorden zie, wat is dan het meest waarschijnlijke volgende woord?" "Ja, echt. ChatGPT, Claude, Gemini - al die tools - in de kern zijn het voorspelmachines. Ze krijgen tekst als input en voorspellen token voor token wat er logischerwijs daarna komt." "En ze doen dat zo ongelooflijk goed, gebaseerd op al die miljarden teksten, dat het lijkt alsof ze 'begrijpen' wat je zegt. Maar er zit geen bewustzijn in, geen echte intentie. Het is geavanceerde statistische patroonherkenning op een schaal die we nog nooit eerder hebben gezien." --- ### Slide 9: Tokens & Next-Token Prediction **[20:00 - 24:00]** _(4 minuten)_ "Laat me precies uitleggen hoe dit werkt. Het begint met tokens." _[Wijs naar de slide]_ "Stap 1: Als je tekst naar ChatGPT stuurt, wordt die tekst eerst omgezet naar nummers. Elk woord - of soms een deel van een woord - krijgt een nummer. Dit noemen we tokens." "Dus 'Ik drink koffie' wordt zoiets als [1847, 5621, 8934]. Het model werkt puur met getallen, niet met tekst." _[Korte pauze]_ "Stap 2: Nu komt het slimme. Woorden die qua betekenis op elkaar lijken, krijgen nummers die dicht bij elkaar liggen. Denk aan 'koffie' en 'thee' - die liggen dichtbij in deze 'getallenruimte'. Of 'staal' en 'metaal'. Maar 'koffie' en 'fiets' liggen ver uit elkaar." "Dit betekent dat het model snapt dat bepaalde woorden bij elkaar horen, puur door naar patronen in miljoenen teksten te kijken." _[Wijs naar het voorbeeld]_ "Stap 3: Nu de voorspelling. Als ik vraag: 'Ik drink koffie met...' - wat komt er waarschijnlijk?" _[Wacht op antwoorden]_ "Precies! 'Melk' of 'suiker'. Het model berekent voor elk mogelijk woord de kans dat het volgt. En dan kiest het - meestal het meest waarschijnlijke, maar niet altijd." _[INTERACTIE: Testen van begrip]_ "Vraag: als je ChatGPT 10 keer precies dezelfde vraag stelt, krijg je dan 10 keer hetzelfde antwoord?" _[Laat handopsteken - wie denkt ja, wie denkt nee]_ "Het antwoord is: nee! Er zit bewust randomness in - dit heet de 'temperatuur' parameter." "**Wat is temperatuur?** Stel, het model berekent: 'melk' heeft 60% kans, 'suiker' heeft 35% kans, 'room' heeft 5% kans. Bij lage temperatuur kiest het bijna altijd 'melk'. Bij hoge temperatuur gooit het vaker een dobbelsteen en kiest het soms 'suiker' of zelfs 'room'." "**Waarom bestaat dit?** Anders kreeg je steeds exact hetzelfde antwoord - dat voelt robotachtig. Die variatie maakt het menselijker en creatiever. ChatGPT gebruikt standaard een gemiddelde temperatuur - genoeg variatie om interessant te zijn, maar niet zo hoog dat het onzin wordt." "Dit verklaart waarom je soms briljante antwoorden krijgt en soms onzin. Het model gokt slim, maar het blijft gokken." _[INTERACTIE: Doordenker]_ "Maar wacht even - als LLMs alleen maar voorspellen wat het volgende woord is, hoe kunnen ze dan creatieve ideeën genereren? Hoe kan het iets 'nieuws' maken?" _[Laat 2-3 studenten antwoorden - verwacht: combinaties van bestaande kennis, patronen mixen, toeval/randomness]_ "Goede vraag en goed nagedacht! Het antwoord: het combineert patronen op nieuwe manieren." "**Hoe werkt dat?** Het model heeft miljarden teksten gelezen waarin concepten naast elkaar voorkomen. 'Koffie' staat vaak bij 'ochtend' en 'energie'. 'Strand' bij 'zon' en 'vakantie'. Als jij vraagt om iets nieuws - bijvoorbeeld 'een café op Mars' - dan combineert het patronen van 'café' met patronen van 'Mars' en 'ruimte'. Dat levert iets op dat nieuw lijkt." "**Waarom voelt het creatief?** Omdat de combinatie nieuw is voor jou, ook al zijn de losse onderdelen dat niet. Het is niet 'echt' creatief zoals een mens - het heeft geen intentie of inspiratie - maar het mixt bestaande kennis op manieren die wij als creatief ervaren." "En dit brengt me bij iets heel belangrijks..." --- ### Slide 10: Hallucinaties **[23:00 - 28:00]** _(5 minuten)_ _[Iets serieuzere toon]_ "Hallucinaties. Dit is een term die je moet kennen en onthouden." "Wat bedoelen we hiermee? AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie presenteren alsof het waar is. En het klinkt heel overtuigend, want het is grammaticaal perfect en logisch geformuleerd." _[Geef concrete voorbeelden]_ "Laat me een paar voorbeelden geven. Vraag ChatGPT naar een wetenschappelijk paper over een specifiek onderwerp. Hij kan je een titel geven, auteursnamen, een publicatiejaar, een samenvatting - van iets dat niet bestaat. Het klinkt volledig legitiem, maar als je het opzoekt: niets te vinden." "Of vraag hem naar een JavaScript library voor een specifiek probleem. Hij kan een npm package naam noemen, installatie-instructies geven, code voorbeelden - voor een package dat nooit heeft bestaan." "Ik heb ooit ChatGPT gevraagd naar restaurants in een stad waar ik naartoe ging. Drie van de vijf suggesties bestonden niet. Verzonnen namen, verzonnen adressen." _[Leg uit waarom dit gebeurt]_ "Waarom gebeurt dit? Onthoud: het model voorspelt wat het MEEST WAARSCHIJNLIJK volgende woord is. Het controleert niet of iets waar is. Het genereert tekst die LIJKT op tekst die het eerder heeft gezien. Als je vraagt naar een paper, genereert het tekst die eruitziet als een paper-referentie - maar dat betekent niet dat die referentie bestaat." _[Praktische implicaties]_ "Wat betekent dit voor jullie als developers? Heel simpel: verifieer altijd. Kopieer nooit blindelings code van ChatGPT zonder te begrijpen wat het doet. Check of libraries bestaan. Test je code. Valideer feiten." _[INTERACTIE: Probleemoplossend denken]_ "Maar hoe herken je een hallucinatie? Wat zijn rode vlaggen?" _[Laat studenten antwoorden]_ "Goede ideeën! Hier zijn de belangrijkste rode vlaggen én waarom:" "**Té specifieke details** - exacte cijfers, datums, namen. Waarom? Het model vult gaten in met wat 'waarschijnlijk' klinkt. Een paper uit '2019 door Dr. Smith et al.' klinkt geloofwaardig, maar is vaak verzonnen." "**Bronnen die je niet kunt vinden** - als je het Googelt en niets vindt, bestaat het waarschijnlijk niet. Het model genereert tekst die LIJKT op een bronvermelding." "**Onbekende npm packages** - dit is een klassieker. Ik heb zelf meegemaakt dat ChatGPT zo overtuigd was van een package dat hij bleef volhouden dat het bestond, terwijl de code steeds errors gaf. Hij genereerde zelfs 'documentatie' voor een package dat nooit heeft bestaan!" "**Verdacht zelfverzekerd over obscure onderwerpen** - het model weet niet wat het niet weet. Het klinkt even zelfverzekerd over iets dat het verzint als over iets dat waar is." "AI is een tool, geen orakel. Het is ongelooflijk nuttig, maar je moet het behandelen als een junior collega die heel enthousiast is maar soms dingen verzint. Vertrouw, maar verifieer." _[INTERACTIE: Ervaring delen]_ "Wie van jullie heeft dit zelf al eens meegemaakt? Dat ChatGPT iets verzon dat niet klopte?" _[Laat 2-3 studenten hun ervaring delen - dit maakt het concreet en persoonlijk]_ --- ## BLOK 3: HET AI-LANDSCHAP (10 minuten) ### Slide 11: De Grote Spelers **[28:00 - 31:00]** _(3 minuten)_ "Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn. Het landschap verandert snel, maar dit zijn de grote namen." _[Wijs naar de tabel]_ "ChatGPT van OpenAI - dat is de bekendste, de meesten van jullie hebben die al gebruikt. Het is de tool die AI mainstream maakte." "Claude van Anthropic - minder bekend, maar technisch heel sterk. Vooral goed in lange documenten en genuanceerde gesprekken. Persoonlijk gebruik ik Claude vaak voor complexere taken." "Gemini van Google - geïntegreerd in Google's ecosysteem. Handig als je al veel met Google Workspace werkt." "En Grok van xAI, het bedrijf van Elon Musk. Geïntegreerd in X, met toegang tot real-time informatie." "Vandaag focussen we op ChatGPT omdat die het meest toegankelijk is en de beste gratis tier heeft. Maar de concepten die je leert zijn toepasbaar op allemaal." --- ### Slide 12: Gratis AI Opties **[31:00 - 35:00]** _(4 minuten)_ "Laten we het hebben over kosten. Want dat is een belangrijke vraag: moet je betalen voor AI?" _[INTERACTIE: Peiling]_ "Even peilen: wie betaalt er al voor een AI tool? ChatGPT Plus, Claude Pro, Copilot? Steek je hand op." _[Tel handen, vraag 1-2 mensen waarom ze betalen]_ "Interessant! En de rest - waarom niet? Te duur? Gratis is goed genoeg?" _[Korte reacties - verwacht: gratis werkt prima, te duur, weet niet wat je extra krijgt]_ _[Wijs naar de tabel]_ "Het korte antwoord: voor deze cursus hoef je niks te betalen! Er zijn zoveel gratis opties dat je voor deze hele cursus geen cent hoeft uit te geven." "ChatGPT Free draait op GPT-5 - dat is al een heel krachtig model. Je kunt afbeeldingen uploaden, documenten analyseren, code genereren." "Claude Free van Anthropic heeft Sonnet 3.5 - persoonlijk vind ik die uitstekend voor lange teksten en genuanceerde uitleg." "Gemini van Google is handig als je al in het Google ecosysteem zit." _[Nu met nadruk]_ "Maar er zijn ook twee opties die jullie misschien niet kennen. Groq - G-R-O-Q - biedt een gratis API met Llama 3.3, een open source model. Het is ongelooflijk snel - sneller dan alle anderen - en helemaal gratis." "En dan Ollama. Dit is anders. Met Ollama draai je AI modellen lokaal op je eigen laptop. Dat betekent: je data verlaat je computer nooit. Perfect voor als je werkt met gevoelige informatie." _[Privacy punt]_ "Dit is belangrijk voor later in de cursus: als je met klantdata werkt, of gevoelige bedrijfsinformatie, wil je misschien niet dat dat naar OpenAI of Anthropic gaat. Dan is Ollama je vriend." "Voor nu: ChatGPT Free is perfect voor wat we gaan doen." --- ### Slide 13: Betaalde & Premium Modellen **[35:00 - 38:00]** _(3 minuten)_ "Oké, maar wat als je tóch wilt upgraden? Wat krijg je dan?" _[Wijs naar de betaalde sectie]_ "Voor ongeveer $20 per maand krijg je bij ChatGPT Plus of Claude Pro meer berichten, snellere response, en toegang tot premium features. Voor de meeste mensen is dit voldoende als ze professioneel met AI werken." _[Nu over premium]_ "En dan is er de premium tier. Hier wil ik vooral Claude Opus noemen." _[Met nadruk]_ "Opus is het beste model dat er is voor complexe redenering. Als je een echt moeilijk probleem hebt - iets waar je al drie uur op zit te staren - dan gooi je het naar Opus en krijg je vaak een doorbraak." "Maar het is ook duur. Via de API kost het ongeveer $75 per maand als je het intensief gebruikt. Het is voor professionals die het echt nodig hebben." _[Samenvatten]_ "Mijn advies: start gratis. Upgrade naar Plus of Pro als je tegen limieten aanloopt. En Opus? Dat bewaar je voor die momenten dat je echt vastloopt." "Voor deze cursus: gratis is ruim voldoende." --- ### Slide 14: Welke tool voor welke taak? **[38:00 - 42:00]** _(4 minuten)_ "Welke tool is het beste? Die vraag krijg ik vaak. En het eerlijke antwoord: het hangt af van wat je wilt doen." _[Loop door de tabel]_ "Voor snelle code snippets - een functie schrijven, een bug fixen - zijn ChatGPT en Claude beide uitstekend. Ik wissel zelf regelmatig." "Voor lange documenten analyseren of schrijven is Claude beter. Die heeft een groter 'geheugen' - technisch: een grotere context window. Je kunt een heel boek uploaden en vragen stellen." "Voor UI componenten - en dat is wat we straks gaan doen - gebruiken we v0.dev. Dat is een speciale tool van Vercel die geoptimaliseerd is voor het genereren van React componenten met Tailwind CSS." "Voor privacy-gevoelige zaken gebruik je Ollama - lokaal, geen data die je computer verlaat." "En als je supersnel wilt prototypen, is Groq je vriend. Die API is zo snel dat het bijna instant voelt." _[Praktische tip]_ "Mijn tip: experimenteer met meerdere tools. Elke tool heeft sterke en zwakke punten. De beste developers weten wanneer ze welke tool moeten gebruiken." --- ## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten) ### Slide 15: ChatGPT Interface **[42:00 - 45:00]** _(3 minuten)_ _[Energieke toon]_ "Oké, genoeg theorie. Open allemaal ChatGPT op je laptop. Ga naar chat.openai.com en log in." _[Wacht tot iedereen de pagina open heeft - 1 minuut]_ "Iedereen erin? Mooi. Laat me jullie rondleiden door de interface." _[Open ChatGPT op het projectiescherm]_ "In het midden heb je het chatvenster - daar typ je je vragen en zie je de antwoorden. Links zie je je chat geschiedenis - handig om terug te gaan naar eerdere gesprekken. Bovenaan kun je het model kiezen - daar komen we zo op. En rechtsonder in je profielfoto vind je instellingen." "De interface is bewust simpel gehouden. De kracht zit in wat je typt, niet in complexe menu's." --- ### Slide 16: Model Kiezen **[45:00 - 47:00]** _(2 minuten)_ "Kijk even bovenaan je scherm. Daar staat welk model je gebruikt." _[Wijs op je eigen scherm]_ "Je hebt een paar opties. GPT-5 is de standaard - dat is snel en voor de meeste taken meer dan genoeg. Dit is wat je waarschijnlijk ziet." "GPT-5 with canvas is speciaal voor wanneer je documenten wilt bewerken - het opent een soort editor naast de chat." "En als je Plus hebt, zie je ook GPT-5.2 - het nieuwste en krachtigste model." "Voor vandaag is GPT-5 perfect. Laat het daarop staan." --- ### Slide 17: Tijdelijke Chat **[47:00 - 49:00]** _(2 minuten)_ "Nu iets belangrijks over privacy: tijdelijke chat." _[Demonstreer waar dit staat]_ "Als je een nieuwe chat start, zie je een optie voor 'Temporary Chat'. Als je dit aanzet, wordt je gesprek niet opgeslagen in je geschiedenis en niet gebruikt om het model te trainen." "Wanneer gebruik je dit?" _[INTERACTIE: Toepassen]_ "In welke situaties zou je tijdelijke chat willen gebruiken? Noem eens voorbeelden." _[Laat 2-3 studenten antwoorden]_ "Goede voorbeelden! Laat me uitleggen waarom dit belangrijk is:" "**Klantgegevens/bedrijfsdata** - waarom? Alles wat je naar ChatGPT stuurt kan gebruikt worden om het model te trainen. Stel je voor dat jouw klantgegevens straks in iemand anders' antwoord opduiken. Dat is een datalek." "**Medische/persoonlijke info** - waarom? Privacy-wetgeving zoals AVG/GDPR. Je mag dit niet zomaar delen met derden - en OpenAI is een derde partij." "**Interne bedrijfscode** - waarom? Intellectueel eigendom. Je wilt niet dat je geheime algoritme in de trainingsdata van een AI-model belandt." "Tijdelijke chat voorkomt dit allemaal - je gesprek wordt niet opgeslagen en niet gebruikt voor training." "Voor deze cursus maakt het niet uit, maar onthoud dit voor je professionele werk." --- ### Slide 18: Afbeeldingen Analyseren **[49:00 - 54:00]** _(5 minuten)_ _[Dit is een belangrijke slide voor de workflow]_ "Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen en begrijpen." _[Demonstreer live]_ "Kijk, ik klik hier op het paperclip icoontje... en ik kan een afbeelding uploaden." _[Upload een simpele tekening of screenshot]_ "Ik upload hier een schets die ik eerder heb gemaakt... en ik vraag: 'Wat zie je op deze afbeelding? Beschrijf de layout.'" _[Wacht op response]_ "Kijk wat er gebeurt. ChatGPT beschrijft precies wat hij ziet. De positie van elementen, de structuur, zelfs details die ik misschien over het hoofd zou zien." "Dit heet image-to-text, of vision. Het model 'ziet' de afbeelding en kan erover praten." _[Met nadruk]_ "Dit is de sleutel tot onze workflow vandaag. Jullie gaan een schets tekenen op papier, een foto maken, en die uploaden naar ChatGPT. En ChatGPT gaat die schets 'vertalen' naar een gedetailleerde beschrijving die we kunnen gebruiken voor code generatie." "Het mooie is: je hoeft geen designer te zijn. Je hoeft geen perfecte tekening te maken. ChatGPT begrijpt ook ruwe schetsen." --- ### Slide 19: Bestanden Uploaden **[54:00 - 56:00]** _(2 minuten)_ "Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een Excel bestand, een code bestand." _[Demonstreer kort met een document]_ "Dit is handig voor: documentatie analyseren, code reviewen, data uit spreadsheets halen." "De limiet is ongeveer 50 pagina's per document, en je kunt meerdere bestanden tegelijk uploaden." --- ### Slide 20: Custom Instructions **[56:00 - 59:00]** _(3 minuten)_ "Dan iets heel nuttigs dat weinig mensen kennen: Custom Instructions." _[Ga naar instellingen → Personalisatie]_ "Hier kun je permanent instellen wie je bent en hoe ChatGPT moet antwoorden. Dit wordt automatisch meegenomen in élke chat." "Bijvoorbeeld: 'Ik ben een frontend developer. Ik werk met React en Tailwind CSS. Ik heb een junior niveau. Geef praktische code voorbeelden.'" "Vanaf nu weet ChatGPT in elke nieuwe chat al deze context. Je hoeft niet elke keer opnieuw te vertellen welke technologie je gebruikt." _[Praktische tip]_ "Mijn tip: stel dit in vóór je begint met werken. Het scheelt enorm veel herhaling en je antwoorden worden relevanter." --- ### Slide 21: ChatGPT Projects **[59:00 - 62:00]** _(3 minuten)_ "Nu iets heel handig: Projects. Dit is een relatief nieuwe feature die jullie werk veel makkelijker maakt." _[Demonstreer Projects in de zijbalk]_ "Zie je hier links 'New Project'? Projects zijn slimme werkruimtes. Je kunt alles wat bij een taak hoort bij elkaar houden: chats, bestanden, en specifieke instructies." "Waarom is dit handig? Stel je werkt aan meerdere projecten - een voor school, een voor werk, een voor een hobby. Met Projects hoef je niet steeds opnieuw uit te leggen waar je mee bezig bent." _[Klik op New Project]_ "Je geeft het project een naam, en je kunt instructies toevoegen die alleen voor dit project gelden. Plus: je kunt bestanden uploaden die ChatGPT kan gebruiken als context." "En hier is het mooie: Projects hebben hun eigen geheugen. Chats binnen een project onthouden wat je eerder hebt besproken. Dat is anders dan normale chats, die elke keer met een schone lei beginnen." _[Met nadruk]_ "Op de gratis tier kun je 5 bestanden per project uploaden. Dat is ruim voldoende voor wat we vandaag doen." --- ### Slide 22: Praktijk Oefening **[62:00 - 67:00]** _(5 minuten - studenten werken)_ "Oké, nu gaan jullie je ChatGPT instellen. Dit is belangrijk, want we gaan dit straks gebruiken voor de v0.dev demo." _[Wijs naar de instructies op de slide]_ "Twee dingen wil ik dat je doet:" "Een: ga naar Settings, dan Personalisatie, en vul je Custom Instructions in. Schrijf iets als: 'Ik ben een frontend developer. Ik werk met React en Tailwind CSS.' Dit zorgt dat ChatGPT altijd weet welke technologie je gebruikt." "Twee: maak je eerste Project. Klik op 'New Project' in de zijbalk. Noem het 'Les 1 - v0.dev Prompt Engineer'. En voeg als instructie toe: 'Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React en Tailwind CSS componenten.'" _[Geef 5 minuten - loop rond en help waar nodig]_ "Dit project gaan we straks gebruiken! Als we schetsen uploaden, doet ChatGPT precies wat we nodig hebben voor v0.dev." _[Check of iedereen klaar is]_ "Heeft iedereen een project aangemaakt? Mooi, dan gaan we verder met prompt engineering." --- ## BLOK 5: PROMPT ENGINEERING (12 minuten) ### Slide 23: Wat is Prompt Engineering? **[64:00 - 66:00]** _(2 minuten)_ "Nu komen we bij een cruciaal onderdeel: prompt engineering." "Een prompt is simpelweg de instructie die je aan AI geeft. De vraag die je stelt, de opdracht die je geeft." "En hier is het belangrijke inzicht dat alles verandert: de kwaliteit van je antwoord hangt direct af van de kwaliteit van je vraag." "Garbage in, garbage out. Als je een vage vraag stelt, krijg je een vaag antwoord. Als je specifiek bent, krijg je specifieke, bruikbare output." "Dit is een vaardigheid - en net als elke vaardigheid kun je het leren." --- ### Slide 24: Slechte vs Goede Prompt **[66:00 - 69:00]** _(3 minuten)_ "Laat me het verschil laten zien." _[Wijs naar de slechte prompt]_ _[INTERACTIE: Analyseren]_ "Hier staat een prompt: 'Maak een button'. Wat is hier mis mee? Wat ontbreekt er?" _[Laat studenten antwoorden - verwacht: geen kleur, geen taal, geen stijl, geen grootte]_ "Precies! Dit is wat de meeste mensen doen. Drie woorden." "**Waarom is dit slecht?** De AI weet niet:" - "Welke programmeertaal? HTML, React, Vue, Angular - allemaal anders" - "Welke stijl? Rond, vierkant, met schaduw?" - "Welke kleur? Blauw, rood, gradient?" - "Hoe groot? Klein voor mobiel, groot voor desktop?" "De AI moet alles gokken. En gokken leidt tot generieke output die je toch moet aanpassen. Je verliest tijd." _[Wijs naar de goede prompt]_ "En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling met een blauwe achtergrond (#2563EB). Include hover state en een loading state met een spinner.'" "Zie je het verschil? Je specificeert de technologie, de styling, de features. De AI weet precies wat je wilt." _[Demonstreer live als tijd het toelaat]_ "Het resultaat? Bruikbare code die je direct in je project kunt zetten." --- ### Slide 25: Prompt Framework **[69:00 - 71:00]** _(2 minuten)_ "Er is een framework dat helpt. Vier elementen die je kunt gebruiken." _[Wijs naar elk element]_ "Eén: Rol. Vertel de AI wie hij is. 'Je bent een senior frontend developer met 10 jaar ervaring.'" "Twee: Context. Geef achtergrondinformatie. 'Je werkt aan een SaaS landingspagina voor een projectmanagement tool.'" "Drie: Taak. Wat moet er gebeuren. 'Maak een hero section met een headline, subtitel, en call-to-action button.'" "Vier: Format. Hoe moet de output eruit zien. 'Gebruik React en Tailwind CSS. Geef alleen de code, geen uitleg.'" _[INTERACTIE: Discussie]_ "Welk van deze vier elementen vinden jullie het belangrijkst? Rol, context, taak, of format?" _[Laat handopsteken per optie, vraag 1-2 mensen om hun keuze te verdedigen]_ "Interessante keuzes! Laat me uitleggen hoe elk element bijdraagt:" "**Taak** is het enige verplichte element - zonder taak weet de AI niet wat hij moet doen. Maar alleen een taak geeft vaak generieke output." "**Context** maakt vaak het grootste verschil. 'Maak een button' vs 'Maak een button voor een medische app waar oudere gebruikers op moeten klikken' - heel andere output." "**Rol** helpt de AI de juiste 'stem' te vinden. Een senior developer geeft andere code dan een beginner. Een copywriter schrijft anders dan een technisch schrijver." "**Format** voorkomt dat je output moet herschrijven. 'Geef alleen code' scheelt je tijd." "De combinatie is krachtig. Je hoeft niet altijd alle vier te gebruiken, maar hoe meer context, hoe beter het resultaat." --- ### Slide 26: Tech Stack Specificeren **[71:00 - 73:00]** _(2 minuten)_ "Nu iets dat jullie moeten begrijpen voor deze cursus: tech stack specificeren." "Wat is een tech stack? De technologieën waarmee je bouwt. Voor deze cursus gebruiken we React met Next.js en Tailwind CSS." "Waarom is dit belangrijk om te specificeren? Als je tegen AI zegt 'maak een button', weet hij niet of je HTML wilt, React, Vue, Angular, Svelte... Er zijn tientallen opties." "Door expliciet te zeggen 'React met Tailwind CSS' krijg je code die je direct kunt gebruiken." _[Met nadruk]_ "En goed nieuws: v0.dev, de tool die we straks gebruiken, genereert automatisch React met Tailwind. Maar in ChatGPT moet je het wel specificeren!" --- ### Slide 27: Kleuren en Look & Feel **[73:00 - 75:00]** _(2 minuten)_ "Het volgende dat je moet specificeren: kleuren en stijl." _[Loop door de opties]_ "Kleuren kun je meegeven op twee manieren. Exact met hex codes: '#2563EB voor primary blue'. Of beschrijvend: 'warm oranje thema met aarde-tinten'." "Stijl beschrijf je met woorden: modern, minimalistisch, speels, corporate, brutalist, retro..." "En je kunt referenties gebruiken. 'In de stijl van Stripe.com' of 'vergelijkbaar met de Apple website'. Dat vertelt de AI heel veel in weinig woorden." "Een complete specificatie: 'Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. Clean met veel whitespace. Geschikt voor een B2B SaaS startup.'" --- ### Slide 28: Prompting Tips **[75:00 - 76:00]** _(1 minuut)_ "Even de tips op een rij voor we verder gaan:" "Geef een rol. Wees specifiek. Specificeer je tech stack. Beschrijf de look & feel. Geef voorbeelden als je kunt. En itereer - je eerste prompt is zelden perfect." "Onthoud: garbage in, garbage out. Investeer in je prompt." --- ## BLOK 6: LIVE DEMO V0.DEV (25 minuten) ### Slide 29: Introductie v0.dev **[76:00 - 79:00]** _(3 minuten)_ _[Energieke toon]_ "Nu wordt het echt leuk. We gaan kijken naar v0.dev." "Dit is een tool van Vercel - het bedrijf achter Next.js, een populair React framework. En het is een gamechanger voor UI development." _[Open v0.dev op je scherm]_ "Wat doet v0? Je beschrijft wat je wilt in tekst, of je uploadt een afbeelding, en v0 genereert werkende React code met Tailwind CSS. Je ziet direct een preview. En je kunt het direct deployen naar het internet." "Maar de slimme workflow die ik jullie vandaag leer combineert ChatGPT en v0. En daar zit de magie." --- ### Slide 30: De Slimme Workflow **[79:00 - 82:00]** _(3 minuten)_ _[Wijs naar het diagram]_ "Dit is de workflow. Vijf stappen. Simpel maar krachtig." "Stap één: je TEKENT je idee op papier. Gewoon pen en papier, zoals vroeger." "Stap twee: je maakt een FOTO van je tekening met je telefoon." "Stap drie: je uploadt die foto naar CHATGPT. En je beschrijft je wensen - welke technologie, welke kleuren, welke stijl." "Stap vier: ChatGPT maakt een gedetailleerde Engelse PROMPT voor je. Een perfecte beschrijving van wat je wilt." "Stap vijf: je plakt die prompt in V0.DEV en je krijgt een werkende website!" _[Leg uit waarom]_ "Waarom doen we het zo? Twee redenen. Eén: v0 heeft beperkte gratis credits - ongeveer zeven generaties per dag. ChatGPT is onbeperkt. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts." "Twee: ChatGPT is beter in het 'vertalen' van je ruwe idee naar een gestructureerde prompt. V0 is beter in het genereren van code. Je gebruikt elk tool waar het goed in is." --- ### Slide 31: Live Demo **[82:00 - 97:00]** _(15 minuten)_ _[Pak pen en papier - dit is live!]_ "Oké, ik ga dit nu live doen. Kijk mee." **Stap 1: Tekenen** _[Teken terwijl je praat]_ "Ik teken een simpele hero section. Links tekstvak voor headline, daaronder button. Rechts een vierkant met X - placeholder voor afbeelding." _[Toon je tekening]_ "Het hoeft niet mooi te zijn. Blokken en lijnen zijn genoeg. Het gaat om de layout." **Stap 2: Foto naar ChatGPT** _[Maak foto en upload naar ChatGPT Project]_ "Foto maken... uploaden naar mijn ChatGPT Project... en nu mijn beschrijving:" "Dit is een schets voor een hero section. Beschrijf als v0.dev prompt. Tech stack: React + Tailwind. Kleuren: blauw thema #2563EB. Stijl: modern, minimalistisch." _[Wacht op response]_ "Kijk - ChatGPT maakt een gedetailleerde Engelse prompt. Precies wat v0 nodig heeft." **Stap 3: v0.dev** _[Kopieer prompt naar v0.dev]_ "Prompt kopiëren... plakken in v0... genereren..." _[Resultaat verschijnt]_ "En daar is het! Hero section met de kleuren en stijl die ik specificeerde. De code is clean React met Tailwind." **Stap 4: Itereren** _[Typ een follow-up]_ "Nu itereren: 'Make the button larger with hover animation.'" _[Wacht op generatie]_ "Kijk - aangepast. Dát is de kracht: in gesprek gaan met de AI." **Belangrijk:** Deployment laat ik NIET zien - dat gaan jullie straks zelf uitzoeken! --- ### Slide 32: Hoe deploy je naar Vercel? **[97:00 - 99:00]** _(2 minuten)_ "Laatste vraag: hoe krijg je dit online? Dat ga ik jullie nu uitleggen, maar niet voordoen." _[Wijs naar de interface]_ "In v0 zie je een optie om te deployen. Je klikt op 'Add Integration', koppelt je GitHub account, en v0 maakt automatisch een repository aan. Dan deployt Vercel je code - binnen een minuut heb je een live URL." _[Met nadruk]_ "Maar dit ga ik niet live doen. Waarom niet? Omdat jullie dit straks zelf gaan uitzoeken. Dat is onderdeel van de opdracht. Het is niet moeilijk, en je leert meer door het zelf te doen." "Van een tekening op papier naar een live website. Dat is de kracht van deze workflow. En straks gaan jullie dat bewijzen." --- ## BLOK 7: HANDS-ON OPDRACHT (53 minuten) ### Slide 33: Aan de slag! **[99:00 - 150:00]** _(51 minuten - 5 min uitleg + 46 min werken)_ _[Pak papier en pennen - deel uit als nodig]_ "Nu zijn jullie aan de beurt. Jullie gaan een complete landingspagina bouwen - groter dan mijn demo." _[Wijs naar de vereisten]_ "Vereisten: minimaal drie secties, één carousel, één accordion. Je bent vrij in wat je tekent - bedenk een fictief product." "Stappen: teken, foto, ChatGPT Project, v0.dev, deploy naar Vercel. Die laatste stap zoek je zelf uit." "Je hebt 45 minuten. Begin met tekenen! Succes!" _[Studenten werken - loop actief rond]_ **Let op deze problemen:** - Tekenstap overslaan? → Terug naar papier - Te weinig secties? → Herinner aan 3+ vereiste - Carousel/accordion vergeten? → Check schets - v0 rate limit? → Wachten of delen met klasgenoot - Deployment? → Eerst Googlen, dan pas helpen **Tussentijdse check [125:00]:** "Snelle check: wie heeft 3+ secties? Carousel en accordion in de schets? Nog 25 minuten - begin met deployen als je v0 resultaat hebt." _[Studenten werken door tot 150:00]_ --- ## BLOK 8: AFSLUITING (15 minuten) ### Slide 34: Resultaten Delen **[150:00 - 158:00]** _(8 minuten)_ "Oké, tijd om af te ronden. Wie wil zijn resultaat laten zien?" _[Laat 2-3 studenten hun scherm delen en kort presenteren]_ "Wat was je oorspronkelijke idee? Laat je schets zien. En wat heeft v0 ervan gemaakt?" _[Geef korte positieve feedback per student]_ --- ### Slide 35: Samenvatting **[158:00 - 162:00]** _(4 minuten)_ "Laten we even terugkijken naar wat jullie vandaag hebben geleerd." "We begonnen met de theorie: hoe LLMs werken, next-token prediction, en waarom hallucinaties bestaan." "We hebben ChatGPT praktisch verkend: de interface, afbeeldingen uploaden, Custom Instructions." "We hebben prompt engineering gehad: het belang van specificiteit, tech stack, kleuren en stijl meegeven." _[Met nadruk]_ "En het belangrijkste: jullie hebben de workflow geleerd en toegepast. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet." "Jullie zijn developers die AI tools kunnen gebruiken. Dat is wat deze eerste les jullie heeft gegeven." --- ### Slide 36: Huiswerk **[162:00 - 167:00]** _(5 minuten)_ "Voor volgende week heb je twee opdrachten. Inleveren via Teams." _[Wijs naar de slide]_ "Eén: een reflectie van 500 woorden. Ik geef je drie deelvragen om je op weg te helpen." "Wat vond je verrassend aan werken met AI? Wat ging goed en wat vond je lastig? En hoe zie je AI jouw werk als developer veranderen?" "Dit hoeft geen essay te zijn - gewoon eerlijk nadenken over je ervaring vandaag." _[Wijs naar opdracht 2]_ "Twee: breid je v0 website uit. Voeg minimaal één nieuwe sectie toe. Dat kan pricing zijn, features, een contact formulier, een footer - kies zelf." "Gebruik dezelfde workflow: teken eerst, dan ChatGPT, dan v0. Lever screenshots in én je Vercel URL." "Deadline: voor de volgende les." "Vragen? Nee? Dan bedankt voor jullie inzet. Jullie hebben een website gebouwd die begon als een tekening. Tot volgende week!" _[Einde les]_ --- ## APPENDIX: Timing Overzicht | Blok | Onderwerp | Start | Eind | Duur | | ---- | ---------------------- | ----- | ---- | ------ | | 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min | | 2 | Wat is AI? | 0:13 | 0:28 | 15 min | | 3 | AI Landscape | 0:28 | 0:38 | 10 min | | 4 | ChatGPT in de Praktijk | 0:38 | 1:00 | 22 min | | 5 | Prompt Engineering | 1:00 | 1:12 | 12 min | | 6 | Live Demo v0.dev | 1:12 | 1:37 | 25 min | | 7 | Hands-on Opdracht | 1:37 | 2:30 | 53 min | | 8 | Afsluiting | 2:30 | 3:00 | 30 min | **Spreektijd docent (Blok 1-6):** ~55 minuten **Hands-on + Afsluiting:** ~83 minuten **Totaal:** 180 minuten (3 uur) --- ## Tips voor de docent 1. **Papier en pennen** - Neem extra mee. Dit is cruciaal voor de workflow. 2. **Benadruk dat tekenen NIET mooi hoeft** - Studenten zijn vaak onzeker. Blokken en lijnen zijn genoeg. 3. **De ChatGPT prompt is de sleutel** - Loop rond en check of studenten volledige specificaties meegeven. 4. **Heb backup klaar** - Screenshots van je demo voor als v0 traag is. 5. **Tempo aanpassen** - Als de groep snel is, kun je meer tijd voor hands-on geven. Als ze trager zijn, kort de demo in. 6. **Actief rondlopen** - Tijdens de opdracht, help proactief. --- ## Checklist voor prompts Laat studenten dit checken in hun ChatGPT prompt: | Element | Voorbeeld | | ---------- | -------------------------- | | Tech stack | "React met Tailwind CSS" | | Kleuren | "#2563EB" of "warm oranje" | | Stijl | "Modern, minimalistisch" | | Doel | "SaaS landingspagina" |