fix: lessons
This commit is contained in:
@@ -1,122 +1,80 @@
|
||||
# Les 16: Eindproject Werkdag 2
|
||||
# Les 16: Model Context Protocol — Bouw je eigen MCP-server
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les16-MCP/Les16-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les16-MCP/Les16-Docenttekst.md)
|
||||
- [Lesstof](../Les16-MCP/Les16-Lesstof.md)
|
||||
- [Lesopdracht](../Les16-MCP/Les16-Lesopdracht.md)
|
||||
- [Huiswerk](../Les16-MCP/Les16-Huiswerk.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 4: Advanced AI & Deployment** (Les 13-18)
|
||||
## Deel
|
||||
**Deel 3 — AI Development** (Les 11-16)
|
||||
|
||||
## Beschrijving
|
||||
Verlengde werksessie voor je eindproject. Continue Development Day waar je intensief aan je AI-powered applicatie werkt met begeleiding en feedback van de docent.
|
||||
MCP (Model Context Protocol) is de open standaard waarmee Anthropic, OpenAI en de community AI-clients koppelen aan tools en data. We bouwen een eigen MCP-server voor Polderfest-data en laden hem in Cursor én Claude Desktop.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de deployment ervaringen uit Les 15 - welke problemen kwamen jullie tegen en hoe losten jullie die op?
|
||||
### Theorie
|
||||
- Wat is MCP en waarom bestaat het?
|
||||
- Het probleem: tools zitten nu vast aan één app
|
||||
- MCP-architectuur: server, client, transport (stdio, HTTP)
|
||||
- Tools vs. Resources vs. Prompts
|
||||
- Bestaande MCP-ecosysteem (filesystem, git, Slack, GitHub)
|
||||
- MCP vs. Tool Calling — wanneer welke?
|
||||
|
||||
### Doel van deze werkdag
|
||||
|
||||
Deze les is puur praktisch werken:
|
||||
- Bugs fixen die je bent tegengekomen
|
||||
- Features afmaken die nog niet klaar zijn
|
||||
- Code cleanup en optimalisatie
|
||||
- Performance verbeteren
|
||||
- Documentatie aanpassen
|
||||
- Testen in productie
|
||||
|
||||
---
|
||||
|
||||
### Checklist voor deze sessie
|
||||
|
||||
**Code Quality:**
|
||||
- [ ] TypeScript geen errors
|
||||
- [ ] ESLint check passed
|
||||
- [ ] Geen unused imports/variables
|
||||
- [ ] Proper error handling overal
|
||||
|
||||
**Features:**
|
||||
- [ ] Alle core features werken
|
||||
- [ ] AI feature functionaliteit compleet
|
||||
- [ ] Edge cases afgehandeld
|
||||
- [ ] Loading states geimplementeerd
|
||||
- [ ] Error states geimplementeerd
|
||||
|
||||
**Performance:**
|
||||
- [ ] Lighthouse score > 80
|
||||
- [ ] Images optimized
|
||||
- [ ] Lazy loading waar nodig
|
||||
- [ ] Bundle size reasonable
|
||||
|
||||
**Deployment:**
|
||||
- [ ] Builds succesvol lokaal
|
||||
- [ ] Alle env vars in Vercel
|
||||
- [ ] Works in production
|
||||
- [ ] Supabase redirects configured
|
||||
### Live demo's
|
||||
1. MCP SDK installeren + eerste server met 1 tool
|
||||
2. Server laden in Cursor + in Claude Desktop
|
||||
3. Eigen Polderfest MCP-server (search, stats, schedule)
|
||||
4. Resources en Prompts toevoegen
|
||||
5. Server publiceren op npm
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Chrome DevTools
|
||||
- Vercel Dashboard
|
||||
- Supabase Dashboard
|
||||
- GitHub
|
||||
- `@modelcontextprotocol/sdk` (TypeScript)
|
||||
- Cursor (`.cursor/mcp.json`)
|
||||
- Claude Desktop (`claude_desktop_config.json`)
|
||||
- Node.js + TypeScript
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (4 uur)
|
||||
## Lesopdracht (in-class, 60 min)
|
||||
|
||||
### Intensive Development Session
|
||||
Studenten kijken mee. In-class oefening:
|
||||
- Clone de Polderfest MCP-starter
|
||||
- Voeg een eigen tool toe (`getBandByCountry`)
|
||||
- Laad de server in Cursor of Claude Desktop
|
||||
- Test of de AI je tool vindt en gebruikt
|
||||
|
||||
**Hou je voortgang bij:**
|
||||
|
||||
**Eerste uur:**
|
||||
- [ ] Maak prioriteiten list
|
||||
- [ ] Fix top 3 bugs
|
||||
- [ ] Test alles lokaal
|
||||
|
||||
**Twee uur:**
|
||||
- [ ] Implementeer ontbrekende features
|
||||
- [ ] Add missing error handling
|
||||
- [ ] Improve styling/UX
|
||||
|
||||
**Drie uur:**
|
||||
- [ ] Code cleanup
|
||||
- [ ] Performance optimization
|
||||
- [ ] Redeploy
|
||||
|
||||
**Vier uur:**
|
||||
- [ ] Final testing in production
|
||||
- [ ] Screenshot taken
|
||||
- [ ] Docs updated
|
||||
|
||||
### Deliverable
|
||||
- Werkende app (lokaal en productie)
|
||||
- Updated PROMPT-LOG.md
|
||||
- Updated AI-DECISIONS.md
|
||||
- Screenshot van werkende app
|
||||
**Inleveren:** Screenshot van werkende MCP-tool in Cursor/Claude.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk
|
||||
## Huiswerk (take-home)
|
||||
|
||||
Continue working on your end project for next session. Make sure to:
|
||||
- Push all changes to GitHub
|
||||
- Document what you've done
|
||||
- List remaining work for next session
|
||||
Bouw een MCP-server voor je eigen domein:
|
||||
- Minimaal 3 tools
|
||||
- 1 resource (bijv. een doc-bestand)
|
||||
- 1 prompt-template
|
||||
- README met installatie-instructies voor Cursor
|
||||
|
||||
### Deliverable
|
||||
- All work committed and pushed
|
||||
- Documentation current
|
||||
- Task list for Les 17
|
||||
**Inleveren:** GitHub URL via Teams.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Zelfstandig bugs identificeren en fixen
|
||||
- Code quality verbeteren
|
||||
- Performance optimisatie toepassen
|
||||
- Productie deployment testen en valideren
|
||||
- Documentatie up-to-date houden
|
||||
- MCP uitleggen aan een collega (waarom + hoe)
|
||||
- Een eigen MCP-server opzetten met de TypeScript SDK
|
||||
- Een server laden in Cursor en/of Claude Desktop
|
||||
- Het verschil tussen Tool, Resource en Prompt benoemen
|
||||
- Bepalen wanneer een MCP-server vs. inline tool calling past
|
||||
|
||||
Reference in New Issue
Block a user