fix: add lesson files

Samenvattingen/Les06-Samenvatting.md

@@ -0,0 +1,133 @@
+# Les 6: MCP (Model Context Protocol) & Component Libraries
+
+## 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:**
+1. Modal/Dialog
+2. Toast notifications
+3. Dropdown Menu
+4. Tabs
+5. 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