Webflow MCP Server-integratie

Wat doet de “Webflow” MCP Server?

De Webflow MCP Server is een integratielaag waarmee AI-assistenten, zoals Claude, kunnen communiceren met de API’s van Webflow. Door AI-modellen te verbinden met Webflow, maakt deze server het mogelijk voor ontwikkelaars en AI-gestuurde tools om programmatisch toegang te krijgen tot, queries uit te voeren op en Webflow-sitegegevens te manipuleren. Belangrijke functies zijn onder meer het ophalen van gedetailleerde informatie over Webflow-sites, zoals sitenaam, ID’s, domeinen, localisatie-instellingen en meer. Dit verbetert ontwikkelworkflows door geautomatiseerd sitebeheer, data-analyse en contextuele interacties direct vanuit AI-platformen mogelijk te maken, waardoor teams Webflow-resources eenvoudiger kunnen integreren in hun bredere toolchains en automatiseringspijplijnen.

Lijst van Prompts

Er worden geen prompt-templates genoemd in de repository.

Lijst van Resources

Er worden geen expliciete resources vermeld in de beschikbare documentatie of codebase.

Lijst van Tools

• get_sites

  • Haalt een lijst op van alle Webflow-sites waartoe de geauthenticeerde gebruiker toegang heeft. Geeft details terug zoals weergavenaam, korte naam, site- en workspace-ID’s, aanmaak- en bijgewerkte datum, preview-URL, tijdzone, eigen domeinen, localisatie-instellingen en voorkeuren voor dataverzameling.

• get_site

  • Haalt gedetailleerde informatie op over een specifieke Webflow-site, geïdentificeerd door de siteId. Geeft dezelfde set van gedetailleerde informatie als get_sites, maar dan voor één site.

Gebruikstoepassingen van deze MCP Server

• Webflow site-detectie
  • Ontwikkelaars of AI-agenten kunnen snel alle Webflow-sites die aan een account gekoppeld zijn opsommen, waardoor het beheer van meerdere webprojecten eenvoudiger wordt.
• Geautomatiseerd sitebeheer
  • Haal metadata (zoals publicatiedata, eigen domeinen en locales) op en monitor deze voor één of meerdere Webflow-sites, zodat administratieve taken gestroomlijnd kunnen worden.
• Contextuele AI-interacties
  • AI-assistenten kunnen gedetailleerde site-informatie ophalen om gebruikersvragen te beantwoorden of automatiseringsflows aan te sturen op basis van actuele siteconfiguraties.
• Integratie met CI/CD pipelines
  • Gebruik site-informatie als onderdeel van geautomatiseerde deployment-, publicatie- of analyseworkflows in bredere ontwikkelpijplijnen.

Hoe stel je het in

Windsurf

Er zijn geen Windsurf-specifieke instructies opgenomen in de repository.

Claude

1. Vereisten
   • Zorg dat Node.js (v16+) geïnstalleerd is.
   • Installeer de Claude Desktop App.
   • Verkrijg een Webflow API-token.
2. Installeer afhankelijkheden
   • Voer uit: npm install
3. Configureer Omgevingsvariabelen
   • Maak een .env-bestand aan met de volgende inhoud:

     WEBFLOW_API_TOKEN=your-api-token
     

4. Configureer Claude Desktop
   • Open het configuratiebestand van Claude:
     • Voor MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
     • Voor Windows: %AppData%\Claude\claude_desktop_config.json
   • Voeg toe/wijzig:

     {
         "mcpServers": {
             "webflow": {
                 "command": "node",
                 "args": [
                     "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
                 ],
                 "env": {
                     "WEBFLOW_API_TOKEN": "your-api-token"
                 }
             }
         }
     }
     

   • Sla op en herstart Claude Desktop.

API-sleutels beveiligen (env voorbeeld):

{
    "mcpServers": {
        "webflow": {
            "command": "node",
            "args": [
                "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
            ],
            "env": {
                "WEBFLOW_API_TOKEN": "your-api-token"
            }
        }
    }
}

Cursor

Er zijn geen Cursor-specifieke instructies opgenomen in de repository.

Cline

Er zijn geen Cline-specifieke instructies opgenomen in de repository.

Installeren via Smithery

• Voer uit:

  npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude
  

Hoe gebruik je deze MCP binnen flows

Gebruik van MCP in FlowHunt

Om MCP-servers in je FlowHunt-workflow te integreren, voeg je het MCP-component toe aan je flow en verbind je deze met je AI-agent:

Klik op het MCP-component om het configuratievenster te openen. In het systeem MCP-configuratiegedeelte voeg je je MCP-serverdetails toe in dit JSON-formaat:

{
  "webflow": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Na configuratie kan de AI-agent deze MCP nu als tool gebruiken met toegang tot alle functies en mogelijkheden. Vergeet niet “webflow” te vervangen door de daadwerkelijke naam van je MCP-server en de URL door je eigen MCP-server-URL.

Overzicht

Op basis van de twee tabellen biedt de Webflow MCP Server duidelijke en nuttige tooling voor Webflow/AI-integratie, maar ontbreken prompt-templates, resource-definities en expliciete ondersteuning voor roots of sampling. De installatie en documentatie zijn solide voor Claude, maar andere platformen zijn niet gedocumenteerd.

MCP Score