Hoe koppel je Claude via MCP aan Webflow?

Kort antwoord: Claude maakt via de officiële Webflow MCP-server verbinding met Webflow. Zo krijg je vanuit Claude Desktop of Claude Code directe toegang tot het CMS, de Designer-API's en de datalaag van je site. Je kunt contentupdates doorvoeren, CMS-collecties beheren en structurele pagina-aanpassingen maken zonder de Webflow-interface te openen.

Je weet al dat Claude kan schrijven. Wat de meeste B2B SaaS-teams nog niet doorhebben, is dat Claude ook kan publiceren. Met de Webflow MCP-server gekoppeld hoef je content niet meer tussen tools te kopiëren en te plakken, maar duw je updates rechtstreeks vanuit je AI-workflow naar je live Webflow-site.

Deze tutorial laat stap voor stap zien hoe je dat opzet, wat je ermee kunt doen en waar SaaS-teams die content op schaal beheren de grootste winst in hun workflow halen.

Wat is de Webflow MCP-server?

De Webflow MCP-server is een first-party integratie die is gebouwd op het Model Context Protocol (MCP) van Anthropic, een open standaard waarmee AI-modellen verbinding maken met externe tools en databronnen. Dankzij de implementatie van Webflow krijgt Claude directe toegang tot de CMS-collecties, Designer-API's en contentlaag van je site.

In gewone taal: Claude is niet langer een schrijfassistent waaruit je kopieert, maar een agent die de structuur van je Webflow-site kan lezen, CMS-items kan aanmaken en bijwerken en wijzigingen kan doorvoeren zonder dat je het gesprek verlaat.

De integratie wordt onderhouden door Webflow en werkt met Claude Desktop, Claude Code, Cursor en Windsurf.

Wat je kunt doen met Claude en Webflow MCP

Voordat je iets instelt, is het handig om te weten wat deze integratie precies ondersteunt. De Webflow MCP-server biedt een vaste set acties die Claude in je workspace kan uitvoeren:

CMS-acties:

Nieuwe CMS-collectie-items aanmaken
Bestaande itemvelden bijwerken (tekst, rich text, afbeeldingen, verwijzingen)
Items publiceren en depubliceren
Collectieschema's opvragen om de veldstructuur te begrijpen

Site- en paginabeheer:

Paginastructuur en metadata lezen
Structurele updates op pagina's toepassen
Site-instellingen en stijlen op systeemniveau beheren

Wat het (nog) niet kan:

Visueel ontwerpen met slepen en neerzetten (dat blijft in de Webflow Designer)
De publicatiewachtrij van Webflow vervangen bij complexe omgevingen met meerdere omgevingen
Aangepaste codecomponenten verwerken zonder handmatige invoer

Voor B2B SaaS-teams zijn de meest waardevolle toepassingen het doorvoeren van CMS-content, updates van landingspaginateksten en bulkbewerkingen van velden over collectie-items heen. Als je team dit soort terugkerend publicatiewerk op schaal doet, overlapt het vaak met de bredere verantwoordelijkheden van B2B SaaS marketing operations.

Zo koppel je Claude via MCP aan Webflow

Stap 1: Genereer een Webflow API-token

Log in op je Webflow-account en open de site die je wilt koppelen
Ga naar Site Settings > Integrations > API Access
Genereer een nieuw API-token met lees- en schrijfrechten voor het CMS
Kopieer het token en bewaar het op een veilige plek. Je ziet het niet meer nadat je dit scherm sluit.

Werk je met meerdere Webflow-sites, genereer dan per site een apart token. Tokens door elkaar gebruiken over workspaces heen geeft rechtenfouten die vervelend zijn om op te sporen.

Stap 2: Installeer de Webflow MCP-server

De Webflow MCP-server draait als Node.js-proces op je machine. Je moet Node.js hebben geïnstalleerd voordat je deze stap uitvoert.

Open je terminal en voer uit:

npx @webflow/mcp-server

Je kunt de server ook globaal installeren:

npm install -g @webflow/mcp-server

De server is open source en wordt onderhouden in de officiële GitHub-repository van Webflow op webflow/mcp-server.

Stap 3: Configureer Claude Desktop voor de MCP-server

Open het configuratiebestand van Claude Desktop. Op macOS staat het hier:

~/Library/Application Support/Claude/claude_desktop_config.json

Voeg de Webflow MCP-server toe aan je configuratie:

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

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

Sla het bestand op en start Claude Desktop opnieuw op. Je ziet een hamerpictogram in de Claude-interface dat bevestigt dat de MCP-tools actief zijn.

Stap 4: Controleer de verbinding

Start een nieuw gesprek in Claude en vraag:

"Toon de CMS-collecties die beschikbaar zijn in mijn Webflow-site."

Claude roept de Webflow MCP-server aan en geeft de namen en structuren van je collecties terug. Krijg je een foutmelding, controleer dan of je API-token de juiste rechten heeft en of de JSON in het configuratiebestand geldig is (een ontbrekende komma maakt het hele bestand onbruikbaar).

Zo voer je CMS-contentupdates door met Claude

Zodra de koppeling werkt, volgen contentacties een eenvoudig patroon: beschrijf wat je wilt, laat Claude het schema opvragen en bevestig dan de schrijfactie.

Een bestaand CMS-item bijwerken

Vraag Claude eerst om de huidige status van een item op te halen:

"Zoek de blogpost met de titel 'How to reduce churn in SaaS' in mijn collectie Blog Posts en toon me de huidige metabeschrijving en de bodytekst."

Claude haalt het item op en toont de velden. Geef daarna je update-instructie:

"Werk de metabeschrijving bij naar: 'Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff.' Publiceer de wijziging daarna."

Claude schrijft de update naar Webflow en bevestigt de status van het item.

Een nieuw CMS-item aanmaken

Hier wordt de workflow echt snel. Schrijf je contentbriefing in Claude, genereer de content in hetzelfde gesprek en push die daarna direct:

"Maak een nieuw item aan in de collectie Blog Posts. Titel: 'SaaS Pricing Page Teardown: What High-Converting Pages Have in Common'. Slug: saas-pricing-page-teardown. Zet de status op Draft. Gebruik de volgende content voor het bodyveld: [plak hier je content]."

Claude koppelt je invoer aan de juiste collectievelden en maakt het item aan. Daarna kun je Webflow openen om het te controleren en te publiceren, of Claude vragen het direct te publiceren als je workflow dat toelaat.

Bulkupdates van velden in een collectie

Dit is de toepassing waarvan de meeste teams niet weten dat die mogelijk is. Moet je een veld in meerdere CMS-items bijwerken, bijvoorbeeld om titeltags te verbeteren als onderdeel van een SEO-opschoning of om terugkerende taxonomiefouten te corrigeren, dan doe je dat in één gesprek:

"Zoek in mijn collectie Case Studies alle items waarbij het veld 'Industry' leeg is en zet dat op 'B2B SaaS'."

Claude doorzoekt de collectie, bepaalt welke items overeenkomen en voert de update uit. Wat in Webflow 20 minuten klikken kost, doe je zo in minder dan twee minuten.

Praktische workflow: een landingspagina-update publiceren

Hier is een echte workflow die een B2B SaaS-marketingteam met Claude en gekoppelde Webflow MCP zou doorlopen.

Scenario: Je hebt de hero-tekst van je homepage aangepast en wilt de wijziging naar Webflow pushen zonder de Designer te openen.

Vraag de huidige status op: "Toon me de huidige hero-kop en subkop van het CMS-item Homepage."
Controleer en keur goed: Claude geeft de huidige tekst terug. Jij bevestigt dat die moet worden aangepast.
Schrijf de update: "Werk de hero-kop bij naar: 'Stop guessing. Start converting.' Werk de subkop bij naar: 'SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue.' Publiceer de wijzigingen."
Bevestig: Claude bevestigt dat de velden zijn bijgewerkt en dat het item is gepubliceerd.

Totale tijd: minder dan drie minuten. Geen Designer-sessie, geen kopiëren en plakken, geen wisselen tussen tabbladen.

Waarvoor B2B SaaS-teams dit het best kunnen gebruiken

Niet elke contentupdate hoeft via Claude en MCP te lopen. Hier betaalt deze setup zich voor SaaS-teams het duidelijkst terug:

Toepassingen met veel waarde:

SEO-metadata van meerdere landingspagina's bijwerken vóór de lancering van een campagne
Blogcontent publiceren die in Claude is geschreven en bewerkt
SEO-audits uitvoeren en verbeteringen (metabeschrijvingen, titeltags) doorvoeren in dezelfde sessie
Gelokaliseerde versies van CMS-content maken voor verschillende markten
Productfunctiebeschrijvingen in bulk bijwerken na een release

Toepassingen met minder waarde (werk dan direct in Webflow):

Eenmalige visuele ontwerpwijzigingen
Lay-outherstructurering waarvoor de Designer nodig is
Wijzigingen die vóór publicatie akkoord van stakeholders nodig hebben

Teams die vaak metadata bijwerken, content uitrollen of campagnes lanceren, combineren deze workflow mogelijk ook met de hulp van B2B SaaS-contentmarketingbureaus of gespecialiseerde SEO-partners.

Veelvoorkomende fouten en hoe je ze oplost

"No tools available" in Claude Desktop
Je configuratiebestand bevat een syntaxisfout of de MCP-server kon niet starten. Valideer je JSON op jsonlint.com en controleer of Node.js goed is geïnstalleerd.

"Unauthorised" wanneer Claude naar Webflow probeert te schrijven
Je API-token heeft geen schrijfrechten of is voor de verkeerde site gegenereerd. Genereer het opnieuw met volledige CMS-rechten en werk het configuratiebestand bij.

Claude leest collecties, maar vindt bepaalde items niet
Namen van collectie-items zijn hoofdlettergevoelig in de Webflow API. Vraag Claude eerst alle items in de collectie op te sommen en verwijs daarna naar de exacte naam die terugkomt.

Wijzigingen verschijnen in Webflow, maar staan niet live op de site
Het item is bijgewerkt maar niet gepubliceerd. Voeg "en publiceer het item" toe aan je instructie, of controleer de publicatiewachtrij van Webflow handmatig.

Veelgestelde vragen

Wat is Claude Webflow MCP en hoe werkt het?
De Claude Webflow MCP-integratie koppelt Claude aan je Webflow-site via het Model Context Protocol van Anthropic. Claude gebruikt de Webflow MCP-server om vanuit een gesprek rechtstreeks je CMS-collecties, paginametadata en site-instellingen te lezen en te bewerken. Je authenticeert met een Webflow API-token en Claude roept namens jou de API's van Webflow aan.

Moet ik kunnen programmeren om de Webflow MCP-server te gebruiken?
Je moet een JSON-configuratiebestand kunnen bewerken en één terminalcommando kunnen uitvoeren. Verder verloopt alles in gewone gesprekstaal. Je schrijft geen code om contentupdates door te voeren. Als je in gewone taal kunt beschrijven wat je wilt, regelt Claude de API-aanroepen.

Is de Webflow MCP-server veilig te gebruiken met een live productiesite?
Ja, met één voorzorgsmaatregel: vraag Claude altijd eerst de huidige staat van een item te tonen voordat er wijzigingen worden weggeschreven, en bevestig de update voordat je Claude vraagt te publiceren. De MCP-server schrijft rechtstreeks naar je live Webflow-workspace, dus er is geen stagingbuffer tenzij je die zelf in Webflow instelt. Behandel het als directe databasetoegang: weloverwogen en gecontroleerd voordat je iets doorvoert.

Wat is het verschil tussen Claude met Webflow MCP en de Webflow AI-functies in de Designer?
De ingebouwde AI-functies van Webflow werken binnen de Designer en richten zich op hulp bij visuele vormgeving en lay-out. De Claude Webflow MCP-integratie werkt buiten de Designer en richt zich op CMS-bewerkingen, contentpublicatie en bulkbeheer van data. Ze dienen verschillende delen van de workflow. MCP is beter voor contentteams die grote volumes gestructureerde data beheren.

Kan ik de Webflow MCP-server ook gebruiken met Claude Code of Cursor, en niet alleen met Claude Desktop?
Ja. De Webflow MCP-server werkt met Claude Desktop, Claude Code, Cursor en Windsurf. De configuratiemethode verschilt per tool een beetje, maar het API-token en de serveropzet zijn hetzelfde. Raadpleeg de MCP-documentatie van elke tool voor het exacte configuratieformaat.