# Les 1 - Keynote Notes

---

## BLOK 1: WELKOM & INTRODUCTIE (15 min)

---

### Slide 1: Welkom
- Wacht tot iedereen zit
- "Welkom bij de eerste les van AI Fundamentals"
- "Neem even de tijd om je laptop klaar te leggen"

---

### Slide 2: Planning
- Loop door de tijdsblokken op de slide
- "We beginnen met theorie over AI en hoe het werkt"
- "Daarna praktisch aan de slag met ChatGPT"
- "Dan prompt engineering: hoe stel je de juiste vraag?"
- **Met nadruk:** "En dan de grote finale: van een tekening op papier naar een werkende website"
- "Jullie gaan vandaag letterlijk een website bouwen die begint als schets"

---

### Slide 3: Voorstellen
- Naam, developer, gebruik dagelijks AI-tools
- "Dit vak verandert zo snel - wat vandaag cutting edge is, kan over 3 maanden achterhaald zijn"
- "2x per week les, bereikbaar via Teams"

---

### Slide 4: Kennismaking (5 min studenten)
- "Vertel kort je naam"
- "Heb je al eens ChatGPT of andere AI-tool gebruikt? Waarvoor?"
- Laat iedereen kort reageren
- "Mooi, de meesten hebben al met AI gewerkt - goed startpunt"

---

### Slide 5: Leerlijn overzicht
- "18 weken, 4 delen"
- **Deel 1 (les 1-4):** AI Foundations - basis, ChatGPT, OpenCode
- **Deel 2 (les 5-9):** Technical Foundations - TypeScript, Next.js, Supabase
- **Deel 3 (les 10-12):** AI Tooling - welke tool wanneer, prototypen, Cursor
- **Deel 4 (les 13-18):** Advanced - AI agents, Vercel AI SDK, eindproject
- "Maar dat is ver weg - vandaag: de basis en de workflow"

---

### Slide 6: Accounts check
- "Drie accounts nodig vandaag"
- **ChatGPT:** "Wie heeft dit? Wie niet? → chat.openai.com, gratis"
- **GitHub:** "Waar developers code opslaan - nodig voor deployen"
- **Vercel:** "Hier komt je website live te staan - vercel.com, koppel met GitHub"
- Geef 2 minuten om aan te maken
- "Iedereen zover? Alle drie? Mooi, dan gaan we de diepte in"

---

## BLOK 2: WAT IS AI? (25 min)

---

### Slide 7: Wat is AI?
- "Wat ís eigenlijk AI?"
- **🎤 INTERACTIE:** "Noem eens voorbeelden van AI die je vandaag al hebt gebruikt?"
  - **Spotify/Netflix:** "Analyseert je gedrag, voorspelt wat je leuk vindt"
  - **Google Maps:** "Voorspelt verkeer, berekent snelste route"
  - **Autocorrect:** "Letterlijk next-word prediction, zoals ChatGPT"
  - **Gezichtsherkenning:** "Patroonherkenning in pixels"
  - **Als niemand antwoordt:** "Je telefoon vanochtend - getypt? Autocorrect. Route? Google Maps. Muziek? Spotify kiest voor je. Allemaal AI."
- AI = computersystemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is
- Patronen herkennen, beslissingen nemen, taal begrijpen en genereren
- **Narrow AI (Weak AI):** goed in één specifieke taak - ChatGPT is hier een voorbeeld
- **General AI (Strong AI):** alles kunnen wat mens kan - bestaat nog niet
- "Wat we vandaag gebruiken is Narrow AI - heel krachtig, maar beperkt tot specifieke taken"

---

### Slide 8: Hoe werken LLMs?
- "Hoe werkt ChatGPT eigenlijk?"
- **🎤 INTERACTIE:** "Wat denken jullie dat er gebeurt als je iets typt?"
  - **Kort antwoord:** "Het voorspelt steeds het volgende woord. Meer niet. Maar het doet dat zó goed dat het lijkt alsof het 'denkt'."
- LLM = Large Language Model
- Getraind op miljarden pagina's tekst - boeken, websites, Wikipedia, code
- **Kernvraag die het geleerd heeft:** "Als ik deze woorden zie, wat is het meest waarschijnlijke volgende woord?"
- ChatGPT, Claude, Gemini = voorspelmachines
- Token voor token voorspellen wat er daarna komt
- "Het lijkt alsof ze begrijpen wat je zegt, maar er zit geen bewustzijn in"
- "Geavanceerde statistische patroonherkenning op ongekende schaal"
- **🎤 INTERACTIE:** "Als LLMs alleen maar voorspellen, hoe kunnen ze dan creatieve ideeën genereren?"
  - **HOW:** Model heeft miljarden teksten gelezen met concepten naast elkaar. 'Koffie' bij 'ochtend', 'strand' bij 'zon'. Vraag je 'café op Mars' → combineert patronen van beide.
  - **WHY voelt het creatief?** Combinatie is nieuw voor jou, ook al zijn losse onderdelen dat niet. Geen echte intentie/inspiratie, maar mixt kennis op nieuwe manieren.

---

### Slide 9: Tokens uitleg
- Tekst wordt omgezet naar nummers = tokens
- "Ik drink koffie" wordt [1847, 5621, 8934]
- Woorden met vergelijkbare betekenis liggen dicht bij elkaar
- "koffie" en "thee" = dichtbij / "koffie" en "fiets" = ver uit elkaar
- **Voorbeeld:** "Ik drink koffie met..." → wat komt er? → "melk" of "suiker"
- Model berekent kans per woord, kiest (meestal) meest waarschijnlijke
- **🎤 INTERACTIE:** "Als je ChatGPT 10x dezelfde vraag stelt, krijg je dan 10x hetzelfde antwoord?" (handopsteken ja/nee)
  - **Antwoord: Nee!** Er zit bewust randomness in = temperatuur parameter
  - **Wat is temperatuur?** Model berekent: 'melk' 60%, 'suiker' 35%, 'room' 5%. Lage temp → kiest altijd 'melk'. Hoge temp → gooit dobbelsteen, kiest soms 'suiker'
  - **Waarom?** Anders steeds exact hetzelfde = robotachtig. Variatie maakt het menselijker/creatiever
- "Dit verklaart waarom je soms briljante antwoorden krijgt en soms onzin"

---

### Slide 10: Hallucinaties ⚠️
- **Belangrijk begrip!**
- AI kan dingen verzinnen - compleet uit de lucht gegrepen
- Klinkt heel overtuigend, grammaticaal perfect
- **Voorbeelden:**
  - Wetenschappelijk paper dat niet bestaat (titel, auteurs, jaar, samenvatting)
  - npm package dat nooit heeft bestaan
  - Restaurants met verzonnen namen en adressen
- **Waarom?** Model voorspelt wat WAARSCHIJNLIJK is, controleert niet of het WAAR is
- **Praktisch:** Verifieer altijd! Kopieer nooit blindelings code. Check of libraries bestaan. Test je code.
- **🎤 INTERACTIE:** "Hoe herken je een hallucinatie? Wat zijn rode vlaggen?"
  - **Té specifieke details** (cijfers, datums, namen) → WHY: vult gaten met wat 'waarschijnlijk' klinkt
  - **Bronnen die niet te vinden zijn** → WHY: genereert tekst die LIJKT op bronvermelding
  - **Onbekende npm packages** → "Ik heb zelf meegemaakt dat ChatGPT bleef volhouden dat een package bestond, zelfs 'documentatie' genereerde, terwijl code steeds errors gaf!"
  - **Verdacht zelfverzekerd over obscure onderwerpen** → WHY: weet niet wat het niet weet
- "AI is een tool, geen orakel. Behandel het als een enthousiaste junior die soms dingen verzint"
- **Regel: Vertrouw, maar verifieer!**
- **🎤 INTERACTIE:** "Wie heeft dit zelf meegemaakt? Dat ChatGPT iets verzon?" (laat 2-3 studenten ervaring delen)

---

### Slide 11: De Grote Spelers
- **ChatGPT (OpenAI):** bekendste, maakte AI mainstream
- **Claude (Anthropic):** minder bekend, technisch heel sterk, goed voor lange documenten
- **Gemini (Google):** geïntegreerd in Google ecosysteem
- **Grok (xAI/Elon Musk):** in X, real-time informatie
- "Vandaag focus op ChatGPT - meest toegankelijk, beste gratis tier"
- "Concepten zijn toepasbaar op allemaal"

---

### Slide 12: Gratis AI Opties
- "Moet je betalen voor AI?"
- **🎤 INTERACTIE:** "Wie betaalt er al voor een AI tool? ChatGPT Plus, Claude Pro?" (tel handen, vraag 1-2 waarom) - "En de rest - waarom niet?" (verwacht: gratis werkt prima, te duur, weet niet wat je extra krijgt)
- "Voor deze cursus hoef je niks te betalen!"
- **ChatGPT Free:** GPT-5, afbeeldingen uploaden, documenten, code
- **Claude Free:** Sonnet 3.5, uitstekend voor lange teksten
- **Gemini Free:** handig als je in Google ecosysteem zit
- **Groq:** gratis API met Llama 3.3, ongelooflijk snel
- **Ollama:** draait lokaal op je laptop, data verlaat je computer nooit → privacy!
- "Voor later: als je met klantdata werkt, is Ollama je vriend"
- **Conclusie: gratis is voldoende voor deze cursus!**

---

### Slide 13: Betaald & Premium
- **~$20/maand (ChatGPT Plus / Claude Pro):**
  - Meer berichten, sneller, premium features
  - Voldoende voor professioneel gebruik
- **Premium tier - Claude Opus:**
  - Beste model voor complexe redenering
  - ~$75/maand via API bij intensief gebruik
  - Voor als je echt vastloopt
- **Advies:** Start gratis → upgrade naar Plus/Pro als je limieten raakt → Opus voor moeilijke problemen

---

### Slide 14: Welke tool voor welke taak?
- "Welke is het beste? Hangt af van wat je wilt"
- **Snelle code snippets:** ChatGPT of Claude, beide goed
- **Lange documenten:** Claude (grotere context window)
- **UI componenten:** v0.dev (straks!)
- **Privacy-gevoelig:** Ollama (lokaal)
- **Supersnel prototypen:** Groq
- **Tip:** Experimenteer met meerdere tools - elke heeft sterke/zwakke punten

---

## BLOK 3: CHATGPT PRAKTIJK (20 min)

---

### Slide 15: Interface rondleiding
- "Open allemaal ChatGPT - chat.openai.com"
- Wacht tot iedereen erin zit
- **Midden:** chatvenster - vragen en antwoorden
- **Links:** chat geschiedenis
- **Boven:** model kiezen
- **Rechtonder (profielfoto):** instellingen
- "Interface is bewust simpel - kracht zit in wat je typt"

---

### Slide 16: Model kiezen
- Kijk bovenaan je scherm
- **GPT-5:** standaard, snel, voor meeste taken genoeg
- **GPT-5 with canvas:** voor documenten bewerken, opent editor naast chat
- **GPT-5.2:** nieuwste en krachtigste (alleen Plus)
- "Voor vandaag is GPT-5 perfect"

---

### Slide 17: Tijdelijke Chat
- **Privacy feature!**
- "Temporary Chat" bij nieuwe chat
- Gesprek wordt niet opgeslagen, niet gebruikt voor training
- **🎤 INTERACTIE:** "In welke situaties zou je tijdelijke chat willen gebruiken?"
  - **Klantgegevens/bedrijfsdata** → WHY: Kan gebruikt worden voor training. Jouw data in iemand anders' antwoord = datalek
  - **Medische/persoonlijke info** → WHY: AVG/GDPR - mag niet delen met derden (OpenAI = derde partij)
  - **Interne bedrijfscode** → WHY: Intellectueel eigendom - geheime algoritme in trainingsdata
- "Tijdelijke chat voorkomt dit - niet opgeslagen, niet voor training"
- "Voor deze cursus maakt niet uit, maar onthoud voor professioneel werk"

---

### Slide 18: Afbeeldingen analyseren
- **Cruciaal voor onze workflow!**
- Klik paperclip → upload afbeelding
- Demo: upload een schets, vraag "Wat zie je? Beschrijf de layout"
- ChatGPT beschrijft precies wat hij ziet
- Dit heet image-to-text of vision
- **Dit is de sleutel:** jullie tekenen schets → foto → upload naar ChatGPT → ChatGPT vertaalt naar beschrijving voor code
- "Je hoeft geen designer te zijn - ChatGPT begrijpt ook ruwe schetsen"

---

### Slide 19: Bestanden uploaden
- PDF, Word, Excel, code bestanden
- Handig voor: documentatie analyseren, code reviewen, data uit spreadsheets
- Limiet: ~50 pagina's per document
- Meerdere bestanden tegelijk mogelijk

---

### Slide 20: Custom Instructions
- Ga naar Settings → Personalisatie
- Permanent instellen wie je bent en hoe ChatGPT moet antwoorden
- Wordt meegenomen in élke chat
- **Voorbeeld:** "Ik ben frontend developer. React en Tailwind CSS. Junior niveau. Geef praktische code voorbeelden."
- "Stel dit in vóór je begint met werken - scheelt herhaling"

---

### Slide 21: ChatGPT Projects
- **Nieuwe feature!**
- Klik "New Project" in zijbalk
- Slimme werkruimtes: chats, bestanden, specifieke instructies bij elkaar
- Handig voor: school, werk, hobby projecten apart houden
- Geef naam + instructies die alleen voor dit project gelden
- **Projects hebben eigen geheugen** - anders dan normale chats
- Gratis tier: 5 bestanden per project

---

### Slide 22: Praktijk Oefening (5 min studenten)
- **Twee dingen:**
- **1. Custom Instructions instellen:**
  - Settings → Personalisatie
  - "Ik ben frontend developer. React en Tailwind CSS."
- **2. Project aanmaken:**
  - "New Project" in zijbalk
  - Naam: "Les 1 - v0.dev Prompt Engineer"
  - Instructie: "Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React + Tailwind CSS."
- Loop rond en help
- "Dit project gebruiken we straks!"
- Check: "Heeft iedereen een project aangemaakt?"

---

## BLOK 4: PROMPT ENGINEERING (15 min)

---

### Slide 23: Wat is Prompt Engineering?
- Prompt = de instructie die je aan AI geeft
- **Cruciaal inzicht:** kwaliteit antwoord hangt af van kwaliteit vraag
- **Garbage in = garbage out**
- Vage vraag → vaag antwoord / Specifiek → specifieke, bruikbare output
- "Dit is een vaardigheid - en je kunt het leren"

---

### Slide 24: Slecht vs Goed
- **🎤 INTERACTIE:** "Hier staat: 'Maak een button'. Wat is hier mis mee?"
- **Slecht:** "Maak een button" - **WHY is dit slecht?**
  - Welke taal? HTML, React, Vue, Angular - allemaal anders
  - Welke stijl? Rond, vierkant, schaduw?
  - Welke kleur? Blauw, rood, gradient?
  - Hoe groot? Mobiel vs desktop?
  - → AI moet gokken → generieke output → jij moet aanpassen → tijdverlies
- **Goed:** "Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner."
- Je specificeert: technologie, styling, features
- Resultaat: bruikbare code die je direct kunt gebruiken

---

### Slide 25: Prompt Framework
- **4 elementen:**
- **1. Rol:** "Je bent een senior frontend developer met 10 jaar ervaring"
- **2. Context:** "Je werkt aan een SaaS landingspagina voor projectmanagement tool"
- **3. Taak:** "Maak een hero section met headline, subtitel, call-to-action button"
- **4. Format:** "Gebruik React en Tailwind CSS. Geef alleen code, geen uitleg."
- **🎤 INTERACTIE:** "Welk element vinden jullie het belangrijkst? Rol, context, taak, of format?" (handopsteken)
  - **Taak:** Enige verplichte element - zonder weet AI niet wat te doen. Maar alleen taak = generieke output
  - **Context:** Maakt vaak grootste verschil. 'Maak button' vs 'Button voor medische app, oudere gebruikers' = heel andere output
  - **Rol:** Helpt AI juiste 'stem' vinden. Senior developer ≠ beginner. Copywriter ≠ technisch schrijver
  - **Format:** Voorkomt herschrijven. 'Geef alleen code' scheelt tijd
- Combinatie is krachtig. Niet altijd alle vier nodig, maar meer context = beter resultaat

---

### Slide 26: Tech Stack specificeren
- Tech stack = de technologieën waarmee je bouwt
- **Deze cursus:** React + Next.js + Tailwind CSS
- Zonder specificatie weet AI niet: HTML? React? Vue? Angular?
- Door expliciet te zeggen "React met Tailwind CSS" → direct bruikbare code
- **v0.dev genereert automatisch React + Tailwind**
- **In ChatGPT moet je het wel specificeren!**

---

### Slide 27: Kleuren en Stijl
- **Kleuren:**
  - Exact: "#2563EB voor primary blue"
  - Beschrijvend: "warm oranje thema met aarde-tinten"
- **Stijl:** modern, minimalistisch, speels, corporate, brutalist, retro...
- **Referenties:** "In de stijl van Stripe.com" of "vergelijkbaar met Apple website"
- **Complete specificatie:** "Blauw kleurenschema #2563EB. Modern en minimalistisch. Clean met veel whitespace. B2B SaaS startup."

---

### Slide 28: Tips samenvatting
- Geef een rol
- Wees specifiek
- Specificeer tech stack
- Beschrijf look & feel
- Geef voorbeelden als je kunt
- Itereer - eerste prompt is zelden perfect
- **Onthoud: garbage in = garbage out**

---

## BLOK 5: LIVE DEMO V0.DEV (20 min)

---

### Slide 29: Intro v0.dev
- Tool van Vercel (bedrijf achter Next.js)
- **Gamechanger voor UI development**
- Beschrijf wat je wilt in tekst OF upload afbeelding
- v0 genereert werkende React + Tailwind code
- Direct preview zien
- Direct deployen naar internet
- "De slimme workflow combineert ChatGPT en v0 - daar zit de magie"

---

### Slide 30: De Workflow
- **5 stappen:**
- 1. **TEKEN** je idee op papier
- 2. **FOTO** maken met telefoon
- 3. **CHATGPT** - upload foto + beschrijf wensen (tech, kleuren, stijl)
- 4. ChatGPT maakt gedetailleerde **PROMPT**
- 5. Plak in **V0.DEV** → werkende website!
- **Waarom zo?**
  - v0 heeft beperkte credits (~7/dag), ChatGPT is onbeperkt
  - ChatGPT is beter in vertalen ruwe idee → gestructureerde prompt
  - v0 is beter in code genereren
  - "Gebruik elk tool waar het goed in is"

---

### Slide 31: LIVE DEMO (15 min)

**Stap 1: Tekenen**
- Pak pen en papier
- Teken simpele hero section
- Links: tekstvak headline, daaronder button
- Rechts: vierkant met X = placeholder afbeelding
- "Het hoeft niet mooi te zijn - blokken en lijnen zijn genoeg"

**Stap 2: Foto naar ChatGPT**
- Foto maken
- Upload naar ChatGPT Project "Les 1 - v0.dev Prompt Engineer"
- Beschrijving: "Dit is schets voor hero section. Beschrijf als v0.dev prompt. Tech: React + Tailwind. Kleuren: blauw #2563EB. Stijl: modern, minimalistisch."
- Wacht op response
- "Kijk - ChatGPT maakt gedetailleerde Engelse prompt"

**Stap 3: v0.dev**
- Prompt kopiëren
- Plakken in v0.dev
- Genereren (~30 sec wachten)
- "En daar is het! Hero section met de kleuren en stijl die ik specificeerde"

**Stap 4: Itereren**
- Follow-up: "Make the button larger with hover animation"
- Wacht op generatie
- "Kijk - aangepast. Dát is de kracht: in gesprek gaan met de AI"

**⚠️ DEPLOYMENT NIET VOORDOEN!**
- "Dit gaan jullie straks zelf uitzoeken"

---

### Slide 32: Deploy uitleg
- "Hoe krijg je dit online? Ik leg uit, maar doe niet voor"
- In v0: "Add Integration" → koppel GitHub → v0 maakt repository → Vercel deployt
- Binnen minuut: live URL
- **"Dit ga ik niet live doen - jullie zoeken dit straks zelf uit"**
- "Het is niet moeilijk, je leert meer door het zelf te doen"
- "Van tekening op papier naar live website - dat is de kracht van deze workflow"

---

## BLOK 6: HANDS-ON OPDRACHT (55 min)

---

### Slide 33: Aan de slag! (5 min uitleg + 45 min werken)

**Opdracht uitleggen:**
- "Jullie gaan een complete landingspagina bouwen - groter dan mijn demo"
- **Vereisten:**
  - Minimaal **3 secties** (hero, features, pricing, testimonials, footer...)
  - Minimaal **1 carousel** (image/testimonial slider)
  - Minimaal **1 accordion** (FAQ of uitklapbare content)
- Je bent vrij in wat je tekent - bedenk fictief product
- **Deployment: zelf uitzoeken!**

**Stappen:**
- Teken → Foto → ChatGPT Project → v0.dev → Deploy naar Vercel

**Check:** "Heeft iedereen papier en pen?"

"Je hebt 45 minuten. Begin met tekenen! Succes!"

---

**Tijdens het werken - rondlopen, let op:**
- Tekenstap overslaan? → Terug naar papier
- Te weinig secties? → Herinner aan 3+ vereiste
- Carousel/accordion vergeten? → Check hun schets
- Tech stack/kleuren/stijl vergeten in ChatGPT? → Herinner ze
- v0 rate limit? → Wachten of delen met klasgenoot
- Deployment problemen? → Eerst zelf Googlen, dan pas helpen

---

**Tussentijdse check (halverwege ~25 min):**
- "Snelle check: wie heeft 3+ secties getekend?"
- "Wie heeft carousel en accordion in de schets?"
- "Nog 25 minuten - begin met deployen als je v0 resultaat hebt!"
- "Vraag klasgenoot om hulp als je vastloopt"

---

## BLOK 7: AFSLUITING (20 min)

---

### Slide 34: Resultaten delen (8 min)
- "Wie wil zijn resultaat laten zien?"
- Laat 2-3 studenten scherm delen
- "Wat was je oorspronkelijke idee? Laat je schets zien. Wat heeft v0 ervan gemaakt?"
- Geef korte positieve feedback per student

---

### Slide 35: Samenvatting
- "Wat hebben jullie vandaag geleerd?"
- Theorie: hoe LLMs werken, next-token prediction, hallucinaties
- ChatGPT praktisch: interface, afbeeldingen uploaden, Custom Instructions, Projects
- Prompt engineering: specificiteit, tech stack, kleuren, stijl
- **"En het belangrijkste: de workflow toegepast"**
- **Schets → ChatGPT → v0.dev → live website**
- "Jullie zijn developers die AI tools kunnen gebruiken"

---

### Slide 36: Huiswerk
- "Twee opdrachten, inleveren via Teams voor volgende les"

**1. Reflectie (500 woorden)**
- Drie deelvragen als leidraad:
  - Wat vond je verrassend aan werken met AI?
  - Wat ging goed? Wat vond je lastig?
  - Hoe zie je AI jouw werk als developer veranderen?
- "Dit hoeft geen essay te zijn - gewoon eerlijk nadenken over je ervaring"

**2. Breid je v0 website uit**
- Voeg minimaal 1 nieuwe sectie toe (pricing, features, contact, footer...)
- Gebruik zelfde workflow: teken → ChatGPT → v0
- Lever in: screenshots + Vercel URL

"Vragen? Nee? Dan bedankt voor jullie inzet!"

**"Jullie hebben een website gebouwd die begon als een tekening. Tot volgende week!"**
