303 lines
6.7 KiB
Markdown
303 lines
6.7 KiB
Markdown
# Les 9: AI Agents - Custom GPTs & Claude Projects
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
|
|
|
## Beschrijving
|
|
Leer werken met AI Agents: gepersonaliseerde AI assistenten die je kunt trainen op jouw specifieke taken en werkwijze.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Wat zijn AI Agents?
|
|
|
|
**Chatbot vs Agent:**
|
|
|
|
| Chatbot | Agent |
|
|
|---------|-------|
|
|
| Reageert op vragen | Neemt initiatief |
|
|
| Geen geheugen | Onthoudt context |
|
|
| Algemene kennis | Specifieke expertise |
|
|
| Eenmalige interactie | Langere samenwerkingen |
|
|
|
|
**Agent = AI met:**
|
|
- Custom instructies (hoe moet hij zich gedragen)
|
|
- Eigen kennis (documenten, voorbeelden)
|
|
- Specifieke taken (waar is hij goed in)
|
|
|
|
---
|
|
|
|
### Custom GPTs (ChatGPT)
|
|
|
|
**Wat is een Custom GPT?**
|
|
Een gepersonaliseerde versie van ChatGPT voor specifieke taken.
|
|
|
|
**Onderdelen:**
|
|
1. **Instructions:** Hoe moet de GPT zich gedragen?
|
|
2. **Conversation starters:** Voorbeeld prompts
|
|
3. **Knowledge:** Upload documenten als context
|
|
4. **Capabilities:** Web browsing, code interpreter, DALL-E
|
|
|
|
**Voorbeeld: Code Reviewer GPT**
|
|
|
|
*Instructions:*
|
|
```
|
|
Je bent een strenge code reviewer voor React/TypeScript projecten.
|
|
|
|
Bij elke code review check je:
|
|
1. TypeScript types correct?
|
|
2. React best practices gevolgd?
|
|
3. Geen hardcoded values?
|
|
4. Error handling aanwezig?
|
|
5. Accessibility (ARIA labels)?
|
|
|
|
Geef feedback in dit format:
|
|
- ✅ Goed: [wat is goed]
|
|
- ⚠️ Verbeter: [wat kan beter]
|
|
- ❌ Fix: [wat moet gefixed worden]
|
|
|
|
Wees streng maar constructief.
|
|
```
|
|
|
|
---
|
|
|
|
### Claude Projects
|
|
|
|
**Wat is een Claude Project?**
|
|
Een Claude-omgeving met custom context voor een specifiek project.
|
|
|
|
**Onderdelen:**
|
|
1. **Project Knowledge:** Upload relevante documenten
|
|
2. **Custom Instructions:** Hoe moet Claude zich gedragen
|
|
3. **Conversation History:** Context blijft bewaard
|
|
|
|
**Voordelen:**
|
|
- Langere context dan ChatGPT
|
|
- Betere nuance in antwoorden
|
|
- Artifacts voor code en documenten
|
|
|
|
**Voorbeeld: Project voor je Todo App**
|
|
|
|
*Custom Instructions:*
|
|
```
|
|
Dit is mijn Todo app project.
|
|
|
|
Tech stack:
|
|
- Next.js 14 met App Router
|
|
- TypeScript
|
|
- Tailwind CSS
|
|
- Supabase voor database en auth
|
|
|
|
Code conventies:
|
|
- Functional components
|
|
- Named exports
|
|
- Async/await (geen .then)
|
|
|
|
Als je code schrijft, volg altijd deze conventies.
|
|
```
|
|
|
|
*Project Knowledge:*
|
|
- Upload je belangrijkste component files
|
|
- Upload je Supabase schema
|
|
|
|
---
|
|
|
|
### Wanneer Welke Gebruiken?
|
|
|
|
| Situatie | Tool |
|
|
|----------|------|
|
|
| Snelle code review | Custom GPT |
|
|
| Werken aan specifiek project | Claude Project |
|
|
| Documentatie genereren | Custom GPT |
|
|
| Lange context nodig | Claude Project |
|
|
| Wil delen met anderen | Custom GPT |
|
|
| Privé project context | Claude Project |
|
|
|
|
---
|
|
|
|
### Custom GPT Maken
|
|
|
|
**Stap 1:** Ga naar chat.openai.com → "Explore GPTs" → "Create"
|
|
|
|
**Stap 2:** Vul in:
|
|
- Naam: "React Code Reviewer"
|
|
- Beschrijving: "Reviews React/TypeScript code"
|
|
- Instructions: (zie voorbeeld hierboven)
|
|
|
|
**Stap 3:** Test met echte code
|
|
|
|
**Stap 4:** Itereer op instructions
|
|
- Wat mist hij?
|
|
- Wat doet hij verkeerd?
|
|
- Pas aan en test opnieuw
|
|
|
|
---
|
|
|
|
### Claude Project Maken
|
|
|
|
**Stap 1:** Ga naar claude.ai → "Projects" → "Create project"
|
|
|
|
**Stap 2:** Geef project een naam
|
|
|
|
**Stap 3:** Upload Project Knowledge
|
|
- Drag & drop je belangrijkste files
|
|
- Of kopieer/plak code snippets
|
|
|
|
**Stap 4:** Schrijf Custom Instructions
|
|
- Beschrijf je tech stack
|
|
- Beschrijf je conventies
|
|
- Beschrijf wat je wilt dat Claude doet
|
|
|
|
**Stap 5:** Start chatten binnen het project
|
|
|
|
---
|
|
|
|
### Agent Instructions Schrijven
|
|
|
|
**Goede instructions bevatten:**
|
|
|
|
1. **Rol:** Wie is de agent?
|
|
```
|
|
Je bent een senior React developer die code reviewt.
|
|
```
|
|
|
|
2. **Context:** Wat is de situatie?
|
|
```
|
|
Je reviewt code voor een startup met strakke deadlines.
|
|
Focus op kritieke issues, niet op style preferences.
|
|
```
|
|
|
|
3. **Gedrag:** Hoe moet hij reageren?
|
|
```
|
|
Wees direct maar vriendelijk.
|
|
Geef altijd een voorbeeld van de betere oplossing.
|
|
```
|
|
|
|
4. **Format:** Hoe moet output eruitzien?
|
|
```
|
|
Gebruik markdown formatting.
|
|
Groepeer feedback per categorie.
|
|
```
|
|
|
|
5. **Beperkingen:** Wat moet hij NIET doen?
|
|
```
|
|
Herschrijf niet de hele codebase.
|
|
Focus op de gevraagde code, niet op andere files.
|
|
```
|
|
|
|
---
|
|
|
|
### Praktische Agent Ideeën
|
|
|
|
| Agent | Doel |
|
|
|-------|------|
|
|
| **Code Reviewer** | Check code op bugs en best practices |
|
|
| **Doc Generator** | Genereer documentatie voor components |
|
|
| **Bug Debugger** | Help bij error messages uitleggen |
|
|
| **Refactor Helper** | Suggesties voor code verbetering |
|
|
| **Test Writer** | Genereer unit tests |
|
|
| **Rubber Duck** | Denk hardop mee over problemen |
|
|
|
|
---
|
|
|
|
## Tools
|
|
- ChatGPT (Custom GPTs)
|
|
- Claude Desktop (Projects)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw Je Eerste AI Agents
|
|
|
|
**Deel 1: Custom GPT - Code Reviewer (45 min)**
|
|
|
|
1. Ga naar ChatGPT → Create GPT
|
|
2. Maak "Code Reviewer" met deze checklist:
|
|
- TypeScript types
|
|
- React best practices
|
|
- Error handling
|
|
- Accessibility
|
|
- Performance
|
|
3. Upload sample "goede" code als knowledge
|
|
4. Test met code uit je Todo app
|
|
5. Itereer op de instructions
|
|
|
|
**Deel 2: Claude Project - Todo App Context (45 min)**
|
|
|
|
1. Maak nieuw Claude Project
|
|
2. Upload je Todo app files als knowledge
|
|
3. Schrijf custom instructions met je tech stack
|
|
4. Test: vraag Claude om een nieuwe feature te bouwen
|
|
5. Vergelijk: kent hij je project context?
|
|
|
|
**Deel 3: Vergelijking (30 min)**
|
|
|
|
Test dezelfde vraag in beide:
|
|
```
|
|
Review deze code en geef verbeter suggesties:
|
|
[plak je TodoList component]
|
|
```
|
|
|
|
Documenteer:
|
|
- Welke geeft betere feedback?
|
|
- Welke voelt meer "op maat"?
|
|
- Wanneer zou je welke gebruiken?
|
|
|
|
### Deliverable
|
|
- Werkende Custom GPT (link delen)
|
|
- Claude Project met project context
|
|
- Vergelijkings notities
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Personal Dev Assistant
|
|
|
|
**Deel 1: Bouw Je Personal Assistant (1 uur)**
|
|
|
|
Maak een Custom GPT of Claude Project die:
|
|
- Jouw coding standards kent
|
|
- Jouw tech stack begrijpt
|
|
- Jouw workflow ondersteunt
|
|
|
|
**Include in instructions:**
|
|
- Jouw voorkeuren (tabs vs spaces, etc.)
|
|
- Jouw tech stack details
|
|
- Typische taken die je doet
|
|
- Hoe je feedback wilt krijgen
|
|
|
|
**Deel 2: Test in Echt Werk (45 min)**
|
|
|
|
Gebruik je assistant voor echte taken:
|
|
1. Code review van een component
|
|
2. Help bij een bug
|
|
3. Genereer documentatie
|
|
|
|
**Deel 3: Reflectie (15 min)**
|
|
|
|
Schrijf korte reflectie (300 woorden):
|
|
- Hoe helpful was je agent?
|
|
- Wat zou je verbeteren?
|
|
- Ga je dit blijven gebruiken?
|
|
|
|
### Deliverable
|
|
- Personal Dev Assistant (GPT link of Claude Project screenshot)
|
|
- 3 voorbeelden van gebruik
|
|
- Reflectie (300 woorden)
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Het verschil uitleggen tussen chatbots en AI agents
|
|
- Custom GPTs bouwen met instructions en knowledge base
|
|
- Claude Projects opzetten met custom instructions en context
|
|
- Effectieve agent instructions schrijven
|
|
- De juiste tool kiezen (Custom GPT vs Claude Project)
|
|
- Een personal dev assistant maken voor eigen workflow
|