# 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