134 lines
3.1 KiB
Markdown
134 lines
3.1 KiB
Markdown
# 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
|