# Les 1: Introductie tot AI en Large Language Models

## Slide Overzicht (3 uur les)

---

## DEEL 1: WELKOM & INTRODUCTIE (13 minuten)

### Slide 1: Titelslide

**Titel:** Introductie tot AI en Large Language Models  
**Subtitel:** AI Development - Les 1  
**Docent:** Tim Rijkse  
**Datum:** 4 februari 2026

---

### Slide 2: Planning

**Titel:** Planning

**Inhoud:**
**14:00 - 14:50**
→ Welkom & kennismaking
→ Theorie: Wat is AI en LLMs
→ AI Landscape: de grote spelers

**14:50 - 15:15**
→ _Praktijk:_ ChatGPT leren gebruiken

**15:15 - 15:30**
→ Prompt Engineering basics

**15:30 - 16:00**
→ _Demo:_ Van schets naar website met v0.dev

**16:00 - 16:50**
→ _Lesopdracht:_ Jouw tekening wordt een website

**16:50 - 17:00**
→ Afsluiting & Huiswerk

---

### Slide 3: Lesoverzicht

**Titel:** Wat gaan we vandaag doen?

**Inhoud:**

- Kennismaking met elkaar en de leerlijn
- Wat is AI en hoe werken LLMs?
- Het AI-landschap: ChatGPT, Claude, Gemini
- **Hands-on: ChatGPT leren gebruiken**
- Prompt engineering: de juiste vraag stellen
- Live demo: van schets naar werkende website
- Zelf aan de slag: **jouw tekening wordt een website!**

**Leerdoel:** Na deze les kun je een schets omzetten naar een gedeployde website met AI.

---

### Slide 4: Kennismaking

**Titel:** Wie zijn jullie?

**Inhoud:**

- Naam
- Achtergrond (werk/studie)
- Ervaring met AI tools (ChatGPT, Claude, etc.)
- Wat hoop je te leren in deze leerlijn?

---

### Slide 5: De Leerlijn AI Developer

**Titel:** Wat gaan we 18 weken lang doen?

**Inhoud:**

- **Hoofdstuk 1 (Les 1-3):** AI Fundamentals - basis begrip en ethiek
- **Hoofdstuk 2 (Les 4-9):** AI Driven Development - tools en workflows
- **Hoofdstuk 3 (Les 10-18):** Full-Stack met AI - productie-klare apps bouwen

**Eindresultaat:** Je bouwt een complete full-stack applicatie met AI assistance

---

## DEEL 2: WAT IS AI? (20 minuten)

### Slide 6: Wat is Artificial Intelligence?

**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 7: Hoe werken Large Language Models?

**Titel:** De magie achter ChatGPT en Claude

**Inhoud:**

1. **Training:** Model leest miljarden teksten (boeken, websites, code)
2. **Patroonherkenning:** Leert statistische verbanden tussen woorden
3. **Voorspelling:** Voorspelt steeds het volgende woord dat "logisch" volgt
4. **Output:** Genereert tekst token voor token

**Belangrijk:**

- LLMs "begrijpen" niet echt - ze voorspellen
- Ze kunnen overtuigend klinken maar fout zijn ("hallucinaties")
- Altijd output checken!

---

### Slide 8: Next-Token Prediction

**Titel:** Hoe "denkt" een LLM?

**Inhoud:**
**Voorbeeld:** "De kat zat op de \_\_\_"

Het model berekent kansen:

- "mat" → 65%
- "stoel" → 15%
- "bank" → 10%
- "auto" → 2%

→ Kiest waarschijnlijk "mat" (maar niet altijd!)

**Dit verklaart:**

- Waarom het soms briljant is
- Waarom het soms onzin produceert
- Waarom dezelfde vraag verschillende antwoorden geeft

---

### Slide 9: Hallucinaties

**Titel:** Waarom AI soms "liegt"

**Inhoud:**
**Wat zijn hallucinaties?**

- AI verzint informatie die niet bestaat
- Klinkt heel overtuigend
- Bronnen, namen, feiten kunnen compleet verzonnen zijn

**Voorbeelden:**

- Fake wetenschappelijke papers met echte-klinkende titels
- Niet-bestaande wetten of regels
- Verzonnen statistieken

**Regel:** Verifieer altijd belangrijke informatie!

---

## DEEL 3: HET AI-LANDSCHAP (15 minuten)

### Slide 10: De Grote Spelers

**Titel:** Welke AI tools zijn er?

**Inhoud:**
| Tool | Bedrijf | Sterk in |
|------|---------|----------|
| **ChatGPT** | OpenAI | Algemeen, code, creatief |
| **Claude** | Anthropic | Lange teksten, nuance |
| **Gemini** | Google | Google integratie |
| **Grok** | xAI | Actueel nieuws (X/Twitter) |

**Vandaag focussen we op ChatGPT** - de meest gebruikte tool.

---

### Slide 11: Gratis vs Betaald

**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 |
| **Features** | Basis | DALL-E, Canvas, meer |

**Voor deze cursus:** Gratis is voldoende!

---

### Slide 12: Welke tool voor welke taak?

**Titel:** Snelle vergelijking

**Inhoud:**
| Taak | Beste keuze |
|------|-------------|
| Snelle code snippets | ChatGPT of Claude |
| Lange documenten analyseren | Claude (200K context) |
| Actueel nieuws | Grok |
| Google Docs integratie | Gemini |
| UI componenten genereren | v0.dev (straks!) |

**Tip:** Professionele developers gebruiken meerdere tools!

---

## DEEL 4: CHATGPT IN DE PRAKTIJK (25 minuten)

### Slide 13: ChatGPT Interface

**Titel:** Laten we ChatGPT openen

**Inhoud:**
_[Live demonstratie - open chat.openai.com]_

**Wat je ziet:**

- Chatvenster (midden)
- Nieuwe chat starten (linksboven)
- Chat geschiedenis (links)
- Model kiezen (bovenaan)
- Instellingen (rechtsonder)

**Actie:** Open nu ChatGPT op je laptop!

---

### Slide 14: Model Kiezen

**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!

_[Demonstreer model selector]_

---

### Slide 15: Tijdelijke Chat

**Titel:** Privacy: Tijdelijke Chat

**Inhoud:**
**Wat is tijdelijke chat?**

- Chat wordt NIET opgeslagen in je geschiedenis
- Wordt NIET gebruikt om model te trainen
- Verdwijnt na sluiten

**Wanneer gebruiken?**

- Gevoelige informatie
- Werk-gerelateerde data
- Als je niet wilt dat het wordt onthouden

_[Demonstreer: klik op naam → Temporary Chat]_

---

### Slide 16: Afbeeldingen Analyseren

**Titel:** Image-to-Text in ChatGPT

**Inhoud:**
**Wat kun je doen?**

- Foto uploaden en vragen stellen
- Screenshot laten analyseren
- **Schets laten interpreteren** ← Dit gebruiken we straks!
- Tekst uit afbeelding halen (OCR)

**Voorbeeld use cases:**

- "Beschrijf deze wireframe in detail"
- "Maak van deze schets een gedetailleerde prompt"
- "Zet deze tekening om naar specificaties"

_[Demonstreer met een schets/foto]_

---

### Slide 17: Bestanden Uploaden

**Titel:** PDF's en documenten lezen

**Inhoud:**
**ChatGPT kan:**

- PDF's lezen en samenvatten
- Word documenten analyseren
- Code bestanden reviewen
- Spreadsheets interpreteren

**Hoe?**

- Klik op 📎 (paperclip) icoon
- Sleep bestand in het chatvenster
- Of copy-paste tekst

_[Demonstreer met een kort PDF]_

---

### Slide 18: Custom Instructions

**Titel:** ChatGPT Personaliseren

**Inhoud:**
**Wat zijn Custom Instructions?**

- Permanente instructies die ChatGPT onthoudt
- Hoef je niet elke chat te herhalen
- 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"

_[Demonstreer waar dit staat]_

---

### Slide 19: Het Geheugen van ChatGPT

**Titel:** Wat onthoudt ChatGPT?

**Inhoud:**
**ChatGPT onthoudt:**

- Eerdere chats (tenzij tijdelijk)
- Custom instructions
- Dingen die je expliciet vraagt te onthouden

**ChatGPT onthoudt NIET:**

- Automatisch alles uit vorige chats
- Context na lange tijd
- Wat je in andere sessies zei

**Tip:** Start nieuwe chat voor nieuw onderwerp!

---

### Slide 20: Praktijk Oefening

**Titel:** Probeer het zelf! (5 minuten)

**Inhoud:**
**Opdracht:**

1. Open ChatGPT (chat.openai.com)
2. Start een nieuwe chat
3. Stel een vraag over een programmeerconcept
4. Upload een afbeelding en vraag wat erop staat

**Bonus:** Bekijk je Custom Instructions

_[Geef 5 minuten om te experimenteren]_

---

## DEEL 5: PROMPT ENGINEERING (15 minuten)

### Slide 21: Wat is Prompt Engineering?

**Titel:** De kunst van het vragen stellen

**Inhoud:**
**Een prompt is:** De instructie die je aan AI geeft

**Waarom belangrijk?**

- Zelfde vraag, andere formulering = totaal andere output
- Goede prompt = bruikbaar resultaat
- Slechte prompt = frustratie

**Prompt engineering = leren hoe je effectief vraagt**

---

### Slide 22: Slechte vs Goede Prompt

**Titel:** Het verschil zien

**Slechte prompt:**

> "Maak een button"

**Goede prompt:**

> "Maak een React button component met Tailwind CSS. De button moet primary styling hebben (blauw), een hover state, en een loading state met een spinner. TypeScript graag."

**Waarom beter?**

- Specificeert technologie
- Beschrijft gewenste features
- Geeft context

---

### Slide 23: Prompt Framework

**Titel:** 4 elementen van een goede prompt

**Inhoud:**

1. **Rol:** "Je bent een senior frontend developer..."
2. **Context:** "...die werkt aan een SaaS landingspagina..."
3. **Taak:** "...maak een hero section met..."
4. **Format:** "...gebruik React en Tailwind, voeg comments toe"

**Voorbeeld gecombineerd:**

> "Je bent een senior frontend developer. Maak een hero section voor een SaaS website. Gebruik React met Tailwind CSS. Voeg comments toe die uitleggen wat de code doet."

---

### Slide 24: Tech Stack Specificeren

**Titel:** Vertel de AI welke technologie je wilt

**Inhoud:**
**Wat is een tech stack?**
De technologieën waarmee je bouwt.

**Voor deze cursus gebruiken we:**

- **React** - JavaScript framework voor UI
- **Tailwind CSS** - Utility-first CSS framework
- **TypeScript** (optioneel) - Getypeerd JavaScript

**In je prompt:**

> "Gebruik React met Tailwind CSS voor styling. Maak het responsive met mobile-first design."

**Tip:** v0.dev genereert automatisch React + Tailwind!

---

### Slide 25: Kleuren en Look & Feel

**Titel:** Visuele specificaties in je prompt

**Inhoud:**
**Wat kun je specificeren?**

- **Kleuren:** "#2563EB voor primary, #1E40AF voor secondary"
- **Stijl:** "Modern, minimalistisch, professioneel"
- **Sfeer:** "Vriendelijk en toegankelijk" of "Corporate en serieus"
- **Referenties:** "In de stijl van Stripe.com"

**Voorbeeld:**

> "Gebruik een blauw kleurenschema met primary #2563EB. De stijl moet modern en minimalistisch zijn, geschikt voor een B2B SaaS startup."

---

### Slide 26: Prompting Tips

**Titel:** Praktische tips

**Inhoud:**

1. **Geef een rol:** "Je bent een expert in..."
2. **Wees specifiek:** Niet "maak iets moois" maar "maak een hero met gradient"
3. **Specificeer tech stack:** "React, Tailwind, TypeScript"
4. **Beschrijf look & feel:** Kleuren, stijl, sfeer
5. **Geef voorbeelden:** "Zoals de website van Stripe"
6. **Itereer:** Eerste poging is zelden perfect

**Onthoud:** Garbage in = garbage out!

---

## DEEL 6: LIVE DEMO V0.DEV (27 minuten)

### Slide 27: Introductie v0.dev

**Titel:** Van schets naar werkende website

**Inhoud:**
**v0.dev door Vercel:**

- AI-powered UI generator
- Begrijpt tekst EN afbeeldingen
- Genereert React + Tailwind code
- Direct deploybaar naar internet

**Vandaag leer je de workflow:**
Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!

---

### Slide 28: De Slimme Workflow

**Titel:** Van schets naar site in 5 stappen

**Inhoud:**

```
1. TEKEN je idee op papier
       ↓
2. Maak een FOTO van je tekening
       ↓
3. Upload naar CHATGPT + beschrijf je wensen
   (kleuren, stijl, tech stack)
       ↓
4. ChatGPT maakt een gedetailleerde PROMPT
       ↓
5. Plak die prompt in V0.DEV → Website!
```

**Waarom eerst ChatGPT?**

- v0 heeft beperkte gratis credits (~7/dag)
- ChatGPT is "gratis" voor prompt optimalisatie
- Je tekening + beschrijving = perfecte prompt!

---

### Slide 29: Live Demo - Schets Maken

**Titel:** Stap 1: Tekenen

**Inhoud:**
_[Docent tekent live op papier]_

**Ik teken een hero section:**

- Links: titel + tekst + button
- Rechts: placeholder voor afbeelding
- Simpele lijnen, geen kunstwerk nodig!

**Belangrijke elementen:**

- Layout (waar staat wat?)
- Tekst indicaties
- Knoppen
- Afbeelding placeholders

---

### Slide 30: Live Demo - Foto naar ChatGPT

**Titel:** Stap 2 & 3: Foto + Beschrijving

**Inhoud:**
_[Docent maakt foto en upload naar ChatGPT]_

**Mijn prompt aan ChatGPT:**

> "Dit is een schets voor een hero section van mijn website.
>
> Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
>
> Tech stack: React met Tailwind CSS
> Kleuren: Blauw thema met primary #2563EB
> Stijl: Modern, minimalistisch, professioneel
> Doel: SaaS landingspagina voor projectmanagement tool"

_[Toon ChatGPT response]_

---

### Slide 31: Live Demo - Prompt naar v0

**Titel:** Stap 4 & 5: v0.dev

**Inhoud:**
_[Docent kopieert prompt naar v0.dev]_

**Let op:**

- Generatie duurt ~30 seconden
- Je krijgt direct een preview
- Code is React + Tailwind
- Precies wat je tekende!

_[Toon resultaat]_

---

### Slide 32: Live Demo - Itereren

**Titel:** Verfijnen in v0

**Inhoud:**
_[Docent itereert op het resultaat]_

**Follow-up prompts:**

- "Make the button larger with a hover animation"
- "Add a floating image placeholder on the right"
- "Change the gradient to be more subtle"

**Dit is de kracht:** In gesprek gaan met de AI!

---

### Slide 33: Live Demo - Deployen

**Titel:** Live zetten

**Inhoud:**
**Deployment in 4 stappen:**

1. Klik "Add Integration" (linkerzijbalk)
2. Koppel je GitHub account
3. v0 maakt automatisch een repository
4. Klik "Deploy" → Live op Vercel!

**Resultaat:**

- URL: `jouw-project.vercel.app`
- Code staat in GitHub
- Elke update → automatisch opnieuw gedeployd

---

## DEEL 7: HANDS-ON OPDRACHT (55 minuten)

### Slide 34: Lesopdracht

**Titel:** Nu zijn jullie aan de beurt!

**Inhoud:**
**Opdracht:** Jouw tekening wordt een website!

**Stappen:**

1. **TEKEN** een hero section op papier
2. **FOTO** maken van je tekening
3. **CHATGPT:** Upload foto + beschrijf je wensen
4. **PROMPT:** Kopieer de gegenereerde prompt
5. **V0.DEV:** Plak prompt en genereer
6. **DEPLOY:** Publiceer naar Vercel

**Tijd:** ~55 minuten
**Benodigdheden:** Papier, pen, ChatGPT account, GitHub account

---

### Slide 35: Opdracht Details

**Titel:** Wat moet je specificeren?

**Inhoud:**
**In je ChatGPT prompt, beschrijf:**

1. **Je schets:** "Dit is een hero section met..."
2. **Tech stack:** "Gebruik React met Tailwind CSS"
3. **Kleuren:** "Primary kleur #2563EB" of "Blauw thema"
4. **Stijl:** "Modern, minimalistisch" of "Speels en kleurrijk"
5. **Doel:** "Voor een SaaS/portfolio/webshop"

**Vraag ChatGPT:**

> "Maak van deze schets en beschrijving een gedetailleerde prompt voor v0.dev"

---

### Slide 36: Tips voor de Opdracht

**Titel:** Succesvol aan de slag

**Inhoud:**

- **Teken simpel:** Blokken en lijnen zijn genoeg
- **Wees specifiek in ChatGPT:** Hoe meer detail, hoe beter de prompt
- **v0 credits:** ~7 per dag, dus optimaliseer prompt eerst!
- **GitHub vereist:** Maak account aan als je die niet hebt

**Deployment in 3 klikken:**

1. "Add Integration" → koppel GitHub
2. v0 maakt automatisch repo aan
3. "Deploy" → live!

---

### Slide 37: Hulpmiddelen

**Titel:** Links en resources

**Inhoud:**

- **ChatGPT:** chat.openai.com
- **v0.dev:** v0.dev
- **GitHub:** github.com

**Hulp nodig?**

- Vraag je buurman/buurvrouw
- Steek je hand op
- AI mag ook helpen!

---

## DEEL 8: AFSLUITING (10 minuten)

### Slide 38: Samenvatting

**Titel:** Wat hebben we geleerd?

**Inhoud:**  
✅ Hoe LLMs werken (next-token prediction)  
✅ AI-landschap: ChatGPT, Claude, Gemini, Grok  
✅ ChatGPT praktisch gebruiken  
✅ Prompt engineering: rol, context, tech stack, kleuren  
✅ **De workflow: Schets → ChatGPT → v0.dev → Website!**

---

### Slide 39: Huiswerk

**Titel:** Voor volgende week

**Inhoud:**
**Opdracht (2 uur):**

1. Schrijf reflectie (500 woorden) over je eerste AI-ervaring
2. Bedenk 5 concrete use cases voor AI in jouw werk
3. **Maak een tweede schets** voor een andere pagina/component
4. Doorloop de workflow opnieuw (schets → ChatGPT → v0 → deploy)
5. Documenteer resultaten met screenshots

**Inleveren:** Via Teams chat

---

### Slide 40: Volgende Les

**Titel:** Les 2: Prompt Engineering Verdieping

**Inhoud:**
**Wat komt:**

- Geavanceerde prompt technieken
- Chain of thought prompting
- Few-shot learning
- Custom GPTs verkennen

**Voorbereiding:**

- Huiswerk af
- ChatGPT account werkt

---

### Slide 41: Bedankt!

**Titel:** Tot volgende week!

**Inhoud:**
🚀 Succes met het huiswerk!

_"The best way to predict the future is to create it."_
— Alan Kay

---

## Totaal: 41 slides

## Geschatte tijd presentatie: ~70 minuten

## ChatGPT praktijk: ~25 minuten

## Demo v0.dev: ~27 minuten

## Hands-on tijd: ~55 minuten