3.4 KiB
3.4 KiB
Les 6: MCP (Model Context Protocol) & Component Libraries
📋 Lesmateriaal nog niet uitgewerkt
De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
- Les06-Slide-Overzicht.md
- Les06-Lesplan.md
- Les06-Bijlage-A-Lesopdracht.md
- Les06-Bijlage-B-Huiswerkopdracht.md
Hoofdstuk
Hoofdstuk 2: Intermediate (Les 4-9)
Beschrijving
Revolutionaire manier om AI te verbinden met data sources via MCP, gecombineerd met systematisch component library bouwen.
Te Behandelen
MCP (Model Context Protocol)
Wat is MCP?
- Anthropic's protocol om LLMs veilig te verbinden met externe tools en data
Waarom MCP belangrijk is:
- Gestructureerde data access
- Security
- Reusability
MCP Servers:
- Filesystem
- Databases (Supabase/PostgreSQL)
- APIs (GitHub, Slack, Google Drive)
- Web search
MCP Installatie en Configuratie:
- Claude Desktop configuratie
Component Libraries & Design Systems
Shadcn/ui:
- Systematisch bouwen met Shadcn/ui
- Design tokens en consistency
Component Patterns:
- Component composition patterns
- Building data-driven components die MCP data consumeren
- Accessibility in component libraries
- Documentation patterns
Tools
- Claude Desktop
- MCP servers
- Shadcn/ui
- OpenCode/WebStorm
- Supabase
Lesopdracht (2 uur)
Deel 1: MCP Setup (45 min)
Installatie:
- Installeer Claude Desktop app
- Configureer MCP servers:
- Filesystem server (access local files)
- Supabase MCP server (connect to database)
Test MCP:
- Vraag Claude om data uit je Supabase database te tonen
- Of files uit je project te analyseren
- Zie hoe Claude real-time data kan ophalen en gebruiken
Deel 2: Component Library met MCP Data (1u 15min)
Bouw Shadcn-based component library met AI in OpenCode/WebStorm:
| Component | Features |
|---|---|
| DataTable | Sortable, filterable, pagination |
| Card | Variant system |
| Form components | Input, Select, Textarea met validation states |
| Button | Size variants, loading states, icon support |
MCP Integration:
- Bouw Dashboard component die via MCP data uit Supabase haalt
- Toon data in je components
- Test: wijzig data in database, zie updates via MCP
Huiswerk (2 uur)
Deel 1: Extend Component Library (1 uur)
Voeg 5 extra components toe:
- Modal/Dialog
- Toast notifications
- Dropdown Menu
- Tabs
- Accordion
Alle components moeten hebben:
- TypeScript
- Accessibility (ARIA)
- Dark mode support
- Responsive
Gebruik AI + Skills voor consistent design
Deel 2: MCP Deep Dive (1 uur)
Experimenteer met extra MCP servers:
- Install GitHub MCP server (access repos/issues)
- Of Google Drive MCP server
- Of custom MCP server voor een API
Bouw feature die MCP data combineert:
- Bijv. dashboard dat GitHub issues + Supabase data toont
Documenteer:
- Wat kun je allemaal met MCP?
- Wat zijn limitations?
- Hoe verschilt dit van normale API calls?
Deel als GitHub repo met MCP setup instructions
Leerdoelen
Na deze les kan de student:
- MCP begrijpen en configureren in Claude Desktop
- MCP servers koppelen (filesystem, Supabase, APIs)
- Een systematische component library bouwen met Shadcn/ui
- Data-driven components bouwen die MCP data consumeren
- Accessibility implementeren in component libraries
- Het verschil tussen MCP en normale API calls uitleggen