Hoe koppel je Claude aan Webflow MCP?

Kort antwoord: Claude maakt via de officiële MCP-server (Model Context Protocol) verbinding met Webflow. Zo heb je vanuit Claude Desktop of Claude Code een directe lijn naar de CMS, de pagina's en de Designer API van je site. Je kunt content bijwerken, CMS-items aanmaken en collecties beheren door in gewone taal te beschrijven wat je wilt, zonder handmatig werk in de interface.

Beheer je een Webflow-site en kopieer je content nog steeds met de hand naar de CMS, dan verandert deze gids je manier van werken. Met de Webflow MCP-server kan Claude rechtstreeks in je Webflow-workspace lezen en schrijven. Zo werk je blogposts bij, voeg je nieuwe collectie-items toe en bewerk je pagina-inhoud via een gesprek in plaats van via de Designer.

Dit is een praktische walkthrough voor B2B SaaS-teams die sneller willen publiceren en minder tussen tools willen schakelen. Aan het eind draait de integratie en weet je precies wat Claude wel en niet kan in Webflow. Zoek je ook bredere groeiondersteuning rond contentsystemen en publicatieprocessen, dan heeft SaaS Hackers ook een lijst met de beste B2B SaaS-contentmarketingbureaus.

Wat is de Webflow MCP-server?

De Webflow MCP-server is een first-party integratie van Webflow die de Model Context Protocol-standaard implementeert. MCP is een open protocol waarmee AI-tools zoals Claude met gestructureerde, gecontroleerde toegang verbinding maken met externe diensten.

Kort gezegd: Claude hoeft niet te gokken hoe je Webflow-site is opgebouwd, want de MCP-server geeft toegang tot de actuele gegevens in je workspace. Claude kan je CMS-collecties doorzoeken, bestaande items lezen, nieuwe items aanmaken en updates starten via dezelfde API's die een developer gebruikt.

De MCP-server van Webflow wordt door Webflow zelf gehost en onderhouden. Dat betekent dat hij gebruikmaakt van de officiële Data API en Designer API en niet van een omweg van een derde partij.

Wat kan Claude precies doen in Webflow?

Wees voordat je iets instelt duidelijk over de reikwijdte. Claude met Webflow MCP kan:

• CMS-collecties lezen en bestaande items met hun veldgegevens opvragen
• Nieuwe CMS-collectie-items aanmaken met tekst, rich text, afbeeldingen en referentievelden
• Bestaande collectie-items bijwerken, inclusief gestagede en gepubliceerde content
• Items publiceren op je live site
• De sitestructuur opvragen, inclusief pagina's, collecties en veldschema's
• Structurele en systeemniveau-aanpassingen doorvoeren via de Designer API

Claude kan pagina's niet visueel ontwerpen zoals een mens dat doet op het canvas van de Webflow Designer. Zie het als een krachtige CMS-operator en contentpublisher, niet als een visuele designtool. Teams die ook ondersteuning nodig hebben op de visuele laag, kunnen B2B SaaS-webdesignbureaus of gespecialiseerde B2B SaaS-webdesign- en UX-experts vergelijken.

Wat je nodig hebt voordat je begint

• Een Webflow-account met minimaal één site (elk abonnement met CMS-toegang)
• Claude Desktop geïnstalleerd, of toegang tot Claude Code
• Een Webflow API-token met de juiste scopes
• Lokaal geïnstalleerd Node.js (versie 18 of hoger)

Zo koppel je Claude aan Webflow MCP: stap voor stap

Stap 1: Genereer je Webflow API-token

1. Log in op je Webflow-dashboard
2. Ga naar Account Settings en vervolgens naar Integraties
3. Scroll naar API Access en genereer een nieuw token
4. Selecteer de scopes die je nodig hebt: CMS read/write, Sites read en Pages read/write zijn de belangrijkste voor contentworkflows
5. Kopieer het token en bewaar het op een veilige plek

Stap 2: Configureer de MCP-server in Claude Desktop

Claude Desktop gebruikt een configuratiebestand om te bepalen met welke MCP-servers verbinding moet worden gemaakt. Open het configuratiebestand op:

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

Voeg het volgende blok toe binnen de mcpServers object:

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

Vervang your-api-token-here met het token dat je in stap 1 hebt gegenereerd.

Stap 3: Herstart Claude Desktop

Sla het configuratiebestand op, sluit Claude Desktop volledig af en open het opnieuw. Claude laadt de MCP-server bij het opstarten. Je ziet een klein hamericoon in de chatinterface zodra MCP-tools beschikbaar zijn.

Stap 4: Controleer de verbinding

Typ dit in Claude:

"List the Webflow sites connected to my account."

Als de verbinding werkt, geeft Claude de namen en ID's van je sites terug. Krijg je een foutmelding, controleer dan nog eens de scopes van het token en of Node.js goed is geïnstalleerd.

Claude Code gebruiken in plaats daarvan

Werk je in een terminalomgeving of gebruik je liever Claude Code dan Claude Desktop, dan verloopt de installatie net iets anders.

Voer dit commando uit om de MCP-server handmatig te starten:

WEBFLOW_TOKEN=your-api-token npx -y @webflow/mcp-server

Configureer vervolgens je Claude Code-omgeving zo dat die naar die draaiende server verwijst. De Webflow GitHub-repository voor de MCP-server (webflow/mcp-server) bevat de volledige referentie voor omgevingsvariabelen en geavanceerde configuratieopties.

Praktische workflows: wat je er echt mee kunt doen

Een nieuwe blogpost naar je CMS pushen

Zodra de verbinding staat, kun je met één prompt een nieuw CMS-item aanmaken. Bijvoorbeeld:

"Create a new item in my Blog Posts collection. Title: 'How SaaS Teams Use AI for Faster Onboarding'. Slug: how-saas-teams-use-ai-faster-onboarding. Set the status to Draft."

Claude roept de CMS API aan, maakt het item aan met de juiste veldkoppeling en geeft het item-ID terug. Daarna kun je vragen om het bodyveld te vullen met content die je al hebt geschreven, of Claude de tekst laten opstellen. Wordt AI-ondersteund publiceren een groter deel van je workflow, dan behandelt SaaS Hackers ook verwante thema's zoals de impact van AGI op marketing, bedrijfsvoering en softwareontwikkeling.

Een bestaand CMS-item bijwerken

"Find the blog post titled 'Product Update: Q1 2025' and update the excerpt field to: 'A summary of everything we shipped in Q1, including the new onboarding flow and API rate limit increases.'"

Claude doorzoekt de collectie, vindt het bijbehorende item en past het veld aan. Je hoeft het item-ID niet vooraf te kennen.

Een gestaged item publiceren

"Publish the blog post with slug 'how-saas-teams-use-ai-faster-onboarding' to the live site."

Dit start de publicatieactie via de API. Het item gaat van staged naar live zonder dat je de Designer opent.

Je CMS controleren op ontbrekende velden

"Check all items in my Case Studies collection and list any that are missing the 'Client Logo' or 'Industry' fields."

Dit is een echt nuttige workflow voor contentkwaliteitscontrole. Claude leest elk item in de collectie en geeft een lijst met hiaten terug. Dat zou via de Webflow-interface aanzienlijk veel handwerk kosten.

Rechten en waar je op moet letten

Een paar dingen die je moet weten voordat je dit in productie gebruikt:

De scope van het token telt. Met een token met schrijfrechten kun je content aanmaken en overschrijven. Experimenteer je nog, genereer dan eerst een read-only token om de structuur van je site zonder risico te verkennen.

Publiceren gebeurt direct. Publiceert Claude een item, dan staat het meteen live. De API kent geen bevestigingsstap voor staging. Maak er een gewoonte van gestagede content te controleren voordat je publicatiecommando's geeft.

CMS-veldtypen hebben beperkingen. Referentievelden, optievelden en afbeeldingsvelden vereisen specifieke formaten van de API. Geeft Claude een foutmelding bij het aanmaken of bijwerken, vraag dan eerst om het schema van de collectie te beschrijven, zodat de velden goed worden gekoppeld.

Er gelden rate limits. De Webflow Data API heeft rate limits per abonnement. Bij bulkacties (50+ items bijwerken) moet Claude paginering afhandelen en kun je op lagere abonnementen tegen limieten aanlopen.

Waarom B2B SaaS-teams hier iets aan hebben

Contentsnelheid is voor de meeste SaaS-marketingteams een echte beperking. Een gemiddelde publicatiecyclus voor een blog bestaat uit schrijven, redigeren, opmaken in de CMS, metadata toevoegen en publiceren. Elke stap is handmatig en traag.

Met de Claude Webflow MCP-setup kan een schrijver een afgeronde tekst overdragen en Claude de CMS-invoer, de veldvulling, het aanmaken van de slug en het publiceren laten afhandelen. Dat scheelt 20 tot 30 minuten mechanisch werk per post.

Voor teams die gelokaliseerde content, productupdatepagina's of grote bronnenbibliotheken beheren, loopt de tijdwinst snel op. Claude kan in één sessie een reeks updates verwerken waar je anders een middag mee bezig bent. Schaal je deze workflows op over meerdere acquisitiekanalen, dan kan het ook helpen om gespecialiseerde partners te bekijken bij B2B SaaS SEO-bureaus, B2B SaaS PPC-bureaus en B2B SaaS Performance Marketing-bureaus.

SaaS Hackers behandelt dit soort workflowautomatisering als onderdeel van een bredere serie over het gebruik van Claude voor B2B SaaS-operations. Het doel blijft hetzelfde: het mechanische werk weghalen, zodat je team zich kan richten op beslissingen waarvoor menselijk oordeel nodig is. Wil je meer gecontroleerde partners en specialisten ontdekken, bekijk dan ook alle topbureaus, topexperts of bronnen.

Veelgestelde vragen

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

De Webflow MCP-server is een officiële integratie die het Model Context Protocol implementeert, waarmee Claude rechtstreeks verbinding maakt met je Webflow-workspace. Claude krijgt gestructureerde toegang tot je CMS-collecties, pagina's en sitegegevens via de Webflow API. Je stelt het één keer in via Claude Desktop of Claude Code, waarna Claude Webflow-content kan lezen en schrijven via prompts in gewone taal.

Kan Claude via MCP pagina's visueel ontwerpen in Webflow?

Nee. Claude met Webflow MCP werkt via de API-laag en niet via het visuele canvas van de Designer. Claude kan CMS-content aanmaken en bijwerken, collectie-items beheren en wijzigingen op systeemniveau doorvoeren, maar sleept en rangschikt geen elementen visueel zoals een designer dat doet. Gebruik het voor contentoperaties, niet voor visueel ontwerp.

Is de Webflow MCP-server veilig te gebruiken bij een productiesite?

Ja, mits je de juiste voorzorgsmaatregelen neemt. Gebruik een API-token met een beperkte scope, met alleen de rechten die je workflow nodig heeft. Geef tijdens de eerste tests liever geen schrijf- en publicatietoegang. Publiceren via de API gebeurt direct, dus behandel publicatieopdrachten net zoals wanneer je handmatig publiceert via de Designer.

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

Voor de basisinstallatie en het draaien van contentworkflows hoef je niet te programmeren. Je moet wel een JSON-configuratiebestand aanpassen en Node.js geïnstalleerd hebben, maar beide stappen zijn eenvoudig. De Webflow MCP-server draait via npx, dus je hoeft niets te bouwen of te onderhouden.

Welk Webflow-abonnement heb ik nodig voor MCP-toegang?

De Webflow MCP-server gebruikt de Data API, die beschikbaar is bij abonnementen met CMS-toegang. Bekijk de details over API-toegang van je huidige abonnement in je Webflow-accountinstellingen. Voor de functies van de Designer API gelden mogelijk extra abonnementsvereisten, afhankelijk van de acties die je nodig hebt.