novi-lessons/Samenvattingen/Les06-Samenvatting.md

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