288 lines
5.9 KiB
Markdown
288 lines
5.9 KiB
Markdown
# Les 13: AI Agents & Custom GPTs
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 4: Advanced AI Features** (Les 13-18)
|
|
|
|
## Beschrijving
|
|
Leer werken met AI agents en custom GPTs. Bouw je eigen gespecialiseerde AI assistenten en begrijp hoe agents autonome taken kunnen uitvoeren.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Groepsdiscussie (15 min)
|
|
Bespreek klassikaal de Cursor reflecties uit Les 12 - welke features werken het beste voor welke taken?
|
|
|
|
### Wat zijn AI Agents?
|
|
|
|
**Definitie:** AI systemen die autonoom taken kunnen uitvoeren, niet alleen antwoorden geven.
|
|
|
|
**Verschil Chat vs Agent:**
|
|
|
|
| Aspect | Chat | Agent |
|
|
|--------|------|-------|
|
|
| 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.
|
|
|
|
Technologie stack:
|
|
- Next.js 14 met App Router
|
|
- TypeScript strict mode
|
|
- Tailwind CSS
|
|
- Supabase voor backend
|
|
|
|
Coding conventions:
|
|
- Functional components met TypeScript
|
|
- Named exports (geen default exports)
|
|
- Error handling met try/catch
|
|
- Nederlandse comments in code
|
|
```
|
|
|
|
---
|
|
|
|
### Custom GPTs
|
|
|
|
**Wat zijn Custom GPTs?**
|
|
Gespecialiseerde ChatGPT versies met:
|
|
- Specifieke instructies
|
|
- Eigen kennis (uploaded files)
|
|
- Optioneel: Actions (API calls)
|
|
|
|
**Wanneer een Custom GPT maken:**
|
|
- Repetitieve taken met dezelfde context
|
|
- Specifieke expertise nodig
|
|
- Delen met anderen
|
|
|
|
**Custom GPT maken:**
|
|
1. Ga naar chat.openai.com/gpts
|
|
2. Klik "Create"
|
|
3. Configureer in "Create" tab OF gebruik "Configure"
|
|
|
|
**Voorbeeld: Code Review GPT**
|
|
```
|
|
Instructions:
|
|
Je bent een code reviewer gespecialiseerd in React/Next.js.
|
|
|
|
Bij elke code review check je:
|
|
1. TypeScript best practices
|
|
2. React hooks correct gebruik
|
|
3. Performance (unnecessary re-renders)
|
|
4. Accessibility basics
|
|
5. Error handling
|
|
|
|
Geef feedback in dit format:
|
|
- ✅ Goed: [wat goed is]
|
|
- ⚠️ Suggestie: [verbeterpunten]
|
|
- ❌ Issue: [problemen die gefixed moeten worden]
|
|
```
|
|
|
|
---
|
|
|
|
### 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"
|
|
```
|
|
|
|
**Geef constraints:**
|
|
```
|
|
❌ "Maak het beter"
|
|
✅ "Refactor naar max 50 regels, behoud dezelfde functionaliteit"
|
|
```
|
|
|
|
**Definieer output format:**
|
|
```
|
|
Geef je antwoord in dit format:
|
|
1. Samenvatting (1 zin)
|
|
2. Gevonden issues (bullet points)
|
|
3. Voorgestelde fix (code)
|
|
```
|
|
|
|
---
|
|
|
|
### Prompt Templates
|
|
|
|
**Code Generation Template:**
|
|
```
|
|
Context: [beschrijf je project/stack]
|
|
Taak: [wat moet er gemaakt worden]
|
|
Requirements:
|
|
- [requirement 1]
|
|
- [requirement 2]
|
|
Constraints:
|
|
- [constraint 1]
|
|
Output: [gewenst format]
|
|
```
|
|
|
|
**Debugging Template:**
|
|
```
|
|
Error message:
|
|
[plak error]
|
|
|
|
Relevante code:
|
|
[plak code]
|
|
|
|
Wat ik verwacht:
|
|
[gewenst gedrag]
|
|
|
|
Wat er gebeurt:
|
|
[actueel gedrag]
|
|
```
|
|
|
|
---
|
|
|
|
## Tools
|
|
- ChatGPT Custom GPTs
|
|
- Claude Projects
|
|
- Cursor (Composer mode)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw Je Eigen AI Assistant
|
|
|
|
**Deel 1: Claude Project (45 min)**
|
|
|
|
Maak een Claude Project voor je eindproject:
|
|
1. Ga naar claude.ai → Projects → New Project
|
|
2. Schrijf project instructions:
|
|
- Tech stack
|
|
- Coding conventions
|
|
- Project specifieke regels
|
|
3. Upload relevante files (schema, README)
|
|
4. Test met 3 verschillende vragen
|
|
|
|
**Deel 2: Custom GPT (45 min)**
|
|
|
|
Maak een Custom GPT voor code review:
|
|
1. Ga naar chat.openai.com/gpts
|
|
2. Klik "Create"
|
|
3. Schrijf instructions voor jouw stack
|
|
4. Test met code uit je project
|
|
|
|
**Deel 3: Vergelijking (30 min)**
|
|
|
|
Test dezelfde taak met beide:
|
|
- "Review deze component op best practices"
|
|
- Noteer verschillen in output
|
|
- Welke is beter voor welk doel?
|
|
|
|
### Deliverable
|
|
- Claude Project URL
|
|
- Custom GPT (als je ChatGPT Plus hebt) of instructies doc
|
|
- Vergelijkingsnotities
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Optimaliseer Je AI Assistants
|
|
|
|
**Deel 1: Iteratie (1 uur)**
|
|
|
|
Verbeter je Claude Project:
|
|
1. Test met 5 verschillende taken
|
|
2. Noteer waar instructies tekortschieten
|
|
3. Pas instructies aan
|
|
4. Test opnieuw
|
|
|
|
Documenteer in `docs/AI-ASSISTANTS.md`:
|
|
- Originele instructies
|
|
- Wat niet werkte
|
|
- Verbeterde instructies
|
|
- Resultaat verschil
|
|
|
|
**Deel 2: Prompt Library (30 min)**
|
|
|
|
Maak een persoonlijke prompt library:
|
|
```markdown
|
|
# Mijn Prompt Templates
|
|
|
|
## Code Generation
|
|
[template]
|
|
|
|
## Debugging
|
|
[template]
|
|
|
|
## Code Review
|
|
[template]
|
|
|
|
## Refactoring
|
|
[template]
|
|
```
|
|
|
|
**Deel 3: Reflectie (30 min)**
|
|
|
|
Schrijf reflectie (300 woorden):
|
|
- Welke AI assistant gebruik je waarvoor?
|
|
- Wat is het verschil tussen Claude Projects en Custom GPTs?
|
|
- Hoe heeft dit je workflow verbeterd?
|
|
|
|
### Deliverable
|
|
- Geoptimaliseerde AI assistant instructies
|
|
- Prompt library document
|
|
- Reflectie (300 woorden)
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Het verschil uitleggen tussen chat en agent
|
|
- Een Claude Project aanmaken en configureren
|
|
- Een Custom GPT maken met specifieke instructies
|
|
- Effectieve agent instructies schrijven
|
|
- Prompt templates gebruiken voor consistente resultaten
|
|
- De juiste AI assistant kiezen per taak
|