# 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