# 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:40 | Welkom, theorie AI & LLMs |
| 09:40 - 10:00 | ChatGPT in de praktijk |
| 10:00 - 10:12 | Prompt Engineering |
| 10:12 - 10:37 | Demo: Schets naar website |
| 10:37 - 11:30 | Hands-on opdracht |
| 11:30 - 12:00 | Afsluiting & 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, 3 delen

**Inhoud:**

| Deel | Lessen | Focus |
|------|--------|-------|
| 1: Fundamentals | 1-3 | AI basics, tools leren kennen |
| 2: Intermediate | 4-9 | Workflows, Supabase, MCP |
| 3: Advanced | 10-18 | Testing, deployment, eindproject |

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

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

1. **Training:** Model leest miljarden teksten
2. **Patroonherkenning:** Leert statistische verbanden
3. **Voorspelling:** Voorspelt het volgende woord
4. **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: Next-Token Prediction
*(3 minuten)*

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

**Inhoud:**

**Voorbeeld:** "De kat zat op de ___"

Het model berekent kansen:
- "mat" → 65%
- "stoel" → 15%
- "bank" → 10%

→ 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 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 | 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):**
1. Start een nieuwe chat
2. Stel een vraag
3. Upload een afbeelding (foto van iets op je bureau)
4. 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:**

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"

---

### 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:**

1. Geef een rol
2. Wees specifiek
3. Specificeer tech stack
4. Beschrijf look & feel
5. 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:**

1. Klik "Add Integration"
2. Koppel GitHub account
3. v0 maakt automatisch repository
4. 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:**
1. **TEKEN** een hero section op papier
2. **FOTO** maken
3. **CHATGPT:** Upload + beschrijf (tech stack, kleuren, stijl!)
4. **PROMPT** kopiëren
5. **V0.DEV:** Genereren
6. **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:**

1. **Reflectie** (500 woorden) over je AI-ervaring
2. **5 use cases** bedenken voor AI in development
3. **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)