Hoe koppel je Claude aan Webflow?

Kort antwoord: Claude koppelt aan Webflow via de officiële MCP-server (Model Context Protocol) van Webflow, die directe toegang geeft tot je CMS, de Designer API en je sitedata. Je kunt contentupdates doorvoeren, CMS-collecties beheren en pagina's publiceren door in gewone taal te beschrijven wat je wilt in Claude Desktop of Claude Code, zonder handmatig werk in de editor.

B2B SaaS-teams verspillen uren aan repetitieve Webflow-aanpassingen: prijscopy bijwerken, nieuwe blogposts doorzetten, CMS-data verversen op tientallen pagina's. De Claude Webflow MCP-integratie maakt daar korte metten mee.

In deze tutorial lees je stap voor stap hoe je Claude met de MCP-server aan Webflow koppelt, wat je kunt doen zodra alles staat en waar de integratie zijn plek verdient in een echte contentworkflow. Aan het einde weet je of dit in jouw stack thuishoort en hoe je het vandaag nog draaiend krijgt.

Wat is de Claude Webflow MCP-integratie?

De Webflow MCP-server is een officiële first-party connector die Claude via het Model Context Protocol directe toegang geeft tot je Webflow-workspace. MCP is een open standaard waarmee AI-modellen op een gestructureerde manier, met toestemmingen, verbinding maken met externe tools en databronnen.

Na het koppelen kan Claude je sitestructuur lezen, CMS-collecties raadplegen, nieuwe content schrijven, bestaande items bijwerken en publiceren, allemaal vanuit een gespreksinterface. Jij beschrijft de wijziging en Claude voert die uit via de Webflow API.

Dit is geen omweg via een derde partij. Webflow levert en onderhoudt de MCP-server zelf. Daardoor blijft die in sync met de Webflow API en gelden dezelfde betrouwbaarheidsverwachtingen als voor het platform.

Wat je nodig hebt voordat je begint

Zorg dat je het volgende klaar hebt voordat je ook maar één commando uitvoert:

Een Webflow-account met minstens één live site
Een Webflow API-token met CMS- en Designer-rechten (genereer die in je Webflow-workspace onder Account Settings > API Access)
Claude Desktop (Mac of Windows) of Claude Code geïnstalleerd en actief
Node.js 18+ geïnstalleerd op je computer (nodig om de MCP-server te draaien)
Een Webflow site-ID van de site die Claude moet beheren

Gebruik je Claude Code in plaats van Claude Desktop, dan is het installatieproces bijna hetzelfde. Alleen de locatie van het configuratiebestand verschilt licht, zoals hieronder staat.

Zo koppel je Claude aan Webflow met de MCP-server

Stap 1: installeer de Webflow MCP-server

Open je terminal en voer uit:

npx @webflow/mcp-server

Hiermee haal je het officiële Webflow MCP-serverpakket op uit npm. Je hoeft geen repo te klonen of handmatig een apart proces te beheren. Het commando npx zorgt voor de uitvoering telkens wanneer Claude het aanroept.

Stap 2: configureer Claude Desktop

Claude Desktop leest MCP-serverconfiguraties uit een JSON-bestand. Open dat bestand nu:

Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Voeg het volgende configuratieblok toe binnen de mcpServers object:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "@webflow/mcp-server"],
      "env": {
        "WEBFLOW_TOKEN": "your-webflow-api-token-here"
      }
    }
  }
}

Vervang your-webflow-api-token-here met het API-token dat je in stap één hebt gegenereerd. Sla het bestand op.

Stap 3: configureer Claude Code (als je Claude Code gebruikt)

Gebruik je Claude Code, voeg de MCP-server dan toe via de CLI:

claude mcp add webflow \
  -e WEBFLOW_TOKEN=your-webflow-api-token-here \
  -- npx -y @webflow/mcp-server

Hiermee registreer je de Webflow-server globaal voor al je Claude Code-sessies.

Stap 4: start Claude opnieuw en controleer de verbinding

Sluit Claude Desktop helemaal af en open het opnieuw. Typ in een nieuw gesprek:

List all the sites in my Webflow workspace

Als de verbinding werkt, geeft Claude de namen en ID's van je sites terug. Krijg je een foutmelding, controleer dan je API-token en kijk of Node.js goed is geïnstalleerd door het volgende uit te voeren node --version in je terminal.

Wat kan Claude eigenlijk doen in Webflow?

Na het koppelen heeft Claude via de Webflow MCP-server toegang tot een vaste set acties. Dit is wat dat in de praktijk betekent voor B2B SaaS-contentteams:

CMS-contentbeheer

CMS-collecties lezen: Vraag Claude om alle items in een collectie op te sommen, specifieke velden op te halen of bestaande content samen te vatten
Nieuwe CMS-items maken: Beschrijf een nieuwe blogpost, casestudy of productupdate en Claude maakt het item aan met de velden die je opgeeft
Bestaande items bijwerken: Pas copy aan, vervang metadata, werk slugs bij of bewerk rich text-velden bij één of meerdere items
Items verwijderen: Haal verouderde content uit collecties zonder de editor te openen

Pagina- en sitebeheer

Sitestructuur opvragen: Vraag Claude welke pagina's er zijn, wat hun slugs zijn en hoe ze zijn georganiseerd
Paginametadata bijwerken: Wijzig SEO-titels, beschrijvingen en Open Graph-velden via een gesprek
Designer API-wijzigingen doorvoeren: Voer structurele aanpassingen en wijzigingen in stijl door waar de Webflow Designer API dat ondersteunt

Publiceren

Sites publiceren: Laat Claude je site na wijzigingen publiceren naar staging of productie
Specifieke pagina's publiceren: Publiceer losse pagina's in plaats van de hele site door te zetten

Praktijkvoorbeelden van workflows voor B2B SaaS-teams

In deze situaties levert de Claude Webflow MCP-integratie SaaS-marketing- en contentteams de meeste tijdwinst op. Vergelijkt je team al specialisten onder B2B SaaS-contentmarketingbureaus of bredere B2B SaaS Digital Marketing-bureaus, dan is dit het soort workflowefficiëntie waar je naar kunt vragen.

Een nieuwe blogpost doorzetten vanuit een briefing

In plaats van handmatig een CMS-item aan te maken, elk veld in te vullen en de content op te maken:

Create a new blog post in Webflow with the title "How SaaS Teams Use AI to Cut Support Costs", 
slug "saas-ai-support-costs", and the following body content: [paste content]. 
Set the author to "Sarah Chen", add tags "AI" and "Customer Support", 
and mark it as a draft.

Claude maakt het item aan, koppelt alle velden en bevestigt dat de concepttekst is opgeslagen. Jij controleert en publiceert wanneer je er klaar voor bent.

Prijspaginacopy bijwerken in meerdere items

Als een prijspakket verandert, is elke vermelding handmatig bijwerken traag:

In my Webflow CMS, find all collection items that mention "Starter plan $49/month" 
and update that text to "Starter plan $59/month"

Claude doorzoekt de collectie, bepaalt welke items geraakt worden en past de update in één keer op alle items toe.

Metabeschrijvingen verversen voor een campagne

Voordat een betaalde campagne live gaat, wil je dat de metabeschrijving van elke landingspagina past bij de campagnehoek:

Update the meta description on the page with slug "product/analytics" to: 
"See every user action in real time. SaaS analytics built for growth teams. 
Start free, no credit card required."

Claude voert de wijziging door en kan de pagina meteen publiceren als je erom vraagt. Voor teams die contentupdates combineren met acquisitie past zo'n workflow goed naast de ondersteuning van B2B SaaS PPC-bureaus, B2B SaaS SEO-bureaus of B2B SaaS Performance Marketing-bureaus.

Publiceren na een contentaudit

Nadat je een reeks CMS-updates hebt gecontroleerd die als concept klaarstaan:

Publish the Webflow site ID [your-site-id] to production

Eén regel. Klaar.

Wat de Claude Webflow MCP-integratie niet doet

Duidelijkheid over de beperkingen bespaart tijd. De MCP-server doet het volgende niet:

De Webflow Designer vervangen voor visueel ontwerpwerk. Voor complexe componenten, nieuwe paginatemplates of animatiewijzigingen heb je nog steeds de editor nodig.
Aangepaste code of Webflow Logic-flows afhandelen via een gesprek.
Zelf je contentstrategie afleiden. Claude handelt op basis van wat jij zegt. Het redactionele oordeel blijft bij je team.
De API-limieten van Webflow omzeilen. Grote batchbewerkingen over honderden CMS-items stuiten op dezelfde limieten als elke andere API-client.

Voor contentupdates, CMS-beheer en publiceren dekt de integratie de volledige workflow. Voor ontwerpintensief werk blijft de editor het juiste gereedschap.

Is de Claude Webflow MCP-integratie het waard voor B2B SaaS-teams?

Voor teams die regelmatig content in Webflow publiceren is het antwoord ja, mits er een duidelijke use case is.

De integratie verdient zijn plek als je team:

Een CMS met veel volume beheert (blogposts, casestudy's, changelogs, helpartikelen)
Vaak copy bijwerkt in verband met campagnes of productwijzigingen
Niet-technische teamleden een manier wil geven om content door te zetten zonder toegang tot de editor
Al Claude gebruikt voor het maken van content en de handmatige stap van output kopiëren naar Webflow wil schrappen

De installatie duurt minder dan 15 minuten. De tijd die je bespaart met de eerste batchupdate van content verdien je direct terug.

Bij SaaS Hackers zien we deze integratie als een praktisch voorbeeld van waar AI-agents van interessant naar operationeel gaan. Het is geen demofunctie, maar een herhaalbare workflow die direct aansluit op hoe SaaS-contentteams al werken. Wil je meer beproefde specialisten, tools en partners op dit gebied, ontdek dan de bredere SaaS Hackers-bronnenhub of bekijk de volledige blog.

Veelgestelde vragen

Wat is de Webflow MCP-server en hoe werkt die met Claude?

De Webflow MCP-server is een officiële connector van Webflow die de Model Context Protocol-standaard gebruikt om Claude directe toegang te geven tot je Webflow-workspace. Na de configuratie kan Claude CMS-data lezen en schrijven, paginametadata bijwerken en content publiceren door namens jou de Webflow API aan te roepen, via een gestructureerde verbinding met toestemmingen.

Moet ik kunnen programmeren om Claude met Webflow MCP te gebruiken?

Nee. Voor de installatie voer je twee terminalcommando's uit en bewerk je een JSON-configuratiebestand, maar daarna werk je volledig in gewone taal in Claude. Niet-technische contentmanagers kunnen CMS-updates doorzetten en pagina's publiceren zonder code te schrijven.

Is de Webflow MCP-integratie veilig te gebruiken op een live productiesite?

Ja, maar wel met de nodige voorzichtigheid. De MCP-server gebruikt je Webflow API-token en werkt dus met alle rechten die dat token heeft. Overweeg voor productiesites een token aan te maken met alleen de minimale rechten die je workflow nodig heeft (bijvoorbeeld CMS lezen/schrijven), in plaats van een token met volledige toegang. Controleer wijzigingen altijd voordat je ze naar productie publiceert.

Wat is het verschil tussen Claude Desktop en Claude Code voor Webflow MCP?

Beide werken met dezelfde Webflow MCP-server. Claude Desktop is de chattoepassing voor gewone gebruikers en past bij content- en marketingteams die graag via een gesprek werken. Claude Code is de CLI-tool voor ontwikkelaars en past bij engineers die Webflow-handelingen willen scripten of automatiseren als onderdeel van een grotere workflow. De manier van configureren verschilt iets, maar de beschikbare acties zijn identiek.

Kan ik met Claude honderden Webflow CMS-items tegelijk in bulk bijwerken?

Claude kan batchbewerkingen uitvoeren over CMS-collecties, maar de rate limits van de Webflow API zijn dan van toepassing. Bij zeer grote collecties (honderden items) moet je updates mogelijk in batches uitvoeren en letten op rate limit-meldingen. Bij gebruikelijke SaaS-contentvolumes (tientallen tot enkele honderden items) werken bulkupdates zonder problemen.