15 KiB
Les 1: Introductie tot AI en Large Language Models
Slide Overzicht (3 uur les)
Spreektijd docent: ~55 minuten Demo v0.dev: ~25 minuten Hands-on opdracht: ~50 minuten Afsluiting + buffer: ~30 minuten
BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
Slide 1: Titelslide
(30 seconden)
Titel: Introductie tot AI en Large Language Models Subtitel: AI Development - Les 1 Docent: Tim Rijkse Datum: [Datum invullen]
Slide 2: Planning
(1,5 minuut)
Titel: Wat gaan we vandaag doen?
Inhoud:
| Tijd | Onderwerp |
|---|---|
| 09:00 - 09:15 | Welkom & voorstelrondje |
| 09:15 - 09:40 | Wat is AI? LLMs, hallucinaties, tools |
| 09:40 - 10:00 | ChatGPT in de praktijk |
| 10:00 - 10:15 | Prompt Engineering |
| 10:15 - 10:40 | Live demo: Van schets naar website |
| 10:40 - 11:30 | Jullie aan de slag! |
| 11:30 - 12:00 | Resultaten delen & huiswerk |
Einddoel: Van een tekening op papier naar een live website!
Slide 3: Voorstellen docent
(1,5 minuut)
Titel: Even voorstellen
Inhoud:
- Naam: Tim Rijkse
- Developer + AI docent bij NOVI
- Dagelijks bezig met AI-assisted development
- Bereikbaar via Teams
Slide 4: Kennismaking
(5 minuten - studenten aan het woord)
Titel: Wie zijn jullie?
Inhoud:
- Naam
- Achtergrond (werk/studie)
- Heb je al eens ChatGPT of andere AI-tools gebruikt?
- Zo ja, waarvoor?
Slide 5: De Leerlijn AI Developer
(2 minuten)
Titel: 18 weken, 4 delen, 30 EC
Inhoud:
| Deel | Lessen | EC | Focus |
|---|---|---|---|
| 1: AI Foundations | 1-4 | 7 | AI basics, tools, ethics, prompting |
| 2: Technical Foundations | 5-9 | 8 | TypeScript, Next.js, databases, Supabase |
| 3: AI Tooling & Prototyping | 10-12 | 5 | Tool selectie, prototyping, Cursor |
| 4: Advanced AI Features | 13-18 | 10 | Agents, MCP, AI SDK, deployment |
Eindresultaat: Complete full-stack applicatie met AI
Slide 6: Accounts Check
(2,5 minuten)
Titel: Heb je deze accounts?
Inhoud:
- ✅ ChatGPT account (chat.openai.com) - gratis
- ✅ GitHub account (github.com) - gratis
- ✅ Vercel account (vercel.com) - gratis, koppel met GitHub
Actie: Maak nu aan als je ze nog niet hebt!
BLOK 2: WAT IS AI? (15 minuten)
Slide 7: Wat is Artificial Intelligence?
(3 minuten)
Titel: AI - Meer dan een buzzword
Inhoud:
Definitie: Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen
Typen AI:
- Narrow AI (wat we nu hebben): specifieke taken
- General AI (toekomst): breed menselijk denken
Voorbeelden:
- Aanbevelingen (Netflix, Spotify)
- Spraakassistenten (Siri, Alexa)
- Code generatie (ChatGPT, Copilot)
Slide 8: Hoe werken Large Language Models?
(4 minuten)
Titel: De magie achter ChatGPT
Inhoud:
- Training: Model leest miljarden teksten
- Patroonherkenning: Leert statistische verbanden
- Voorspelling: Voorspelt het volgende woord
- Output: Genereert tekst token voor token
Belangrijk inzicht:
- LLMs "begrijpen" niet echt - ze voorspellen
- Geen bewustzijn, geen intentie
- Geavanceerde patroonherkenning op enorme schaal
Slide 9: Tokens & Next-Token Prediction
(4 minuten)
Titel: Hoe "denkt" een LLM?
Inhoud:
Stap 1: Tekst → Tokens (nummers)
"Ik drink koffie" → [1847, 5621, 8934]
Elk woord (of woorddeel) krijgt een nummer.
Stap 2: Betekenis in getallen Woorden met vergelijkbare betekenis liggen dicht bij elkaar:
- "koffie" en "thee" → dichtbij
- "staal" en "metaal" → dichtbij
- "koffie" en "fiets" → ver uit elkaar
Stap 3: Voorspel het volgende token
"Ik drink koffie met ___"
Het model berekent kansen:
- "melk" → 45%
- "suiker" → 30%
- "een" → 15%
→ Kiest waarschijnlijk "melk" (maar niet altijd!)
Dit verklaart:
- Waarom het soms briljant is (patronen herkend)
- Waarom het soms onzin produceert (verkeerde voorspelling)
- Waarom dezelfde vraag verschillende antwoorden geeft (kans, niet zekerheid)
Slide 10: Hallucinaties
(5 minuten)
Titel: Waarom AI soms "liegt"
Inhoud:
Wat zijn hallucinaties?
- AI verzint informatie die niet bestaat
- Klinkt heel overtuigend
- Grammaticaal perfect, maar feitelijk onjuist
Voorbeelden:
- Fake wetenschappelijke papers met echte-klinkende titels
- Niet-bestaande npm packages met installatie-instructies
- Verzonnen restaurants met adressen
Waarom gebeurt dit? Het model voorspelt wat LIJKT op correcte output, niet wat WAAR is.
Regel: Verifieer altijd! Vertrouw, maar check.
BLOK 3: HET AI-LANDSCHAP (10 minuten)
Slide 11: De Grote Spelers
(3 minuten)
Titel: Welke AI tools zijn er?
Inhoud:
| Tool | Bedrijf | Sterk in |
|---|---|---|
| ChatGPT | OpenAI | Algemeen, code, creatief |
| Claude | Anthropic | Lange teksten, nuance |
| Gemini | Google integratie | |
| Grok | xAI | Actueel nieuws (X/Twitter) |
Vandaag: Focus op ChatGPT - meest toegankelijk.
Slide 12: Gratis vs Betaald
(3 minuten)
Titel: Heb je de betaalde versie nodig?
Inhoud:
| Gratis | Betaald ($20/maand) | |
|---|---|---|
| Model | GPT-4o (goed!) | GPT-4 (beste) |
| Snelheid | Langzamer bij drukte | Prioriteit |
| Limieten | ~10-15 berichten/3u | 40+ berichten/3u |
Voor deze cursus: Gratis is voldoende!
Slide 13: Welke tool voor welke taak?
(4 minuten)
Titel: Snelle vergelijking
Inhoud:
| Taak | Beste keuze |
|---|---|
| Snelle code snippets | ChatGPT of Claude |
| Lange documenten | Claude (200K context) |
| Actueel nieuws | Grok of Perplexity |
| UI componenten | v0.dev (straks!) |
Tip: Professionele developers gebruiken meerdere tools!
BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten)
Slide 14: ChatGPT Interface
(3 minuten)
Titel: Laten we ChatGPT openen
Inhoud:
[Live demonstratie - open chat.openai.com]
Wat je ziet:
- Chatvenster (midden)
- Chat geschiedenis (links)
- Model kiezen (bovenaan)
- Instellingen (rechtsonder)
Actie: Open nu ChatGPT op je laptop!
Slide 15: Model Kiezen
(2 minuten)
Titel: Welk model gebruik je?
Inhoud:
In ChatGPT kun je kiezen:
- GPT-4o - Standaard, snel, gratis
- GPT-4o with canvas - Voor documenten bewerken
- GPT-4 - Meest krachtig (betaald)
Tip: GPT-4o is voor de meeste taken prima!
Slide 16: Tijdelijke Chat
(2 minuten)
Titel: Privacy: Tijdelijke Chat
Inhoud:
Wat is tijdelijke chat?
- Chat wordt NIET opgeslagen
- Wordt NIET gebruikt om model te trainen
Wanneer gebruiken?
- Gevoelige informatie
- Werk-gerelateerde data
- Client gegevens
Slide 17: Afbeeldingen Analyseren
(5 minuten)
Titel: Image-to-Text - Cruciaal voor onze workflow!
Inhoud:
Wat kun je doen?
- Foto uploaden en vragen stellen
- Screenshot laten analyseren
- Schets laten interpreteren ← Dit gebruiken we straks!
Hoe werkt het?
- Klik op 📎 (paperclip)
- Upload afbeelding
- Stel je vraag
[Live demonstratie met een schets]
Slide 18: Bestanden Uploaden
(2 minuten)
Titel: PDF's en documenten
Inhoud:
ChatGPT kan:
- PDF's lezen en samenvatten
- Word documenten analyseren
- Code bestanden reviewen
- Spreadsheets interpreteren
Limiet: ~50 pagina's per document
Slide 19: Custom Instructions
(3 minuten)
Titel: ChatGPT Personaliseren
Inhoud:
Wat zijn Custom Instructions?
- Permanente instructies die ChatGPT onthoudt
- Zit in Instellingen → Personalisatie
Handige voorbeelden:
- "Ik ben een frontend developer, gebruik React en Tailwind"
- "Antwoord in het Nederlands tenzij ik Engels vraag"
- "Geef code voorbeelden met TypeScript"
Slide 20: Het Geheugen
(1 minuut)
Titel: Wat onthoudt ChatGPT?
Inhoud:
Onthoudt wel:
- Eerdere chats (tenzij tijdelijk)
- Custom instructions
Onthoudt NIET:
- Automatisch context uit andere chats
- Wat je in andere sessies zei
Tip: Start nieuwe chat voor nieuw onderwerp!
Slide 21: Praktijk Oefening
(4 minuten - studenten werken)
Titel: Probeer het zelf!
Inhoud:
Opdracht (4 minuten):
- Start een nieuwe chat
- Stel een vraag
- Upload een afbeelding (foto van iets op je bureau)
- Bekijk waar Custom Instructions staan
BLOK 5: PROMPT ENGINEERING (12 minuten)
Slide 22: Wat is Prompt Engineering?
(2 minuten)
Titel: De kunst van het vragen stellen
Inhoud:
Een prompt is: De instructie die je aan AI geeft
Waarom belangrijk?
- Goede prompt = bruikbaar resultaat
- Slechte prompt = frustratie
Garbage in = garbage out!
Slide 23: Slechte vs Goede Prompt
(3 minuten)
Titel: Het verschil zien
Slechte prompt:
"Maak een button"
Goede prompt:
"Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner."
Waarom beter?
- Specificeert technologie
- Beschrijft features
- Geeft visuele details
Slide 24: Prompt Framework
(2 minuten)
Titel: 4 elementen van een goede prompt
Inhoud:
- Rol: "Je bent een senior frontend developer..."
- Context: "...die werkt aan een SaaS landingspagina..."
- Taak: "...maak een hero section met..."
- Format: "...gebruik React en Tailwind"
Slide 25: Tech Stack Specificeren
(2 minuten)
Titel: Vertel de AI welke technologie
Inhoud:
Voor deze cursus:
- React - JavaScript framework voor UI
- Tailwind CSS - Utility-first CSS
- Next.js - React framework
In je prompt:
"Gebruik React met Tailwind CSS"
Tip: v0.dev genereert automatisch React + Tailwind!
Slide 26: Kleuren en Look & Feel
(2 minuten)
Titel: Visuele specificaties
Inhoud:
Wat specificeren?
- Kleuren: "#2563EB" of "blauw thema"
- Stijl: "Modern, minimalistisch"
- Referenties: "In de stijl van Stripe.com"
Voorbeeld:
"Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. B2B SaaS stijl."
Slide 27: Prompting Tips
(1 minuut)
Titel: Samenvatting
Inhoud:
- Geef een rol
- Wees specifiek
- Specificeer tech stack
- Beschrijf look & feel
- Itereer - eerste poging is zelden perfect
BLOK 6: LIVE DEMO V0.DEV (25 minuten)
Slide 28: Introductie v0.dev
(3 minuten)
Titel: Van schets naar website
Inhoud:
v0.dev door Vercel:
- AI-powered UI generator
- Begrijpt tekst EN afbeeldingen
- Genereert React + Tailwind code
- Direct deploybaar
De workflow: Tekening → Foto → ChatGPT → Prompt → v0.dev → Website!
Slide 29: De Slimme Workflow
(3 minuten)
Titel: 5 stappen
Inhoud:
1. TEKEN je idee op papier
↓
2. Maak een FOTO
↓
3. Upload naar CHATGPT + beschrijf wensen
(tech stack, kleuren, stijl)
↓
4. ChatGPT maakt gedetailleerde PROMPT
↓
5. Plak in V0.DEV → Website!
Waarom ChatGPT eerst?
- v0 heeft beperkte credits (~7/dag)
- ChatGPT optimaliseert je prompt
Slide 30: Live Demo - Schets Maken
(3 minuten)
Titel: Stap 1: Tekenen
Inhoud:
[Docent tekent live op papier]
Ik teken een hero section:
- Links: titel + tekst + button
- Rechts: afbeelding placeholder
Het hoeft niet mooi te zijn! Blokken en lijnen zijn genoeg.
Slide 31: Live Demo - ChatGPT
(7 minuten)
Titel: Stap 2 & 3: Foto + Beschrijving
Inhoud:
[Docent maakt foto en upload naar ChatGPT]
Prompt:
"Dit is een schets voor een hero section.
Beschrijf dit als een prompt voor v0.dev.
Tech stack: React met Tailwind CSS Kleuren: Blauw thema, primary #2563EB Stijl: Modern, minimalistisch Doel: SaaS landingspagina voor TaskFlow"
Slide 32: Live Demo - v0.dev
(5 minuten)
Titel: Stap 4 & 5: Genereren
Inhoud:
[Docent kopieert prompt naar v0.dev]
Let op:
- Generatie duurt ~30 seconden
- Direct een preview
- Code is React + Tailwind
Slide 33: Live Demo - Itereren
(2 minuten)
Titel: Verfijnen
Inhoud:
Follow-up prompts:
- "Make the button larger with hover animation"
- "Add gradient to the background"
Dit is de kracht: In gesprek gaan met de AI!
Slide 34: Live Demo - Deployen
(2 minuten)
Titel: Live zetten
Inhoud:
- Klik "Add Integration"
- Koppel GitHub account
- v0 maakt automatisch repository
- Klik "Deploy" → Live op Vercel!
Resultaat: jouw-project.vercel.app
BLOK 7: HANDS-ON OPDRACHT (50 minuten)
Slide 35: Lesopdracht
(5 minuten uitleg)
Titel: Nu zijn jullie aan de beurt!
Inhoud:
Opdracht: Jouw tekening wordt een website!
Stappen:
- TEKEN een hero section op papier
- FOTO maken
- CHATGPT: Upload + beschrijf (tech stack, kleuren, stijl!)
- PROMPT kopiëren
- V0.DEV: Genereren
- DEPLOY: Naar Vercel
Tijd: ~45 minuten Benodigdheden: Papier, pen, ChatGPT, GitHub
Slide 36: Aan de slag!
(45 minuten - studenten werken)
Titel: Succes!
Inhoud:
Vergeet niet te specificeren:
- Tech stack: React + Tailwind
- Kleuren: hex codes of beschrijving
- Stijl: modern, minimalistisch, etc.
- Doel: waarvoor is de website?
Hulp nodig? Steek je hand op!
BLOK 8: AFSLUITING (30 minuten)
Slide 37: Resultaten Delen
(8 minuten)
Titel: Wie wil laten zien?
Inhoud:
- Laat je schets zien
- Toon het v0 resultaat
- Wat ging goed? Wat was lastig?
Slide 38: Samenvatting
(4 minuten)
Titel: Wat hebben we geleerd?
Inhoud:
✅ Hoe LLMs werken (next-token prediction) ✅ AI-landschap: ChatGPT, Claude, Gemini ✅ ChatGPT praktisch gebruiken ✅ Prompt engineering: tech stack, kleuren, stijl ✅ De workflow: Schets → ChatGPT → v0.dev → Website!
Slide 39: Huiswerk
(5 minuten)
Titel: Voor volgende week
Inhoud:
- Reflectie (500 woorden) over je AI-ervaring
- 5 use cases bedenken voor AI in development
- Tweede component bouwen via de workflow
- Kies iets anders: pricing, features, footer
- Specificeer weer: tech stack, kleuren, stijl
Inleveren: Via Teams, voor volgende les
Slide 40: Volgende Les
(1 minuut)
Titel: Les 2: AI Code Assistants
Inhoud:
- OpenCode Desktop App
- AI-geïntegreerde development
- Van chat naar echte IDE
Voorbereiding: Huiswerk af!
Slide 41: Vragen & Afsluiting
(12 minuten buffer)
Titel: Tot volgende week!
Inhoud:
Vragen?
🚀 Succes met het huiswerk!
Timing Samenvatting
| Blok | Onderwerp | Duur |
|---|---|---|
| 1 | Welkom & Introductie | 13 min |
| 2 | Wat is AI? | 15 min |
| 3 | AI Landscape | 10 min |
| 4 | ChatGPT Praktijk | 22 min |
| 5 | Prompt Engineering | 12 min |
| 6 | Demo v0.dev | 25 min |
| 7 | Hands-on Opdracht | 50 min |
| 8 | Afsluiting | 30 min |
Spreektijd (Blok 1-5): ~55 minuten Demo (Blok 6): ~25 minuten Hands-on + Afsluiting: ~80 minuten Totaal: 180 minuten (3 uur)