Claude Code en privacy: zo bouw je een GDPR-melding die je gebruikers wél vertrouwen geeft

Signal-topvrouw geeft je onbedoeld een bouw-opdracht

Meredith Whittaker, CEO van Signal, sloeg dit weekend hard op tafel in een interview met TechCrunch. Haar boodschap: AI-chatbots zijn niet je vrienden, geen bewuste wezens, en zeker geen vertrouwde gesprekspartners. Ze plaatst dit in de context van dataverzameling en de manier waarop grote platforms gebruikers een vals gevoel van intimiteit geven terwijl ze data binnenhalen.

Niets nieuws onder de zon voor insiders, maar het haalt vandaag wél mainstream aandacht. En dat raakt direct aan iets dat veel makers van SaaS-producten systematisch voor zich uitschuiven: eerlijke, leesbare privacy-communicatie naar hun gebruikers.

Wat betekent dit voor jouw project?

Als je een SaaS bouwt, ook een kleine, verzamel je data. Misschien e-mailadressen, gebruiksgedrag, of je laat zelfs een AI-component meekijken in sessies. Gebruikers vragen zich steeds vaker af wat er met hun data gebeurt, en de timing is goed om dit netjes te regelen.

Een GDPR-conforme melding en cookie-banner klinken als iets voor een jurist, maar de basiselementen zijn prima te bouwen met Claude Code. Vanavond bouw je de UI en de logica, zodat je morgen gewoon verder kunt met de features die je écht wilt maken.

Hoe pak je het aan met Claude Code?

Stap 1: Zet de context neer in CLAUDE.md

Open je project in Claude Code en voeg dit toe aan je CLAUDE.md (of maak het aan als je het nog niet hebt):

## Privacy-context
- Dit project verzamelt: [vul in, bv. e-mailadres bij registratie, anonieme pageviews via Plausible]
- We gebruiken GEEN third-party tracking pixels
- We slaan sessie-data op in: [bv. Supabase / localStorage]
- Rechtsgrondslag verwerking: toestemming (opt-in)

Dit geeft Claude Code de context om relevante code te schrijven in plaats van generieke boilerplate.

Stap 2: Vraag om de cookie-banner component

Gebruik deze prompt in Claude Code:

Maak een React component CookieBanner in /components/CookieBanner.tsx. De banner verschijnt onderaan de pagina voor gebruikers die nog geen keuze hebben gemaakt. Gebruik Tailwind CSS. De banner toont:

• Een eerlijke zin over welke data we verzamelen (zie CLAUDE.md)
• Een knop "Accepteren" en een knop "Alleen noodzakelijk"
• Sla de keuze op in localStorage onder de key cookie_consent met waarden all of necessary
• De banner verdwijnt na een keuze en komt niet terug Geen third-party libraries, alleen React useState en useEffect.

Claude Code schrijft dan iets als:

// components/CookieBanner.tsx
import { useState, useEffect } from 'react'

export default function CookieBanner() {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const consent = localStorage.getItem('cookie_consent')
    if (!consent) setVisible(true)
  }, [])

  const handleConsent = (value: 'all' | 'necessary') => {
    localStorage.setItem('cookie_consent', value)
    setVisible(false)
  }

  if (!visible) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg z-50">
      <div className="max-w-4xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <p className="text-sm text-gray-700 flex-1">
          We bewaren alleen je e-mailadres en anonieme gebruiksdata om de app te laten werken.
          Geen advertenties, geen tracking via derde partijen.
        </p>
        <div className="flex gap-2 shrink-0">
          <button
            onClick={() => handleConsent('necessary')}
            className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
          >
            Alleen noodzakelijk
          </button>
          <button
            onClick={() => handleConsent('all')}
            className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800"
          >
            Accepteren
          </button>
        </div>
      </div>
    </div>
  )
}

Stap 3: Voeg een leesbare privacypagina toe

Een privacymelding in juridisch jargon leest niemand. Vraag Claude Code om een menselijke versie:

Maak een pagina /app/privacy/page.tsx met een eerlijke privacyverklaring in eenvoudig Nederlands. Gebruik deze feiten uit CLAUDE.md: [plak je privacy-context hier]. Structureer met duidelijke kopjes: Wat bewaren we, Waarom, Hoe lang, Jouw rechten. Geen legalese, wel volledig. Gebruik Tailwind prose-styling.

Stap 4: Koppel de banner aan je layout

Importeer CookieBanner in /app/layout.tsx en render hem direct voor de sluitende </body> tag. Zorg dat hij op elke pagina verschijnt maar alleen zichtbaar is als cookie_consent nog niet in localStorage staat.

Dit is twee regels werk maar Claude Code schrijft ze foutloos als je de stap expliciet benoemt.

Wat te checken na afloop

• Open je app in een incognito-venster: de banner verschijnt direct
• Klik "Alleen noodzakelijk": de banner verdwijnt en komt niet terug na een refresh
• Ga naar Devtools > Application > localStorage: je ziet cookie_consent: necessary
• Open een normale tab naast je incognito-sessie: geen banner (cookie al gezet)
• Klik door naar /privacy: de pagina laadt en is leesbaar zonder juridisch woordenboek

Klein klusje, groot effect. Gebruikers die zien dat je eerlijk bent over data zijn makkelijker te converteren dan gebruikers die halverwege je onboarding afhaken omdat ze je niet vertrouwen. Whittaker heeft gelijk dat veel AI-producten het vertrouwen beschamen, maar dat hoeft jouw product niet te doen.