Les	Onderwerp	Deel	Status
01	Introductie tot AI en Large Language Models	1	✅ Uitgewerkt
02	AI Code Assistants en OpenCode Desktop App	1	📋 Samenvatting
03	AI Ethics, Privacy & Security + WebStorm	1	📋 Samenvatting
04	Effectief Prompting, Iteratief Werken & Skills	2	📋 Samenvatting
05	AI Tool Selection & Workflows	2	📋 Samenvatting
06	Hands-on: Van Idee naar Prototype	2	📋 Samenvatting
07	Next.js Project Setup	2	📋 Samenvatting
08	Supabase Basics	2	📋 Samenvatting
09	AI Agents - Custom GPTs & Claude Projects	2	📋 Samenvatting
10	Introduction to Cursor	3	📋 Samenvatting
11	Project Setup & Repository Structure	3	📋 Samenvatting
12	MCP & Context Management	3	📋 Samenvatting
13	Mastering Cursor	3	📋 Samenvatting
14	Debugging & Code Review met AI	3	📋 Samenvatting
15	Vercel AI SDK - AI Features in je App	3	📋 Samenvatting
16	Deployment & Production	3	📋 Samenvatting
17	Eindopdracht Kickoff	3	📋 Samenvatting
18	Eindproject Werksessie	3	📋 Samenvatting

Tool Progressie

Deel	Tools	Kosten
Deel 1	ChatGPT, v0.dev, OpenCode, WebStorm	Gratis (WebStorm via school)
Deel 2	OpenCode, Claude Desktop, Skills.sh	Gratis
Deel 3	Cursor	Free tier beschikbaar

Eindopdracht: Cursor (free tier voldoende)

Deel 1: Fundamentals of AI-Driven Development

3 lessen · 5 EC

Kennismaking met AI, LLMs en de basis van AI-assisted development.

Les 1: Introductie tot AI en Large Language Models

Tools: ChatGPT, v0.dev, Vercel, GitHub

Docent vertelt:

Het AI-landschap anno nu (ChatGPT, Claude, Grok, Gemini)
Wat zijn Large Language Models? Next-token prediction uitgelegd
Hallucinaties: waarom AI soms dingen verzint
Prompt engineering basics: rol, context, taak, format
De schets-naar-website workflow

Studenten doen:

ChatGPT account aanmaken en verkennen
Eerste prompts schrijven en itereren
Complete workflow: schets op papier → foto → ChatGPT prompt → v0.dev → deploy naar Vercel

Lesopdracht: Doorloop de complete workflow: teken een hero section op papier, maak foto, genereer prompt met ChatGPT, bouw in v0.dev, deploy naar Vercel.

Huiswerk: Reflectie schrijven (500 woorden), 5 AI use cases bedenken voor eigen projecten, tweede component bouwen via de workflow.

→ Ga naar Les 1

Les 2: AI Code Assistants en OpenCode Desktop App

Tools: OpenCode Desktop App, Ollama/Groq API

Docent vertelt:

Verschil chat-interfaces vs geïntegreerde development tools
OpenCode als standalone desktop applicatie (gratis!)
Hoe AI code assistants werken
Best practices voor code generation prompts
Wanneer AI wel/niet te vertrouwen

Studenten doen:

OpenCode installeren en configureren
Gratis model koppelen (Ollama lokaal of Groq API)
Interface verkennen: code editor, chat, terminal
Eerste component bouwen met AI hulp

Lesopdracht: Installeer OpenCode, koppel gratis model, bouw responsive navbar component met AI assistance, experimenteer met verschillende prompts.

Huiswerk: Bouw landing page component library (hero, features, testimonial, CTA, footer), schrijf blog post over ervaring met OpenCode (300 woorden).

→ Ga naar Les 2

Les 3: AI Ethics, Privacy & Security + WebStorm Integration

Tools: WebStorm (school licentie), OpenCode plugin, Git

Docent vertelt:

Privacy risico's: wat NOOIT te delen met AI (API keys, credentials, client data)
Data ownership bij AI services - waar gaat je code naartoe?
Security vulnerabilities in AI-generated code (SQL injection, XSS)
GDPR/AVG compliance basics
WebStorm als professionele IDE

Studenten doen:

Security workshop: identificeer problemen in AI-generated code
Maak persoonlijke "AI Safety Checklist"
WebStorm installeren met school licentie
OpenCode plugin configureren in WebStorm

Lesopdracht: Security audit van AI-generated code (vind 5 problemen), setup WebStorm met OpenCode plugin, maak je eerste project in WebStorm.

Huiswerk: Bouw secure feature (contact form of auth flow), review met je Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.

→ Ga naar Les 3

Deel 2: Intermediate AI-Driven Development

6 lessen · 10 EC

Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase en AI agents.

2.1 Prompt Engineering & Consolidatie

Les 4: Effectief Prompting, Iteratief Werken & Skills

Tools: OpenCode/WebStorm, Skills.sh

Docent vertelt:

Zero-shot vs few-shot prompting (met voorbeelden)
Chain-of-thought reasoning: laat AI stap voor stap denken
Role prompting en constraint-based prompting
Skills.sh: wat het is en waarom het werkt
Iteratief werken: start simpel → voeg complexiteit toe

Studenten doen:

Verschillende prompt technieken uitproberen
Skills.sh installeren en eerste skill toevoegen
Vergelijk output met/zonder skill
Bouw feature in 4 iteraties (simpel → complex)

Lesopdracht: Installeer Skills.sh, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties (basis filter → multi-filter → sort → search).

Huiswerk: Maak persoonlijke prompt library met 8 templates voor verschillende taken, installeer en test 3 Skills, documenteer concrete verschillen.

→ Ga naar Les 4

Les 5: AI Tool Selection & Workflows

Tools: ChatGPT, Claude, v0.dev, OpenCode

Docent vertelt:

Overzicht van alle AI tools die we kennen
Sterke en zwakke punten per tool
Wanneer gebruik je welke tool?
Tool selection framework: taak → tool
Workflow patterns voor AI-assisted development

Studenten doen:

Dezelfde taak uitvoeren in 3 verschillende tools
Output vergelijken en analyseren
Tool selection framework invullen
Eigen workflow documenteren

Tool	Sterk in	Minder sterk in
ChatGPT	Brainstormen, uitleg, planning	Grote codebases
Claude	Lange context, nuance, analyse	Soms te voorzichtig
v0.dev	UI components, snel prototypen	Complexe logica
OpenCode	Code schrijven, project context	Geen web access

Lesopdracht: Bouw een "Contact Form" component met 3 tools (ChatGPT planning → v0.dev UI → OpenCode logica). Documenteer per tool: wat werkte, wat niet, hoe lang duurde het.

Huiswerk: Maak je eigen "Tool Selection Cheat Sheet", test het op 2 nieuwe taken, reflecteer op je workflow (400 woorden).

→ Ga naar Les 5

Les 6: Hands-on: Van Idee naar Prototype

Tools: OpenCode/WebStorm, ChatGPT (voor planning)

Docent vertelt:

Hoe ga je van vaag idee naar concrete features?
Feature breakdown methode
Component thinking: UI opdelen in herbruikbare stukken
Minimum Viable Product (MVP) denken
Korte demo van het proces

Studenten doen:

Kiezen van een simpel project idee
Met AI features breakdown maken
Component structuur bedenken
Prototype bouwen met alles wat ze hebben geleerd
Focus op WORKFLOW, niet perfectie

Voorbeeld projecten:

Weer widget met 3-daagse forecast
Simpele quiz app (3 vragen)
Recipe card met ingrediënten toggle

Lesopdracht: Kies een mini-project, maak feature breakdown met AI, bouw werkend prototype. Documenteer je proces: welke prompts werkten, waar liep je vast, hoe loste je het op.

Huiswerk: Verbeter je prototype (styling, edge cases), schrijf "Lessons Learned" document (300 woorden), bereid je voor op Les 7 (Next.js).

→ Ga naar Les 6

2.2 Next.js & Supabase

Les 7: Next.js Project Setup

Tools: Next.js, OpenCode/WebStorm, Git, Vercel

Docent vertelt:

Wat is Next.js en waarom gebruiken we het?
npx create-next-app stap voor stap
Project structuur uitgelegd (app/, components/, lib/)
TypeScript basics voor React
Tailwind CSS in Next.js
Git basics: commits, push, .gitignore

Studenten doen:

Eerste Next.js project aanmaken
Project structuur verkennen
Simpele pagina's maken
Components maken en importeren
Deployen naar Vercel

Lesopdracht:

Run npx create-next-app@latest met TypeScript + Tailwind
Maak 3 pagina's (home, about, contact)
Maak 2 herbruikbare components (Header, Footer)
Style met Tailwind
Deploy naar Vercel

Huiswerk: Voeg 2 extra pagina's toe, maak 3 extra components, experimenteer met Tailwind, push alles naar GitHub.

→ Ga naar Les 7

Les 8: Supabase Basics

Tools: Supabase, Next.js, OpenCode

Docent vertelt:

Wat is Supabase? (database + auth in één)
Supabase project aanmaken (live demo)
Table Editor: tabellen maken zonder SQL
Environment variables: wat, waarom, hoe
Supabase client setup
CRUD operaties uitgelegd
Auth UI component (plug & play login)

Studenten doen:

Supabase account en project aanmaken
Eerste tabel maken via UI
.env.local configureren
Supabase client maken
Data ophalen en tonen
Auth toevoegen

Lesopdracht:

Maak Supabase project
Maak todos tabel via Table Editor
Configureer .env.local
Bouw Todo app: lijst tonen, toevoegen, afvinken, verwijderen
Voeg login toe met Auth UI

Huiswerk: Extend Todo app (filtering, user-specifieke todos), deploy naar Vercel met env vars, test in productie.

→ Ga naar Les 8

2.3 AI Agents

Les 9: AI Agents - Custom GPTs & Claude Projects

Tools: ChatGPT (Custom GPTs), Claude Desktop (Projects)

Docent vertelt:

Wat zijn AI Agents? Verschil chatbot vs agent
Custom GPTs: hoe maak je ze, wat kun je ermee
Claude Projects: custom instructions + project knowledge
Wanneer een agent vs gewoon chatten
Best practices voor agent instructions

Studenten doen:

Custom GPT maken voor code review
Claude Project opzetten voor eigen project
Agents testen en vergelijken
Instructions itereren en verbeteren

Lesopdracht:

Maak Custom GPT "Code Reviewer" met specifieke checklist
Maak Claude Project voor je Todo app met project context
Test beide met dezelfde code
Documenteer: welke geeft betere feedback?

Huiswerk: Maak "Personal Dev Assistant" agent afgestemd op jouw workflow, test in echt werk, deel je beste agent config met de klas.

→ Ga naar Les 9

Deel 3: Advanced AI-Driven Development

9 lessen · 15 EC

Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindproject.

3.1 Cursor & Professional Workflow

Les 10: Introduction to Cursor

Tools: Cursor

Docent vertelt:

Waarom Cursor? De professionele AI editor
Free tier vs Pro: wat krijg je?
Core features: Tab completion, CMD+K, Chat, Composer
Cursor vs OpenCode: wanneer welke?
Live demo van Cursor workflow

Studenten doen:

Cursor installeren
Bestaand project openen in Cursor
Tab completion ervaren
CMD+K voor inline edits
Chat voor vragen over code
Composer voor multi-file changes

Lesopdracht:

Installeer Cursor (free tier)
Open je Todo app in Cursor
Voeg nieuwe feature toe met alleen Cursor (bijv. due dates)
Gebruik elke feature minstens 3x: Tab, CMD+K, Chat, Composer
Noteer: wat werkt goed, wat is wennen?

Huiswerk: Bouw complete mini-feature met Cursor, vergelijk ervaring met OpenCode, schrijf reflectie (400 woorden).

→ Ga naar Les 10

Les 11: Project Setup & Repository Structure

Tools: Cursor, Git, GitHub

Docent vertelt:

Waarom goede project structuur cruciaal is voor AI
De ideale folder structuur voor Next.js + Cursor
.cursorrules files: wat zijn ze, hoe schrijf je ze
docs/ folder: PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF
Environment variables: lokaal vs productie
README best practices

Studenten doen:

Eindproject repository aanmaken
Folder structuur opzetten
.cursorrules files schrijven
docs/ templates invullen
Eerste commit en push

Lesopdracht:

npx create-next-app voor je eindproject
Maak folder structuur aan (zie template)
Schrijf general.mdc met jouw project regels
Vul PROJECT-BRIEF.md volledig in
Push naar GitHub

Huiswerk: Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor.

→ Ga naar Les 11

Les 12: MCP & Context Management

Tools: Cursor, Claude Desktop, MCP servers

Docent vertelt:

Wat is MCP (Model Context Protocol)?
MCP servers: filesystem, GitHub, databases
Claude Desktop + MCP configureren
Context windows: wat zijn tokens, waarom limiet?
Context strategieën: relevante files, pruning
.cursorignore voor grote projecten

Studenten doen:

MCP servers configureren in Claude Desktop
Filesystem MCP testen
GitHub MCP verkennen
Context optimalisatie oefenen
.cursorignore opzetten

Lesopdracht:

Configureer Claude Desktop met filesystem MCP
Test: laat Claude je project analyseren
Configureer GitHub MCP
Maak .cursorignore voor je project
Experimenteer: wat gebeurt er met grote vs kleine context?

Huiswerk: Voeg extra MCP server toe (naar keuze), optimaliseer je project voor AI context, documenteer in AI-DECISIONS.md.

→ Ga naar Les 12

Les 13: Mastering Cursor

Tools: Cursor, Claude models

Docent vertelt:

Model keuze: wanneer Haiku vs Sonnet vs Opus?
Composer Mode diepgaand: multi-file generatie
@ mentions: @Files, @Folders, @Code, @Docs, @Web
Codebase indexing optimaliseren
.cursorrules advanced: meerdere files, condities
Cost management: tokens monitoren

Studenten doen:

Verschillende models testen op zelfde taak
Complexe feature bouwen met Composer
@ mentions effectief gebruiken
.cursorrules uitbreiden en testen

Lesopdracht: Bouw complexe Multi-Step Form Wizard met Cursor Composer (4 stappen, progress indicator, validation, localStorage persistence).

Huiswerk: Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer.

→ Ga naar Les 13

3.2 Quality & AI Features

Les 14: Debugging & Code Review met AI

Tools: Cursor, Browser DevTools, React DevTools

Docent vertelt:

Waarom AI goed is in debugging
Error messages lezen en begrijpen
Debugging workflow: isoleer → context → vraag AI → begrijp
Browser DevTools basics (Console, Network, Elements)
Code review met AI: wat kun je vragen?
Wanneer AI NIET te vertrouwen

Studenten doen:

Debugging challenge: 6 bugs fixen met AI hulp
Browser DevTools gebruiken
Code review van eigen code met AI
Refactoring met AI suggesties

Lesopdracht: Los 6 opzettelijke bugs op in gegeven project, documenteer per bug: error message, prompt aan AI, oplossing, wat je leerde.

Huiswerk: Code review 3 files uit je eindproject met AI, fix gevonden issues, maak persoonlijke debugging checklist.

→ Ga naar Les 14

Les 15: Vercel AI SDK - AI Features in je App

Tools: Vercel AI SDK, Cursor, OpenAI/Anthropic API

Docent vertelt:

Waarom Vercel AI SDK? (vs raw API calls)
Installatie en setup
useChat hook: chat interfaces bouwen
useCompletion hook: single completions
Streaming responses: hoe en waarom
API routes voor AI
System prompts schrijven
Kosten en rate limiting

Studenten doen:

AI SDK installeren
API route maken
Chat component bouwen met useChat
Streaming implementeren
Custom system prompt schrijven

Lesopdracht:

npm install ai @ai-sdk/openai
Maak /api/chat route
Bouw chat component met useChat
Implementeer streaming
Pas system prompt aan voor jouw app

Huiswerk: Integreer AI feature in je eindproject (Recipe chat / Budget advisor / Travel planner), sla conversations op in Supabase.

→ Ga naar Les 15

3.3 Deployment & Eindproject

Les 16: Deployment & Production

Tools: Vercel, GitHub, Supabase

Docent vertelt:

Vercel deployment flow
Environment variables in Vercel
Supabase productie setup
Custom domains
Performance basics (Lighthouse)
Monitoring en error tracking
Security checklist voor productie

Studenten doen:

Eindproject deployen naar Vercel
Env vars configureren
Supabase redirect URLs instellen
Lighthouse audit runnen
Security checklist doorlopen

Lesopdracht:

Deploy eindproject naar Vercel
Configureer alle env vars
Test volledige app in productie
Run Lighthouse, fix issues tot score >80
Doorloop security checklist

Huiswerk: Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL.

→ Ga naar Les 16

Les 17: Eindopdracht Kickoff

Tools: Cursor, alle geleerde tools

Docent vertelt:

Eindopdracht requirements doorlopen
Beoordelingscriteria uitleggen
Timeline en deadlines
Tips voor succesvol afronden
Q&A over onduidelijkheden

Studenten doen:

Eindopdracht document lezen
Vragen stellen
Planning maken voor komende weken
Beginnen aan ontbrekende features
Peer review setup

Lesopdracht: Maak gedetailleerde planning voor afronden eindproject, identificeer wat nog moet gebeuren, begin met hoogste prioriteit items.

Huiswerk: Werk aan eindproject volgens planning, documenteer voortgang, bereid vragen voor voor werksessie.

→ Ga naar Les 17

Les 18: Eindproject Werksessie

Tools: Cursor, alle geleerde tools

Docent vertelt:

Korte standup: waar staat iedereen?
Beschikbaar voor vragen en hulp
Geen nieuwe theorie

Studenten doen:

Werken aan eindproject
Hulp vragen waar nodig
Peer feedback geven
Laatste features afronden
Documentatie completeren
PROMPT-LOG en AI-DECISIONS afronden

Focus: Dit is werktijd. De docent loopt rond, beantwoordt vragen, helpt bij problemen. Studenten werken zelfstandig aan hun eindproject.

Deliverable eind van de les:

Werkende app deployed
Documentatie compleet
Klaar voor inleveren (of bijna)

→ Ga naar Les 18

Tech Stack

Frontend: React, Next.js, Tailwind CSS
Backend: Supabase (Postgres database, Auth)
AI Tools: ChatGPT, Claude Desktop, v0.dev, OpenCode, Cursor
AI SDK: Vercel AI SDK voor AI features in apps
Deployment: Vercel, GitHub

Structuur per Les

Elke uitgewerkte les bevat:

Les[xx]-Slide-Overzicht.md - Slide deck structuur
Les[xx]-Lesplan.md - Tijdsindeling en activiteiten
Les[xx]-Docenttekst.md - Uitgebreide docenthandleiding
Les[xx]-Bijlage-A-Lesopdracht.md - Lesopdracht (2 uur)
Les[xx]-Bijlage-B-Huiswerkopdracht.md - Huiswerkopdracht (2 uur)