rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update lessons on behalf of nova feedback

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-02 08:20:57 +01:00
parent 03a5d437df
commit b39c4245c2
4 changed files with 722 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
Eindopdracht-AI-Developer.md
View File

@@ -2,7 +2,7 @@
## Leerlijn AI-Driven Development (30 EC) ## Leerlijn AI-Driven Development (30 EC)
**Versie 1.0** **Versie 2.0**
--- ---
@@ -22,25 +22,27 @@
De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps. De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps.
**Dit is een zelfstandige eindopdracht.** Na het afronden van de 18 lessen werk je in je eigen tijd aan dit project. Je past alle geleerde vaardigheden en tools toe om een complete applicatie te bouwen.
Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen: Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen:
1. **Fundamentals of AI-Driven Development** 1. **TypeScript & Next.js Development**
Je kunt AI tools (ChatGPT, Claude, OpenCode) effectief inzetten voor code generatie en begrijpt de basisprincipes van Large Language Models. Je kunt een moderne webapplicatie bouwen met Next.js 14 (App Router), TypeScript, en Tailwind CSS.
2. **Prompt Engineering & Iteratief Werken** 2. **Database Design & Supabase**
Je kunt effectieve prompts schrijven, iteratief werken met AI, en Skills gebruiken voor consistente output. Je kunt een database ontwerpen met correcte relaties, en CRUD operaties en authenticatie implementeren met Supabase.
3. **Backend Development met Supabase** 3. **AI-Assisted Development met Cursor**
Je kunt een database opzetten, CRUD operaties uitvoeren, en authenticatie implementeren met Supabase. Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, @ mentions, context management, en Composer mode.
4. **AI-Assisted Development met Cursor** 4. **Skills.sh voor Consistente Output**
Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, context management, en Composer mode. Je kunt Skills gebruiken om de kwaliteit van AI-gegenereerde code te verhogen en consistente best practices te hanteren.
5. **AI Features Bouwen met Vercel AI SDK** 5. **Prompt Engineering & Iteratief Werken**
Je kunt AI-powered features implementeren in je applicatie met de Vercel AI SDK (chat interfaces, streaming responses). Je kunt effectieve prompts schrijven, iteratief werken met AI, en je proces documenteren.
6. **Testing, Debugging & Deployment** 6. **AI Agents Bouwen met Vercel AI SDK**
Je kunt code debuggen met AI hulp, tests schrijven, en een applicatie deployen naar productie. Je kunt AI agents bouwen met de Vercel AI SDK, inclusief Tool Calling voor externe API integratie en `maxSteps` voor autonome multi-step taken.
--- ---
@@ -50,29 +52,88 @@ In het bedrijfsleven worden steeds vaker AI-tools ingezet om sneller en efficië
Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst. Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst.
**Verplichte technologieën (geleerd in de lessen):**
| Technologie | Les | Toepassing |
|-------------|-----|------------|
| TypeScript | Les 5 | Typed code, interfaces, strict mode |
| Next.js 14 | Les 6-7 | App Router, SSR, API routes, React Query |
| Supabase | Les 8-9 | Database design, CRUD, authenticatie |
| Cursor | Les 12, 16 | .cursorrules, @ mentions, Composer |
| Skills.sh | Les 4 | Minimaal 2 skills actief tijdens development |
| Vercel AI SDK | Les 17 | Tool Calling, Agents met `maxSteps` |
| Externe API | Les 17 | Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, etc.) |
| Vercel | Les 18 | Deployment naar productie |
**Wat je gaat doen:** **Wat je gaat doen:**
- Een professionele repository opzetten met juiste structuur en documentatie - Een professionele repository opzetten met juiste structuur en documentatie
- .cursorrules files schrijven die Cursor instrueren voor jouw project - .cursorrules files schrijven die Cursor instrueren voor jouw project
- Een Next.js applicatie bouwen met Tailwind CSS - Skills.sh installeren en minimaal 2 relevante skills gebruiken
- Een Next.js applicatie bouwen met TypeScript en Tailwind CSS
- Data opslaan en ophalen via Supabase (database + authenticatie) - Data opslaan en ophalen via Supabase (database + authenticatie)
- Een AI-powered feature implementeren met de Vercel AI SDK - Een **AI Agent** bouwen met de Vercel AI SDK:
- Minimaal 3 tools die externe API data ophalen
- `maxSteps` voor autonome multi-step taken
- De AI interpreteert en combineert data voor de gebruiker
- Je applicatie deployen naar Vercel - Je applicatie deployen naar Vercel
- Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md - Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md
**Voorbeeldprojecten:** ---
| Project | Beschrijving | AI Feature | ## Voorbeeldprojecten
|---------|--------------|------------|
| **AI Recipe Generator** | App waar je ingrediënten invoert en recepten krijgt | Chat: "Wat kan ik maken met kip, rijst en paprika?" |
| **Smart Budget Buddy** | Persoonlijke finance tracker met inzichten | Chat: "Analyseer mijn uitgaven en geef tips" |
| **Travel Planner AI** | Reis planning app met AI assistent | Chat: "Plan een weekend Barcelona voor 2 personen" |
Je mag ook een eigen projectidee bedenken, mits het voldoet aan alle technische eisen. Je mag zelf bepalen wat je bouwt, zolang je aan alle technische eisen voldoet. **Belangrijk:** je applicatie moet AI combineren met externe data via een gratis API. De AI moet de data **interpreteren en analyseren**, niet alleen doorsturen.
Door deze opdracht uit te voeren toon je aan dat je zelfstandig een moderne webapplicatie kunt bouwen met AI-assisted development, en dat je AI-features kunt integreren die echte waarde toevoegen voor gebruikers. Hieronder drie voorbeelden ter inspiratie:
Om de leerlijn AI-Driven Development met succes af te ronden is een voldoende nodig voor de integrale eindopdracht; met de deelopdrachten kunnen geen losse cursussen worden afgerond. ### 1. Cocktail Sommelier
Een AI-powered cocktail advisor die helpt bij het kiezen en plannen van drinks.
| Aspect | Invulling |
|--------|-----------|
| **Externe API** | [TheCocktailDB](https://www.thecocktaildb.com/api.php) - 636 cocktails, recepten, ingrediënten |
| **Database** | users, favorites, party_plans, preferences |
| **Auth** | Login om favorieten en voorkeuren op te slaan |
| **Agent Tools** | `searchByIngredient`, `getCocktailDetails`, `searchNonAlcoholic`, `searchByCategory` |
| **Agent Taak** | "Plan cocktails voor mijn verjaardagsfeest, 15 mensen, sommigen drinken geen alcohol" |
| **AI Meerwaarde** | Agent zoekt meerdere opties, combineert ingrediëntenlijsten, geeft persoonlijk advies |
### 2. Recipe Remix
Een slimme recepten-assistent die helpt met koken op basis van wat je hebt.
| Aspect | Invulling |
|--------|-----------|
| **Externe API** | [TheMealDB](https://www.themealdb.com/api.php) - 597 recepten, ingrediënten, categorieën |
| **Database** | users, saved_recipes, pantry_items, diet_preferences |
| **Auth** | Login om recepten en voorraad op te slaan |
| **Agent Tools** | `searchByIngredient`, `getRecipeDetails`, `searchByCategory`, `searchByArea` |
| **Agent Taak** | "Ik heb kip, rijst en paprika. Wat kan ik maken voor een gezin met een vegetariër?" |
| **AI Meerwaarde** | Agent zoekt recepten, checkt dieetwensen, suggereert alternatieven, maakt weekmenu |
### 3. Quiz Master AI
Een adaptieve quiz app met een AI die moeilijkheid aanpast en uitlegt.
| Aspect | Invulling |
|--------|-----------|
| **Externe API** | [Open Trivia DB](https://opentdb.com/api_config.php) - 4000+ vragen in diverse categorieën |
| **Database** | users, quiz_sessions, scores, progress |
| **Auth** | Login om voortgang bij te houden |
| **Agent Tools** | `getQuestions`, `checkAnswer`, `getHint`, `explainAnswer` |
| **Agent Taak** | "Start een quiz over wetenschap, pas de moeilijkheid aan op mijn niveau" |
| **AI Meerwaarde** | Agent selecteert vragen, past moeilijkheid aan, geeft hints, legt foute antwoorden uit |
### Beschikbare Gratis APIs
| API | Data | URL |
|-----|------|-----|
| TheCocktailDB | Cocktails & recepten | thecocktaildb.com/api.php |
| TheMealDB | Maaltijden & recepten | themealdb.com/api.php |
| Open Trivia DB | Quiz vragen | opentdb.com/api_config.php |
| REST Countries | Landen informatie | restcountries.com |
| Open Library | Boeken data | openlibrary.org/developers |
**Eigen idee?** Je mag ook een eigen projectidee uitwerken met een andere gratis API, mits het voldoet aan alle technische eisen (agent met tools, externe data, AI interpretatie). Bespreek je idee eventueel met de docent.
--- ---
@@ -94,18 +155,22 @@ Een goed gestructureerd project is essentieel voor effectief werken met AI tools
**Wat je doet:** **Wat je doet:**
Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je maakt documentatie files aan die je gedurende het project gaat vullen. Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je installeert Skills.sh en activeert relevante skills. Je maakt documentatie files aan die je gedurende het project gaat vullen.
**Vereisten:** **Vereisten:**
- GitHub repository met duidelijke naam en beschrijving - GitHub repository met duidelijke naam en beschrijving
- Next.js project met TypeScript en Tailwind CSS - Next.js 14 project met TypeScript, Tailwind CSS, en App Router
- Skills.sh geïnstalleerd met minimaal 2 actieve skills:
- `vercel-react-best-practices` (verplicht)
- Minimaal 1 andere relevante skill (bijv. `supabase-postgres-best-practices`)
- Folder structuur volgens best practices: - Folder structuur volgens best practices:
``` ```
project/ project/
├── .cursor/rules/ ├── .cursor/rules/
│ ├── general.mdc │ ├── general.mdc
│ └── [andere rules files] │ └── [andere rules files]
├── .skills/ # Skills.sh configuratie
├── docs/ ├── docs/
│ ├── PROJECT-BRIEF.md │ ├── PROJECT-BRIEF.md
│ ├── PROMPT-LOG.md │ ├── PROMPT-LOG.md
@@ -113,7 +178,9 @@ Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de j
├── src/ ├── src/
│ ├── app/ │ ├── app/
│ ├── components/ │ ├── components/
│ └── lib/ │ ├── lib/
│ ├── hooks/
│ └── types/
├── .env.example ├── .env.example
└── README.md └── README.md
``` ```
@@ -122,13 +189,14 @@ Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de j
- Projectnaam en beschrijving - Projectnaam en beschrijving
- Doelgroep - Doelgroep
- Core features (3-5) - Core features (3-5)
- Tech stack keuzes - Tech stack keuzes met onderbouwing
- Complete README.md met installatie-instructies - Complete README.md met installatie-instructies
- .env.example met alle benodigde environment variables - .env.example met alle benodigde environment variables
**Op te leveren:** **Op te leveren:**
- GitHub repository URL - GitHub repository URL
- Screenshot van folder structuur - Screenshot van folder structuur
- Lijst van geïnstalleerde Skills
- Inhoud van je belangrijkste .cursorrules file - Inhoud van je belangrijkste .cursorrules file
--- ---
@@ -139,53 +207,95 @@ Elke serieuze applicatie heeft data opslag en gebruikersbeheer nodig. Je gaat Su
**Wat je doet:** **Wat je doet:**
Je maakt een Supabase project aan en ontwerpt je database schema via de Table Editor (geen SQL kennis nodig). Je implementeert CRUD operaties in je Next.js app en voegt authenticatie toe zodat gebruikers kunnen inloggen. Je ontwerpt eerst je database schema op papier of in een diagram tool (zoals geleerd in Les 8). Daarna maak je een Supabase project aan en implementeert je tabellen via de Table Editor. Je implementeert CRUD operaties met React Query (zoals geleerd in Les 7) en voegt authenticatie toe.
**Vereisten:** **Vereisten:**
- Database schema ontworpen met:
- Correcte primary keys (UUID)
- Foreign keys voor relaties
- Minimaal één one-to-many relatie
- Gedocumenteerd in AI-DECISIONS.md
- Supabase project aangemaakt en gekoppeld - Supabase project aangemaakt en gekoppeld
- Minimaal 2 tabellen die relevant zijn voor je applicatie - Minimaal 2 tabellen die relevant zijn voor je applicatie
- Werkende CRUD operaties (Create, Read, Update, Delete) - Werkende CRUD operaties met React Query:
- useQuery voor data ophalen
- useMutation voor create/update/delete
- Optimistic updates (optioneel maar aangeraden)
- Authenticatie geïmplementeerd: - Authenticatie geïmplementeerd:
- Login/registratie pagina - Login/registratie pagina met Supabase Auth UI
- Protected routes (alleen voor ingelogde gebruikers) - Protected routes (alleen voor ingelogde gebruikers)
- User-specifieke data (elke user ziet alleen eigen data) - User-specifieke data (RLS policies)
- TypeScript types voor je database schema
- Environment variables correct geconfigureerd - Environment variables correct geconfigureerd
- Foutafhandeling bij database operaties - Foutafhandeling bij database operaties
**Op te leveren:** **Op te leveren:**
- Database schema diagram of beschrijving
- Screenshot van je Supabase tabellen - Screenshot van je Supabase tabellen
- Beschrijving van je database schema in AI-DECISIONS.md - Beschrijving van je relaties in AI-DECISIONS.md
- Werkende login flow (gedemonstreerd in eindpresentatie) - Werkende login flow (gedemonstreerd in eindpresentatie)
--- ---
## Deelopdracht 3: AI Feature met Vercel AI SDK ## Deelopdracht 3: AI Agent met Externe API
Het onderscheidende element van jouw applicatie is de AI-integratie. Je gaat een chat-interface of AI-powered feature bouwen die echte waarde toevoegt voor de gebruiker. Het onderscheidende element van jouw applicatie is de AI Agent die externe data combineert met intelligente interpretatie. Je gaat een agent bouwen die autonoom meerdere stappen kan uitvoeren om complexe taken te volbrengen.
**Wat je doet:** **Wat je doet:**
Je installeert de Vercel AI SDK en bouwt een feature waarbij gebruikers kunnen communiceren met AI. Dit kan een chatbot zijn, een content generator, of een andere AI-powered functionaliteit die past bij jouw applicatie. Je bouwt een AI Agent met de Vercel AI SDK die:
1. Tools gebruikt om data op te halen van een externe API
2. Meerdere stappen autonoom kan uitvoeren (`maxSteps`)
3. De data interpreteert en combineert tot nuttig advies
**Vereisten:** **Vereisten:**
- Vercel AI SDK (`ai` package) geïnstalleerd en geconfigureerd - Vercel AI SDK (`ai` package) + Zod geïnstalleerd
- API route voor AI communicatie (`/api/chat` of vergelijkbaar) - **Externe API integratie:**
- Frontend met `useChat` of `useCompletion` hook - Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, Open Trivia DB, of andere)
- Streaming responses (tekst verschijnt woord voor woord) - API data wordt opgehaald via tools, niet hardcoded
- Relevante system prompt die past bij jouw applicatie - **Tool Calling:**
- Context uit je Supabase database meegeven aan AI (bijv. user preferences, historische data) - Minimaal 3 tools gedefinieerd met Zod parameters
- Goede UX: - Duidelijke `description` per tool
- Loading indicator tijdens AI response - Error handling in elke tool
- Error handling bij API fouten - **Agent functionaliteit:**
- Mogelijkheid om conversation te clearen - `maxSteps` van minimaal 3 (AI kan meerdere tools aanroepen)
- Conversation history opslaan in Supabase (optioneel maar aangeraden) - System prompt die agent gedrag beschrijft
- AI combineert/interpreteert data (niet alleen doorsturen)
- **Frontend:**
- Chat interface met `useChat` hook
- Streaming responses
- Loading indicator
- Error handling
- **Integratie met Supabase:**
- User preferences meegeven als context
- Conversation history opslaan (optioneel maar aangeraden)
**Voorbeeld van wat NIET voldoet:**
```
User: "Zoek cocktails met rum"
AI: "Hier zijn cocktails met rum: Mojito, Daiquiri, Piña Colada"
```
Dit is alleen data doorsturen, geen interpretatie.
**Voorbeeld van wat WEL voldoet:**
```
User: "Ik geef een feest voor 10 mensen, sommigen drinken geen alcohol"
AI: [roept searchByIngredient aan]
[roept searchNonAlcoholic aan]
[roept getCocktailDetails aan voor 3 cocktails]
"Voor je feest raad ik aan: Mojito (fris, makkelijk te maken in grote
hoeveelheden), Margarita (populair, past bij Mexicaans eten), en voor
niet-drinkers: Virgin Piña Colada. Je hebt nodig: 2 flessen rum,
1 fles tequila, limoenen, munt..."
```
Dit is een agent die data combineert en persoonlijk advies geeft.
**Op te leveren:** **Op te leveren:**
- Beschrijving van je AI feature in AI-DECISIONS.md - Agent design in AI-DECISIONS.md (welke tools, waarom, typische flow)
- System prompt die je gebruikt (met uitleg waarom) - System prompt met uitleg
- Minimaal 5 prompts in PROMPT-LOG.md die leidden tot je AI implementatie - Minimaal 5 prompts in PROMPT-LOG.md over agent development
--- ---
@@ -195,24 +305,30 @@ Een applicatie is pas af als hij getest, gedeployed, en gedocumenteerd is. Je ro
**Wat je doet:** **Wat je doet:**
Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces. Je test je applicatie grondig, deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces met AI tools.
**Vereisten:** **Vereisten:**
**Testing & Quality:** **Testing & Quality:**
- Applicatie handmatig getest op belangrijkste flows - Applicatie handmatig getest op belangrijkste flows
- Minimaal 1 bug gevonden en opgelost met AI hulp (gedocumenteerd in PROMPT-LOG.md) - Minimaal 1 bug gevonden en opgelost met Cursor hulp (gedocumenteerd in PROMPT-LOG.md)
- Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md) - Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md)
- TypeScript strict mode zonder errors
- Geen console errors in productie - Geen console errors in productie
- Lighthouse score >80 op Performance
**Deployment:** **Deployment:**
- Applicatie gedeployed op Vercel - Applicatie gedeployed op Vercel
- Environment variables correct geconfigureerd in Vercel - Environment variables correct geconfigureerd in Vercel
- Supabase redirect URLs geconfigureerd voor productie
- Applicatie werkt volledig op productie URL - Applicatie werkt volledig op productie URL
- Custom domain (optioneel)
**Documentatie:** **Documentatie:**
- PROMPT-LOG.md bevat minimaal 10 significante prompts - PROMPT-LOG.md bevat minimaal 10 significante prompts met:
- De prompt zelf
- Welke tool (Cursor/ChatGPT/Claude)
- Wat werkte wel/niet
- Wat je leerde
- AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen - AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
- README.md is up-to-date en compleet - README.md is up-to-date en compleet
@@ -220,7 +336,7 @@ Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Ve
- Introductie: wat doet je app, voor wie? - Introductie: wat doet je app, voor wie?
- Demo: live walkthrough van belangrijkste features - Demo: live walkthrough van belangrijkste features
- AI integratie: toon je AI feature in actie - AI integratie: toon je AI feature in actie
- Technische keuzes: waarom deze aanpak? - Development proces: hoe heb je Cursor en Skills.sh ingezet?
- Reflectie: wat ging goed, wat was lastig, wat heb je geleerd? - Reflectie: wat ging goed, wat was lastig, wat heb je geleerd?
- Conclusie: wat zou je anders doen? - Conclusie: wat zou je anders doen?
@@ -253,15 +369,21 @@ Hieronder vind je de randvoorwaarden waaraan de eindopdracht moet voldoen. De be
- [ ] De GitHub repository bevat een complete folder structuur zoals beschreven - [ ] De GitHub repository bevat een complete folder structuur zoals beschreven
- [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies - [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies
- [ ] Skills.sh is geïnstalleerd met minimaal 2 actieve skills (waaronder vercel-react-best-practices)
- [ ] docs/PROJECT-BRIEF.md is volledig ingevuld - [ ] docs/PROJECT-BRIEF.md is volledig ingevuld
- [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts - [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts
- [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen - [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
- [ ] README.md bevat installatie-instructies die werken - [ ] README.md bevat installatie-instructies die werken
- [ ] De applicatie gebruikt Next.js met TypeScript en Tailwind CSS - [ ] De applicatie gebruikt Next.js 14 (App Router) met TypeScript en Tailwind CSS
- [ ] Database schema bevat correcte relaties (primary keys, foreign keys)
- [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen - [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen
- [ ] CRUD operaties zijn geïmplementeerd en werken - [ ] CRUD operaties zijn geïmplementeerd met React Query
- [ ] Authenticatie is geïmplementeerd (login/registratie) - [ ] Authenticatie is geïmplementeerd (login/registratie)
- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI feature - [ ] De Vercel AI SDK is geïmplementeerd met werkende AI Agent
- [ ] Minimaal 1 externe API is geïntegreerd via Tool Calling
- [ ] Minimaal 3 tools zijn gedefinieerd met Zod parameters
- [ ] Agent heeft `maxSteps` van minimaal 3
- [ ] AI interpreteert/combineert data (niet alleen doorsturen)
- [ ] Streaming responses zijn geïmplementeerd - [ ] Streaming responses zijn geïmplementeerd
- [ ] De applicatie is gedeployed op Vercel en werkt volledig - [ ] De applicatie is gedeployed op Vercel en werkt volledig
@@ -302,12 +424,16 @@ Overzichtelijke inhoudsopgave met paginanummers.
### 2. Technische Implementatie ### 2. Technische Implementatie
- Gekozen tech stack en waarom - Gekozen tech stack en waarom
- Database design (met diagram of beschrijving) - Database design (met diagram of beschrijving)
- AI feature: hoe werkt het, welke system prompt, waarom deze aanpak - AI Agent design:
- Welke externe API en waarom
- Welke tools heb je gedefinieerd
- Hoe werkt de agent flow (typisch scenario)
- System prompt en waarom deze aanpak
- Belangrijkste technische uitdagingen en oplossingen - Belangrijkste technische uitdagingen en oplossingen
### 3. AI-Assisted Development Proces ### 3. AI-Assisted Development Proces
- Hoe heb je AI tools ingezet tijdens development? - Hoe heb je Cursor ingezet? Welke .cursorrules werkten goed?
- Welke tools werkten goed, welke minder? - Welke Skills.sh skills heb je gebruikt en wat was het effect?
- Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md) - Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md)
- Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md) - Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md)
@@ -338,6 +464,7 @@ project-naam/
│ ├── general.mdc # Algemene project regels │ ├── general.mdc # Algemene project regels
│ ├── components.mdc # Component conventies (optioneel) │ ├── components.mdc # Component conventies (optioneel)
│ └── api.mdc # API/Supabase regels (optioneel) │ └── api.mdc # API/Supabase regels (optioneel)
├── .skills/ # Skills.sh configuratie
├── docs/ ├── docs/
│ ├── PROJECT-BRIEF.md # Project beschrijving │ ├── PROJECT-BRIEF.md # Project beschrijving
│ ├── PROMPT-LOG.md # Gedocumenteerde prompts │ ├── PROMPT-LOG.md # Gedocumenteerde prompts
@@ -345,19 +472,26 @@ project-naam/
├── src/ ├── src/
│ ├── app/ # Next.js App Router │ ├── app/ # Next.js App Router
│ │ ├── api/ │ │ ├── api/
│ │ │ └── chat/ │ │ │ └── agent/
│ │ │ └── route.ts # AI API route │ │ │ └── route.ts # AI Agent API route (met tools)
│ │ ├── login/ │ │ ├── (auth)/ # Auth route group
│ │ │ └── page.tsx │ │ │ ├── login/
│ │ │ └── register/
│ │ ├── layout.tsx │ │ ├── layout.tsx
│ │ └── page.tsx │ │ └── page.tsx
│ ├── components/ │ ├── components/
│ │ ├── ui/ # Basis UI components │ │ ├── ui/ # Basis UI components
│ │ ├── layout/ # Layout components
│ │ └── features/ # Feature-specifieke components │ │ └── features/ # Feature-specifieke components
│ ├── hooks/
│ │ ├── useAuth.ts
│ │ └── [custom hooks]
│ ├── lib/ │ ├── lib/
│ │ ├── supabase.ts # Supabase client │ │ ├── supabase.ts # Supabase client
│ │ └── utils.ts │ │ ├── utils.ts
│ │ └── queryClient.ts # React Query client
│ └── types/ │ └── types/
│ ├── database.ts # Supabase types
│ └── index.ts │ └── index.ts
├── .env.example # Template voor env vars ├── .env.example # Template voor env vars
├── .env.local # Lokale env vars (NIET committen) ├── .env.local # Lokale env vars (NIET committen)
@@ -365,7 +499,7 @@ project-naam/
├── next.config.js ├── next.config.js
├── package.json ├── package.json
├── README.md ├── README.md
├── tailwind.config.js ├── tailwind.config.ts
└── tsconfig.json └── tsconfig.json
``` ```
@@ -380,18 +514,18 @@ De eindopdracht wordt beoordeeld op basis van de volgende criteria. Per criteriu
| **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** | | **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** |
| 1.1 | Repository structuur is professioneel en compleet | 5% | | 1.1 | Repository structuur is professioneel en compleet | 5% |
| 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% | | 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% |
| 1.3 | Documentatie (README, PROJECT-BRIEF) is compleet | 5% | | 1.3 | Skills.sh correct geïnstalleerd en gebruikt | 5% |
| **2. Database & Auth** | *Leeruitkomst: Backend development met Supabase* | **25%** | | **2. Database & Auth** | *Leeruitkomst: Database design & Supabase* | **25%** |
| 2.1 | Database schema is logisch en past bij de applicatie | 10% | | 2.1 | Database schema is logisch met correcte relaties | 10% |
| 2.2 | CRUD operaties werken correct | 10% | | 2.2 | CRUD operaties werken correct met React Query | 10% |
| 2.3 | Authenticatie is correct geïmplementeerd | 5% | | 2.3 | Authenticatie is correct geïmplementeerd | 5% |
| **3. AI Feature** | *Leeruitkomst: AI features bouwen met Vercel AI SDK* | **30%** | | **3. AI Agent** | *Leeruitkomst: AI Agents bouwen met Vercel AI SDK* | **30%** |
| 3.1 | AI feature voegt waarde toe voor de gebruiker | 10% | | 3.1 | Agent voegt waarde toe: interpreteert en combineert data | 10% |
| 3.2 | Technische implementatie is correct (streaming, error handling) | 10% | | 3.2 | Tool Calling correct geïmplementeerd (min. 3 tools, externe API) | 10% |
| 3.3 | System prompt en context zijn doordacht | 10% | | 3.3 | Agent gedrag correct (`maxSteps`, system prompt, error handling) | 10% |
| **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** | | **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** |
| 4.1 | Applicatie werkt volledig in productie | 10% | | 4.1 | Applicatie werkt volledig in productie | 10% |
| 4.2 | Code kwaliteit en foutafhandeling | 5% | | 4.2 | Code kwaliteit (TypeScript strict, geen errors) | 5% |
| **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** | | **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** |
| 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% | | 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% |
| 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% | | 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% |

260
Samenvattingen/Les13-Samenvatting.md
View File

@@ -1,4 +1,4 @@
# Les 13: AI Agents & Custom GPTs # Les 13: Prompt Engineering & Custom GPTs
--- ---
@@ -6,7 +6,7 @@
**Deel 4: Advanced AI Features** (Les 13-18) **Deel 4: Advanced AI Features** (Les 13-18)
## Beschrijving ## Beschrijving
Leer werken met AI agents en custom GPTs. Bouw je eigen gespecialiseerde AI assistenten en begrijp hoe agents autonome taken kunnen uitvoeren. Verdiep je in advanced prompt engineering en leer eigen AI assistenten maken met Custom GPTs en Claude Projects. Focus op no-code manieren om AI te personaliseren voor jouw workflow.
--- ---
@@ -15,54 +15,51 @@ Leer werken met AI agents en custom GPTs. Bouw je eigen gespecialiseerde AI assi
### Groepsdiscussie (15 min) ### Groepsdiscussie (15 min)
Bespreek klassikaal de Cursor reflecties uit Les 12 - welke features werken het beste voor welke taken? Bespreek klassikaal de Cursor reflecties uit Les 12 - welke features werken het beste voor welke taken?
### Wat zijn AI Agents? ### Advanced Prompt Engineering
**Definitie:** AI systemen die autonoom taken kunnen uitvoeren, niet alleen antwoorden geven. **Recap van basis technieken (Les 4):**
- Zero-shot vs few-shot prompting
- Chain-of-thought reasoning
- Role prompting
**Verschil Chat vs Agent:** **Nieuwe technieken:**
| Aspect | Chat | Agent | #### 1. Structured Output Prompting
|--------|------|-------|
| Gedrag | Beantwoordt vragen | Voert taken uit |
| Autonomie | Wacht op input | Kan zelf beslissingen nemen |
| Tools | Alleen tekst | Kan tools gebruiken |
| Voorbeeld | "Hoe maak ik X?" | "Maak X voor mij" |
---
### Claude Projects
**Wat is een Claude Project?**
- Verzameling van context specifiek voor één doel
- Blijft behouden over conversaties
- Kan bestanden bevatten
**Wanneer gebruiken:**
- Terugkerend werk aan hetzelfde project
- Consistente coding style nodig
- Documentatie die AI moet kennen
**Project aanmaken:**
1. Ga naar claude.ai → Projects
2. Klik "New Project"
3. Voeg project knowledge toe (files, instructies)
4. Start conversaties binnen het project
**Voorbeeld Project Instructions:**
``` ```
Je bent een expert React/Next.js developer. Analyseer deze code en geef feedback in dit exacte format:
Technologie stack: ## Samenvatting
- Next.js 14 met App Router [1 zin over de code]
- TypeScript strict mode
- Tailwind CSS
- Supabase voor backend
Coding conventions: ## Sterke punten
- Functional components met TypeScript - [punt 1]
- Named exports (geen default exports) - [punt 2]
- Error handling met try/catch
- Nederlandse comments in code ## Verbeterpunten
- [punt 1 met code voorbeeld]
- [punt 2 met code voorbeeld]
## Prioriteit
[Hoog/Medium/Laag]: [waarom]
```
#### 2. Constraint-Based Prompting
```
Schrijf een React component met deze constraints:
- Maximaal 50 regels code
- Geen externe dependencies
- TypeScript met strict types
- Alleen Tailwind voor styling
- Inclusief error handling
```
#### 3. Iterative Refinement
```
Stap 1: "Schrijf een basis login form"
Stap 2: "Voeg validatie toe"
Stap 3: "Voeg loading states toe"
Stap 4: "Voeg error handling toe"
Stap 5: "Optimaliseer voor accessibility"
``` ```
--- ---
@@ -71,14 +68,14 @@ Coding conventions:
**Wat zijn Custom GPTs?** **Wat zijn Custom GPTs?**
Gespecialiseerde ChatGPT versies met: Gespecialiseerde ChatGPT versies met:
- Specifieke instructies - Specifieke instructies (personality, expertise)
- Eigen kennis (uploaded files) - Eigen kennis (uploaded files)
- Optioneel: Actions (API calls) - Optioneel: Actions (API calls)
**Wanneer een Custom GPT maken:** **Wanneer een Custom GPT maken:**
- Repetitieve taken met dezelfde context - Repetitieve taken met dezelfde context
- Specifieke expertise nodig - Specifieke expertise nodig
- Delen met anderen - Delen met team of anderen
**Custom GPT maken:** **Custom GPT maken:**
1. Ga naar chat.openai.com/gpts 1. Ga naar chat.openai.com/gpts
@@ -103,57 +100,94 @@ Geef feedback in dit format:
- ❌ Issue: [problemen die gefixed moeten worden] - ❌ Issue: [problemen die gefixed moeten worden]
``` ```
--- **Voorbeeld: Project Assistant GPT**
### Agent Capabilities
**Wat kunnen agents:**
- Code schrijven en testen
- Files aanmaken en bewerken
- Terminal commands uitvoeren
- Web searches doen
- Meerdere stappen plannen
**Cursor als Agent:**
- Composer mode plant en voert multi-file changes uit
- @ mentions geven context
- Tab completion voorspelt volgende stappen
**Claude als Agent (met MCP):**
- Kan tools gebruiken
- Filesystem access
- Database queries
- External APIs
---
### Best Practices voor Agent Instructies
**Wees specifiek:**
```
❌ "Help me met mijn project"
✅ "Review de auth logic in src/lib/auth.ts en check voor security issues"
``` ```
Instructions:
Je bent mijn persoonlijke development assistant voor [project naam].
**Geef constraints:** Tech stack:
``` - Next.js 14 met App Router
❌ "Maak het beter" - TypeScript strict mode
✅ "Refactor naar max 50 regels, behoud dezelfde functionaliteit" - Tailwind CSS
``` - Supabase voor backend
**Definieer output format:** Je kent de volgende conventies:
``` - Named exports (geen default exports)
Geef je antwoord in dit format: - Nederlandse comments
1. Samenvatting (1 zin) - Error handling met try/catch
2. Gevonden issues (bullet points)
3. Voorgestelde fix (code) Wanneer ik code vraag:
1. Vraag eerst om context als die ontbreekt
2. Geef TypeScript code met types
3. Voeg korte uitleg toe
``` ```
--- ---
### Prompt Templates ### Claude Projects
**Code Generation Template:** **Wat is een Claude Project?**
- Verzameling van context specifiek voor één doel
- Blijft behouden over conversaties
- Kan bestanden bevatten als knowledge base
**Wanneer gebruiken:**
- Terugkerend werk aan hetzelfde project
- Consistente coding style nodig
- Documentatie die AI moet kennen
**Project aanmaken:**
1. Ga naar claude.ai → Projects
2. Klik "New Project"
3. Voeg project knowledge toe (files, instructies)
4. Start conversaties binnen het project
**Voorbeeld Project Instructions:**
```
Je bent een expert React/Next.js developer die mij helpt met [project].
Technologie stack:
- Next.js 14 met App Router
- TypeScript strict mode
- Tailwind CSS
- Supabase voor backend
- React Query voor data fetching
Coding conventions:
- Functional components met TypeScript
- Named exports (geen default exports)
- Error handling met try/catch
- Nederlandse comments in code
Wanneer je code schrijft:
- Gebruik altijd TypeScript types
- Voeg JSDoc comments toe voor complexe functies
- Denk aan edge cases en error handling
```
**Project Knowledge toevoegen:**
- Upload je belangrijkste files (schema, README, .cursorrules)
- Upload voorbeeldcode die je stijl toont
- Upload documentatie van libraries die je gebruikt
---
### Custom GPTs vs Claude Projects
| Aspect | Custom GPT | Claude Project |
|--------|------------|----------------|
| **Beschikbaar** | ChatGPT Plus ($20/maand) | Claude Pro ($20/maand) |
| **Knowledge** | File uploads (tot 20 files) | File uploads (tot 200k tokens) |
| **Delen** | Kan gepubliceerd worden | Alleen persoonlijk |
| **Actions** | Ja (API calls) | Nee |
| **Context window** | ~128k tokens | ~200k tokens |
| **Beste voor** | Gedeelde tools, API integratie | Persoonlijke projecten, grote codebases |
---
### Prompt Templates Library
**Code Generation:**
``` ```
Context: [beschrijf je project/stack] Context: [beschrijf je project/stack]
Taak: [wat moet er gemaakt worden] Taak: [wat moet er gemaakt worden]
@@ -165,7 +199,7 @@ Constraints:
Output: [gewenst format] Output: [gewenst format]
``` ```
**Debugging Template:** **Debugging:**
``` ```
Error message: Error message:
[plak error] [plak error]
@@ -180,18 +214,43 @@ Wat er gebeurt:
[actueel gedrag] [actueel gedrag]
``` ```
**Code Review:**
```
Review de volgende code op:
1. Best practices voor [framework]
2. Potentiële bugs
3. Performance issues
4. Security vulnerabilities
[plak code]
Geef feedback in format: ✅ Goed / ⚠️ Suggestie / ❌ Issue
```
**Refactoring:**
```
Refactor deze code met de volgende doelen:
- [doel 1, bijv. "verbeter leesbaarheid"]
- [doel 2, bijv. "reduceer duplicatie"]
Behoud dezelfde functionaliteit.
Leg uit wat je verandert en waarom.
[plak code]
```
--- ---
## Tools ## Tools
- ChatGPT Custom GPTs - ChatGPT (Custom GPTs)
- Claude Projects - Claude (Projects)
- Cursor (Composer mode) - Prompt template documenten
--- ---
## Lesopdracht (2 uur) ## Lesopdracht (2 uur)
### Bouw Je Eigen AI Assistant ### Bouw Je Eigen AI Assistants
**Deel 1: Claude Project (45 min)** **Deel 1: Claude Project (45 min)**
@@ -220,7 +279,7 @@ Test dezelfde taak met beide:
- Welke is beter voor welk doel? - Welke is beter voor welk doel?
### Deliverable ### Deliverable
- Claude Project URL - Claude Project URL of screenshot
- Custom GPT (als je ChatGPT Plus hebt) of instructies doc - Custom GPT (als je ChatGPT Plus hebt) of instructies doc
- Vergelijkingsnotities - Vergelijkingsnotities
@@ -279,9 +338,8 @@ Schrijf reflectie (300 woorden):
## Leerdoelen ## Leerdoelen
Na deze les kan de student: Na deze les kan de student:
- Het verschil uitleggen tussen chat en agent - Advanced prompt engineering technieken toepassen (structured output, constraints, iterative refinement)
- Een Claude Project aanmaken en configureren - Een Custom GPT maken met specifieke instructies en knowledge
- Een Custom GPT maken met specifieke instructies - Een Claude Project opzetten met project context
- Effectieve agent instructies schrijven - De juiste tool kiezen (Custom GPT vs Claude Project) per use case
- Prompt templates gebruiken voor consistente resultaten - Een persoonlijke prompt library opbouwen en onderhouden
- De juiste AI assistant kiezen per taak

499
Samenvattingen/Les17-Samenvatting.md
View File

@@ -1,4 +1,4 @@
# Les 17: Vercel AI SDK - AI Features in je App # Les 17: Vercel AI SDK, Tool Calling & Agents
--- ---
@@ -6,7 +6,7 @@
**Deel 4: Advanced AI Features** (Les 13-18) **Deel 4: Advanced AI Features** (Les 13-18)
## Beschrijving ## Beschrijving
Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert. Bouw AI-powered features in je apps met de Vercel AI SDK. Leer niet alleen chat interfaces bouwen, maar ook hoe AI externe data kan ophalen via Tool Calling en autonome taken kan uitvoeren als Agent.
--- ---
@@ -21,21 +21,22 @@ Bespreek klassikaal de Cursor .cursorrules ervaringen uit Les 16 - welke regels
- Streaming handmatig implementeren - Streaming handmatig implementeren
- Error handling - Error handling
- State management - State management
- Tool calling implementeren
**De oplossing:** Vercel AI SDK **De oplossing:** Vercel AI SDK
- Simpele React hooks - Simpele React hooks (`useChat`, `useCompletion`)
- Built-in streaming - Built-in streaming
- Provider-agnostic (OpenAI, Anthropic, etc.) - Provider-agnostic (OpenAI, Anthropic, etc.)
- Edge-ready - **Tool calling out-of-the-box**
- **Agent capabilities met `maxSteps`**
--- ---
### Installatie & Setup ### Installatie & Setup
```bash ```bash
npm install ai @ai-sdk/openai npm install ai @ai-sdk/openai zod
# of voor Anthropic: # zod is nodig voor tool parameter validatie
npm install ai @ai-sdk/anthropic
``` ```
**Environment variable:** **Environment variable:**
@@ -46,9 +47,9 @@ OPENAI_API_KEY=sk-xxxxx
--- ---
### Core Hooks ### Deel 1: Basic Chat (Herhaling)
#### useChat - Voor Conversaties #### useChat Hook
```tsx ```tsx
'use client' 'use client'
@@ -76,45 +77,16 @@ export function ChatComponent() {
placeholder="Type a message..." placeholder="Type a message..."
className="w-full p-2 border rounded" className="w-full p-2 border rounded"
/> />
<button type="submit" disabled={isLoading}>
{isLoading ? 'Sending...' : 'Send'}
</button>
</form> </form>
</div> </div>
) )
} }
``` ```
#### useCompletion - Voor Single Completions #### Basic API Route
```tsx
import { useCompletion } from 'ai/react'
export function SummaryComponent() {
const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion()
return (
<div>
<form onSubmit={handleSubmit}>
<textarea
value={input}
onChange={handleInputChange}
placeholder="Paste text to summarize..."
/>
<button type="submit">Summarize</button>
</form>
{completion && <p>{completion}</p>}
</div>
)
}
```
---
### API Routes
**app/api/chat/route.ts:**
```typescript ```typescript
// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai' import { openai } from '@ai-sdk/openai'
import { streamText } from 'ai' import { streamText } from 'ai'
@@ -123,7 +95,7 @@ export async function POST(req: Request) {
const result = streamText({ const result = streamText({
model: openai('gpt-4o-mini'), model: openai('gpt-4o-mini'),
system: 'You are a helpful cooking assistant. Suggest recipes based on ingredients.', system: 'You are a helpful assistant.',
messages, messages,
}) })
@@ -131,151 +103,331 @@ export async function POST(req: Request) {
} }
``` ```
**Met custom system prompt:**
```typescript
const result = streamText({
model: openai('gpt-4o-mini'),
system: `You are a recipe assistant for the AI Recipe Generator app.
When the user provides ingredients:
1. Suggest 2-3 recipes they could make
2. List required additional ingredients (if any)
3. Provide brief cooking instructions
Be concise and practical.`,
messages,
})
```
--- ---
### Streaming Responses ### Deel 2: Tool Calling - AI + Externe Data
**Waarom streaming?** **Het probleem met basic chat:**
- Betere UX (user ziet direct resultaat) - AI kent alleen zijn training data
- Snellere perceived performance - Geen toegang tot realtime informatie
- Geen wachten op complete response - Kan geen acties uitvoeren
**Hoe het werkt:** **De oplossing: Tool Calling**
1. Server stuurt tokens één voor één - Definieer "tools" die AI kan aanroepen
2. Client rendert elke token direct - AI besluit zelf wanneer een tool nodig is
3. User ziet "typing" effect - Tool haalt data op → AI interpreteert resultaat
**Loading indicator:** #### Voorbeeld: Cocktail Advisor met TheCocktailDB
```tsx
{isLoading && (
<div className="flex items-center gap-2">
<div className="animate-pulse">●</div>
<span>AI is thinking...</span>
</div>
)}
```
---
### Integratie met Supabase
**Conversations opslaan:**
```typescript ```typescript
// Maak tabel in Supabase: // app/api/chat/route.ts
// conversations: id, user_id, created_at import { openai } from '@ai-sdk/openai'
// messages: id, conversation_id, role, content, created_at import { streamText, tool } from 'ai'
import { z } from 'zod'
// Na elke message: export async function POST(req: Request) {
async function saveMessage(conversationId: string, role: string, content: string) { const { messages } = await req.json()
await supabase.from('messages').insert({
conversation_id: conversationId, const result = streamText({
role, model: openai('gpt-4o-mini'),
content system: `Je bent een cocktail expert.
Gebruik de tools om cocktails te zoeken en recepten op te halen.
Geef persoonlijk advies op basis van de resultaten.`,
messages,
tools: {
// Tool 1: Zoek cocktails op ingrediënt
searchByIngredient: tool({
description: 'Zoek cocktails die een specifiek ingrediënt bevatten',
parameters: z.object({
ingredient: z.string().describe('Het ingrediënt om op te zoeken, bijv. "rum" of "vodka"')
}),
execute: async ({ ingredient }) => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${ingredient}`
)
const data = await res.json()
return data.drinks?.slice(0, 5) || []
}
}),
// Tool 2: Haal cocktail details op
getCocktailDetails: tool({
description: 'Haal het volledige recept van een cocktail op',
parameters: z.object({
cocktailId: z.string().describe('Het ID van de cocktail')
}),
execute: async ({ cocktailId }) => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${cocktailId}`
)
const data = await res.json()
return data.drinks?.[0] || null
}
}),
// Tool 3: Zoek non-alcoholische opties
searchNonAlcoholic: tool({
description: 'Zoek non-alcoholische cocktails/mocktails',
parameters: z.object({}),
execute: async () => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic`
)
const data = await res.json()
return data.drinks?.slice(0, 5) || []
}
})
}
}) })
return result.toDataStreamResponse()
} }
``` ```
**In je component:** **Wat gebeurt er?**
```tsx ```
const { messages, input, handleSubmit } = useChat({ User: "Ik heb rum en limoen, wat kan ik maken?"
onFinish: async (message) => {
await saveMessage(conversationId, message.role, message.content) AI denkt: "Ik moet zoeken op rum"
} → Roept searchByIngredient({ ingredient: "rum" }) aan
→ Krijgt: [{ name: "Mojito", id: "11000" }, { name: "Daiquiri", id: "11006" }, ...]
AI denkt: "Mojito klinkt goed met limoen, laat me het recept ophalen"
→ Roept getCocktailDetails({ cocktailId: "11000" }) aan
→ Krijgt: { name: "Mojito", ingredients: [...], instructions: "..." }
AI antwoordt: "Met rum en limoen kun je een heerlijke Mojito maken!
Je hebt nog nodig: verse munt en suiker..."
```
---
### Deel 3: Agents - Autonome Multi-Step AI
**Van Tool Calling naar Agent:**
- Tool calling = AI roept 1 tool aan, klaar
- Agent = AI blijft tools aanroepen totdat de taak af is
**Het verschil is één parameter: `maxSteps`**
```typescript
const result = streamText({
model: openai('gpt-4o-mini'),
system: `Je bent een cocktail party planner.
Plan een compleet menu met alle details.`,
messages,
tools: { /* ... tools ... */ },
maxSteps: 8 // ← Agent mag 8 tool-calls doen
}) })
``` ```
--- #### Voorbeeld: Party Planner Agent
### Error Handling ```typescript
// app/api/party-planner/route.ts
import { openai } from '@ai-sdk/openai'
import { streamText, tool } from 'ai'
import { z } from 'zod'
```tsx export async function POST(req: Request) {
const { messages, error, reload } = useChat() const { messages } = await req.json()
{error && ( const result = streamText({
<div className="p-4 bg-red-100 text-red-700 rounded"> model: openai('gpt-4o'), // Gebruik slimmer model voor agent taken
<p>Something went wrong. Please try again.</p> system: `Je bent een professionele cocktail party planner.
<button onClick={reload}>Retry</button>
</div> Wanneer iemand een feest wil plannen:
)} 1. Zoek eerst cocktails die passen bij de wensen
2. Haal recepten op van de beste opties
3. Denk aan non-alcoholische alternatieven
4. Geef een compleet overzicht met ingrediënten
Wees proactief en denk mee.`,
messages,
tools: {
searchByIngredient: tool({
description: 'Zoek cocktails met een ingrediënt',
parameters: z.object({
ingredient: z.string()
}),
execute: async ({ ingredient }) => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${ingredient}`
)
return res.json()
}
}),
getCocktailDetails: tool({
description: 'Haal recept details op',
parameters: z.object({
cocktailId: z.string()
}),
execute: async ({ cocktailId }) => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${cocktailId}`
)
return res.json()
}
}),
searchNonAlcoholic: tool({
description: 'Zoek mocktails',
parameters: z.object({}),
execute: async () => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic`
)
return res.json()
}
}),
searchByCategory: tool({
description: 'Zoek cocktails per categorie (Cocktail, Shot, Beer, etc.)',
parameters: z.object({
category: z.string()
}),
execute: async ({ category }) => {
const res = await fetch(
`https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=${category}`
)
return res.json()
}
})
},
maxSteps: 10 // Agent kan tot 10 tool calls doen
})
return result.toDataStreamResponse()
}
```
**Agent in actie:**
```
User: "Plan cocktails voor mijn verjaardagsfeest.
15 mensen, een paar drinken geen alcohol,
we houden van citrus smaken."
Agent stappen:
1. searchByIngredient("lemon") → 12 cocktails
2. searchByIngredient("lime") → 15 cocktails
3. searchByIngredient("orange") → 10 cocktails
4. searchNonAlcoholic() → 8 mocktails
5. getCocktailDetails("11000") → Mojito recept
6. getCocktailDetails("11007") → Margarita recept
7. getCocktailDetails("12162") → Virgin Piña Colada recept
8. getCocktailDetails("12316") → Lemonade recept
Output: Compleet party plan met:
- 3 alcoholische cocktails met citrus
- 2 mocktails voor niet-drinkers
- Gecombineerde ingrediëntenlijst
- Tips voor bereiding
``` ```
--- ---
### Cost Management ### Gratis APIs voor Projecten
**Model keuze:** | API | Data | URL | Auth |
| Model | Kosten | Gebruik voor | |-----|------|-----|------|
|-------|--------|--------------| | TheCocktailDB | 636 cocktails, recepten | thecocktaildb.com/api.php | Geen (key=1) |
| gpt-4o-mini | Goedkoop | Meeste taken | | TheMealDB | 597 recepten, ingrediënten | themealdb.com/api.php | Geen (key=1) |
| gpt-4o | Duur | Complexe reasoning | | Open Trivia DB | 4000+ quiz vragen | opentdb.com/api_config.php | Geen |
| claude-3-haiku | Goedkoop | Simpele taken | | REST Countries | Landen data | restcountries.com | Geen |
| claude-3-sonnet | Medium | Balans | | Open Library | Boeken data | openlibrary.org/developers | Geen |
**Bespaartips:** ---
1. Gebruik gpt-4o-mini als default
2. Korte system prompts ### Best Practices
3. Beperk conversation history
4. Caching waar mogelijk **Tool Design:**
```typescript
// ✅ Goed: Specifieke, duidelijke tools
searchByIngredient: tool({
description: 'Zoek cocktails die een specifiek ingrediënt bevatten',
// ...
})
// ❌ Slecht: Vage tool
search: tool({
description: 'Zoek iets',
// ...
})
```
**Agent System Prompts:**
```typescript
// ✅ Goed: Geef duidelijke instructies
system: `Je bent een cocktail expert.
Wanneer je een vraag krijgt:
1. Zoek eerst relevante cocktails
2. Haal details op van de beste matches
3. Geef persoonlijk advies
Wees proactief en denk mee met de gebruiker.`
// ❌ Slecht: Te vaag
system: `Je bent een assistent.`
```
**Error Handling in Tools:**
```typescript
execute: async ({ ingredient }) => {
try {
const res = await fetch(`...`)
if (!res.ok) {
return { error: 'Kon geen cocktails vinden' }
}
return res.json()
} catch (error) {
return { error: 'API niet beschikbaar' }
}
}
```
--- ---
## Tools ## Tools
- Vercel AI SDK (`ai` package) - Vercel AI SDK (`ai` package)
- Zod (parameter validatie)
- Next.js API Routes - Next.js API Routes
- OpenAI API / Anthropic API - Externe APIs (TheCocktailDB, TheMealDB, etc.)
- Cursor
- Supabase
--- ---
## Lesopdracht (2 uur) ## Lesopdracht (2 uur)
### Bouw een AI Chat Component ### Bouw een AI Agent met Externe Data
**Deel 1: Setup (20 min)** **Deel 1: Setup (15 min)**
1. `npm install ai @ai-sdk/openai` 1. `npm install ai @ai-sdk/openai zod`
2. Voeg `OPENAI_API_KEY` toe aan `.env.local` 2. Voeg `OPENAI_API_KEY` toe aan `.env.local`
3. Maak `app/api/chat/route.ts` 3. Kies je API: TheCocktailDB of TheMealDB
**Deel 2: Basic Chat (40 min)** **Deel 2: Basic Tool Calling (45 min)**
1. Maak `components/Chat.tsx` 1. Maak `/api/chat/route.ts`
2. Implementeer `useChat` hook 2. Implementeer 2 tools:
3. Bouw chat UI met Tailwind - Zoek op ingrediënt
4. Test streaming werkt - Haal details op
3. Test: "Wat kan ik maken met [ingrediënt]?"
**Deel 3: System Prompt (30 min)** **Deel 3: Agent met maxSteps (45 min)**
1. Schrijf system prompt voor je eindproject: 1. Voeg `maxSteps: 5` toe
- Recipe Generator: cooking assistant 2. Voeg een 3e tool toe (bijv. zoek per categorie)
- Budget Buddy: financial advisor 3. Verbeter je system prompt voor agent gedrag
- Travel Planner: travel expert 4. Test: "Help me een menu plannen voor..."
2. Test met relevante vragen
**Deel 4: Supabase Integratie (30 min)** **Deel 4: Frontend (15 min)**
1. Maak `messages` tabel 1. Bouw chat UI met `useChat`
2. Sla berichten op met `onFinish` 2. Voeg loading indicator toe
3. Laad history bij page load 3. Test de complete flow
### Deliverable ### Deliverable
- Werkende AI chat met streaming - Werkende agent met minimaal 3 tools
- Custom system prompt - Chat interface
- Messages opgeslagen in Supabase - Screenshot van agent die meerdere tools aanroept
--- ---
@@ -283,50 +435,43 @@ const { messages, error, reload } = useChat()
### Bouw AI Feature voor Eindproject ### Bouw AI Feature voor Eindproject
**Deel 1: Core AI Feature (1 uur)** **Deel 1: Agent Design (30 min)**
Implementeer de AI chat die past bij je eindproject: Plan je agent voor de eindopdracht:
- Welke externe API gebruik je?
- Welke tools heeft je agent nodig? (minimaal 3)
- Wat is de typische flow?
| Project | AI Feature | Documenteer in `docs/AI-DECISIONS.md`
|---------|-----------|
| Recipe Generator | "Wat kan ik maken met kip en rijst?" |
| Budget Buddy | "Analyseer mijn uitgaven deze maand" |
| Travel Planner | "Plan een weekend Barcelona" |
- Custom system prompt **Deel 2: Implementatie (1 uur)**
- Context uit je database meegeven
**Deel 2: UX Polish (30 min)** Bouw de agent voor je eindproject:
- Minimaal 3 tools
- `maxSteps` van minimaal 3
- Goede error handling
- Relevante system prompt
Voeg toe: **Deel 3: Integratie (30 min)**
- Streaming indicator
- Suggested prompts / quick actions
- Copy response button
- Clear chat button
- Error handling
**Deel 3: Documentatie (30 min)** Combineer met Supabase:
- Sla user preferences op
Maak `docs/AI-FEATURE.md`: - Geef preferences mee als context aan agent
- Welke AI feature heb je gebouwd? - Sla conversation history op
- Wat doet de system prompt?
- Hoe integreert het met Supabase?
- Welke model keuzes heb je gemaakt?
### Deliverable ### Deliverable
- AI feature in eindproject - Werkende agent in eindproject
- Deployed preview - `docs/AI-DECISIONS.md` met agent design
- AI-FEATURE.md documentatie - Minimaal 5 prompts in `PROMPT-LOG.md`
--- ---
## Leerdoelen ## Leerdoelen
Na deze les kan de student: Na deze les kan de student:
- Vercel AI SDK installeren en configureren - Vercel AI SDK installeren en configureren
- `useChat` en `useCompletion` hooks gebruiken - Tools definiëren met Zod parameters
- Streaming responses implementeren - Tool Calling implementeren voor externe API integratie
- API routes opzetten voor AI providers - Agents bouwen met `maxSteps` voor autonome taken
- Custom system prompts schrijven - De juiste aanpak kiezen (basic chat vs tool calling vs agent)
- Chat history opslaan in Supabase - Error handling implementeren in tools
- Error handling en loading states implementeren - Gratis externe APIs integreren in AI features
- Kostenbewust omgaan met AI APIs

66
readme.md
View File

@@ -22,11 +22,11 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| 10 | [AI Tool Selection & Workflows](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting | | 10 | [AI Tool Selection & Workflows](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting | | 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting | | 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting | | 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting |
| 14 | [Project Setup & Repository Structure](Samenvattingen/Les14-Samenvatting.md) | 4 | 📋 Samenvatting | | 14 | [Project Setup & Repository Structure](Samenvattingen/Les14-Samenvatting.md) | 4 | 📋 Samenvatting |
| 15 | [MCP & Context Management](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting | | 15 | [MCP & Context Management](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
| 16 | [Mastering Cursor](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting | | 16 | [Mastering Cursor](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
| 17 | [Vercel AI SDK - AI Features in je App](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting | | 17 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
| 18 | [Deployment & Production](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting | | 18 | [Deployment & Production](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
--- ---
@@ -38,7 +38,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) | | Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) |
| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis | | Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
| Deel 3: AI Tooling & Prototyping | 10-12 | ChatGPT, Claude, v0.dev, OpenCode, Cursor | Free tier beschikbaar | | Deel 3: AI Tooling & Prototyping | 10-12 | ChatGPT, Claude, v0.dev, OpenCode, Cursor | Free tier beschikbaar |
| Deel 4: Advanced AI Features | 13-18 | Cursor, Claude Projects, Custom GPTs, Vercel AI SDK | Free tier beschikbaar | | Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |
**Eindopdracht:** Cursor (free tier voldoende) **Eindopdracht:** Cursor (free tier voldoende)
@@ -437,31 +437,31 @@ AI tools effectief inzetten voor professionele development.
--- ---
### Les 13: AI Agents - Custom GPTs & Claude Projects ### Les 13: Prompt Engineering & Custom GPTs
**Tools:** ChatGPT (Custom GPTs), Claude Desktop (Projects) **Tools:** ChatGPT (Custom GPTs), Claude (Projects)
**Docent vertelt:** **Docent vertelt:**
- Wat zijn AI Agents? Verschil chatbot vs agent - Advanced prompt engineering: structured output, constraints, iterative refinement
- Custom GPTs: hoe maak je ze, wat kun je ermee - Custom GPTs: hoe maak je ze, wanneer gebruiken
- Claude Projects: custom instructions + project knowledge - Claude Projects: custom instructions + project knowledge
- Wanneer een agent vs gewoon chatten - Vergelijking: Custom GPT vs Claude Project
- Best practices voor agent instructions - Prompt template library opbouwen
**Studenten doen:** **Studenten doen:**
- **Groepsdiscussie:** Bespreek Cursor reflecties - hoe verschilt het van OpenCode? - **Groepsdiscussie:** Bespreek Cursor reflecties - hoe verschilt het van OpenCode?
- Custom GPT maken voor code review - Custom GPT maken voor code review
- Claude Project opzetten voor eigen project - Claude Project opzetten voor eigen project
- Agents testen en vergelijken - Beide testen en vergelijken
- Instructions itereren en verbeteren - Persoonlijke prompt library starten
**Lesopdracht:** **Lesopdracht:**
1. Maak Custom GPT "Code Reviewer" met specifieke checklist 1. Maak Custom GPT "Code Reviewer" met specifieke checklist
2. Maak Claude Project voor je Todo app met project context 2. Maak Claude Project voor je project met context
3. Test beide met dezelfde code 3. Test beide met dezelfde code
4. Documenteer: welke geeft betere feedback? 4. Documenteer: welke is beter waarvoor?
**Huiswerk:** Maak "Personal Dev Assistant" agent afgestemd op jouw workflow, test in echt werk, deel je beste agent config met de klas. **Huiswerk:** Optimaliseer je AI assistants, maak persoonlijke prompt library, schrijf reflectie over Custom GPTs vs Claude Projects.
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md) [→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
@@ -565,35 +565,31 @@ Professionele workflows, advanced Cursor, AI features bouwen en deployment.
--- ---
### Les 17: Vercel AI SDK - AI Features in je App ### Les 17: Vercel AI SDK, Tool Calling & Agents
**Tools:** Vercel AI SDK, Cursor, OpenAI/Anthropic API **Tools:** Vercel AI SDK, Zod, Externe APIs (TheCocktailDB, TheMealDB, etc.)
**Docent vertelt:** **Docent vertelt:**
- Waarom Vercel AI SDK? (vs raw API calls) - Vercel AI SDK basics: useChat, streaming
- Installatie en setup - **Tool Calling:** AI laat externe APIs aanroepen
- useChat hook: chat interfaces bouwen - **Agents:** AI voert autonome multi-step taken uit met `maxSteps`
- useCompletion hook: single completions - Gratis APIs voor projecten (TheCocktailDB, TheMealDB, Open Trivia DB)
- Streaming responses: hoe en waarom - Best practices voor tool design en system prompts
- API routes voor AI
- System prompts schrijven
- Kosten en rate limiting
**Studenten doen:** **Studenten doen:**
- AI SDK installeren - AI SDK + Zod installeren
- API route maken - Tools definiëren voor externe API
- Chat component bouwen met useChat - Tool calling implementeren
- Streaming implementeren - Agent bouwen met `maxSteps`
- Custom system prompt schrijven - Error handling toevoegen
**Lesopdracht:** **Lesopdracht:**
1. `npm install ai @ai-sdk/openai` 1. Kies een gratis API (cocktails, recepten, of quiz)
2. Maak `/api/chat` route 2. Implementeer minimaal 3 tools
3. Bouw chat component met useChat 3. Bouw een agent met `maxSteps: 5`
4. Implementeer streaming 4. Test: "Plan een menu voor..." of vergelijkbare complexe taak
5. 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. **Huiswerk:** Bouw agent voor eindproject met externe API, minimaal 3 tools, documenteer design in AI-DECISIONS.md.
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md) [→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)