fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,139 +1,294 @@
|
||||
# Les 9: AI Agents - Custom GPTs & Claude Projects
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les09-Slide-Overzicht.md
|
||||
> - Les09-Lesplan.md
|
||||
> - Les09-Bijlage-A-Lesopdracht.md
|
||||
> - Les09-Bijlage-B-Huiswerkopdracht.md
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
Deep dive in AI agents - autonome systemen die kunnen plannen, tools gebruiken, en taken uitvoeren.
|
||||
Leer werken met AI Agents: gepersonaliseerde AI assistenten die je kunt trainen op jouw specifieke taken en werkwijze.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat zijn AI Agents?
|
||||
- Verschil tussen chatbot vs agent
|
||||
|
||||
### Agent Capabilities
|
||||
- Tool use
|
||||
- Memory
|
||||
- Planning
|
||||
- Learning
|
||||
- Proactief gedrag
|
||||
**Chatbot vs Agent:**
|
||||
|
||||
### Agent Frameworks Landschap
|
||||
- Custom GPTs
|
||||
- Claude Projects
|
||||
- LangChain
|
||||
- AutoGPT
|
||||
- CrewAI
|
||||
| Chatbot | Agent |
|
||||
|---------|-------|
|
||||
| Reageert op vragen | Neemt initiatief |
|
||||
| Geen geheugen | Onthoudt context |
|
||||
| Algemene kennis | Specifieke expertise |
|
||||
| Eenmalige interactie | Langere samenwerkingen |
|
||||
|
||||
### Custom GPTs Deep Dive
|
||||
- Instructions
|
||||
- Conversation starters
|
||||
- Knowledge base upload
|
||||
- Capabilities
|
||||
**Agent = AI met:**
|
||||
- Custom instructies (hoe moet hij zich gedragen)
|
||||
- Eigen kennis (documenten, voorbeelden)
|
||||
- Specifieke taken (waar is hij goed in)
|
||||
|
||||
### Use Cases voor Developers
|
||||
- Code review agent
|
||||
- Testing agent
|
||||
- Documentation generator
|
||||
---
|
||||
|
||||
### Claude Projects Deep Dive
|
||||
- Custom instructions
|
||||
- Project knowledge
|
||||
- Example conversations
|
||||
- Advanced features (artifacts, long context, tool use)
|
||||
### Custom GPTs (ChatGPT)
|
||||
|
||||
### Projects Combineren met MCP
|
||||
- Access tot externe data
|
||||
**Wat is een Custom GPT?**
|
||||
Een gepersonaliseerde versie van ChatGPT voor specifieke taken.
|
||||
|
||||
### Real-World Developer Agents Bouwen
|
||||
**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
|
||||
- Custom GPTs (OpenAI)
|
||||
- Claude Projects (Anthropic)
|
||||
- MCP
|
||||
- ChatGPT (Custom GPTs)
|
||||
- Claude Desktop (Projects)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deel 1: Build Code Review Agent (1 uur)
|
||||
### Bouw Je Eerste AI Agents
|
||||
|
||||
**Groepswerk (20 min):**
|
||||
In groepjes van 2-3:
|
||||
- Definieer comprehensive code review checklist:
|
||||
- TypeScript
|
||||
- React patterns
|
||||
- Accessibility
|
||||
- Security
|
||||
- Performance
|
||||
- Code organization
|
||||
**Deel 1: Custom GPT - Code Reviewer (45 min)**
|
||||
|
||||
**Maak Agent (30 min):**
|
||||
- Maak Custom GPT OF Claude Project met checklist als instructions
|
||||
- Upload sample "goede" code als knowledge base (10 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: Build Documentation Agent (1 uur)
|
||||
**Deel 2: Claude Project - Todo App Context (45 min)**
|
||||
|
||||
**Individueel:**
|
||||
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?
|
||||
|
||||
Maak agent die comprehensive documentatie genereert.
|
||||
**Deel 3: Vergelijking (30 min)**
|
||||
|
||||
**Instructions:**
|
||||
> "Je bent documentatie expert. Gegeven component code, genereer:
|
||||
> 1. Component overview
|
||||
> 2. Props documentatie
|
||||
> 3. Usage voorbeelden
|
||||
> 4. Accessibility notes
|
||||
> 5. Veel voorkomende valkuilen"
|
||||
Test dezelfde vraag in beide:
|
||||
```
|
||||
Review deze code en geef verbeter suggesties:
|
||||
[plak je TodoList component]
|
||||
```
|
||||
|
||||
- Upload component library uit Les 6 als knowledge base
|
||||
- Test agent met 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)
|
||||
|
||||
### Deel 1: Test Agents in Workflow (1 uur)
|
||||
### Personal Dev Assistant
|
||||
|
||||
**Bouw nieuwe Todo app feature:**
|
||||
- Bijv. "Collaboration - invite users om todos te delen"
|
||||
**Deel 1: Bouw Je Personal Assistant (1 uur)**
|
||||
|
||||
**Gebruik beide agents:**
|
||||
- Code Review agent om code te reviewen
|
||||
- Documentation agent om te documenteren
|
||||
Maak een Custom GPT of Claude Project die:
|
||||
- Jouw coding standards kent
|
||||
- Jouw tech stack begrijpt
|
||||
- Jouw workflow ondersteunt
|
||||
|
||||
**Track:**
|
||||
- Hoe helpful?
|
||||
- Vingen ze echte issues?
|
||||
- Zou je dagelijks gebruiken?
|
||||
**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: Personal Dev Assistant (1 uur)
|
||||
**Deel 2: Test in Echt Werk (45 min)**
|
||||
|
||||
**Maak comprehensive "Personal Dev Assistant" agent afgestemd op JOUW workflow.**
|
||||
Gebruik je assistant voor echte taken:
|
||||
1. Code review van een component
|
||||
2. Help bij een bug
|
||||
3. Genereer documentatie
|
||||
|
||||
**Include:**
|
||||
- Jouw coding standards
|
||||
- Preferred patterns
|
||||
- Tech stack specifics
|
||||
- Veel voorkomende taken
|
||||
- Troubleshooting kennis
|
||||
**Deel 3: Reflectie (15 min)**
|
||||
|
||||
- Test extensively
|
||||
- Deel agent config als gist
|
||||
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)
|
||||
|
||||
---
|
||||
|
||||
@@ -141,7 +296,7 @@ Maak agent die comprehensive documentatie genereert.
|
||||
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
|
||||
- Specialized developer agents bouwen (code review, documentation)
|
||||
- Agents combineren met MCP voor externe data access
|
||||
- Een personal dev assistant agent maken
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user