6.7 KiB
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:
- Instructions: Hoe moet de GPT zich gedragen?
- Conversation starters: Voorbeeld prompts
- Knowledge: Upload documenten als context
- 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:
- Project Knowledge: Upload relevante documenten
- Custom Instructions: Hoe moet Claude zich gedragen
- 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:
- Rol: Wie is de agent?
Je bent een senior React developer die code reviewt.
- Context: Wat is de situatie?
Je reviewt code voor een startup met strakke deadlines.
Focus op kritieke issues, niet op style preferences.
- Gedrag: Hoe moet hij reageren?
Wees direct maar vriendelijk.
Geef altijd een voorbeeld van de betere oplossing.
- Format: Hoe moet output eruitzien?
Gebruik markdown formatting.
Groepeer feedback per categorie.
- 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)
- Ga naar ChatGPT → Create GPT
- Maak "Code Reviewer" met deze checklist:
- TypeScript types
- React best practices
- Error handling
- Accessibility
- Performance
- Upload sample "goede" code als knowledge
- Test met code uit je Todo app
- Itereer op de instructions
Deel 2: Claude Project - Todo App Context (45 min)
- Maak nieuw Claude Project
- Upload je Todo app files als knowledge
- Schrijf custom instructions met je tech stack
- Test: vraag Claude om een nieuwe feature te bouwen
- 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:
- Code review van een component
- Help bij een bug
- 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