Webflow MCP Server Integration

Was macht der “Webflow” MCP Server?

Der Webflow MCP Server ist eine Integrationsschicht, die KI-Assistenten wie Claude die Interaktion mit den Webflow-APIs ermöglicht. Durch die Anbindung von KI-Modellen an Webflow können Entwickler und KI-gestützte Tools programmatisch auf Webflow-Seitendaten zugreifen, diese abfragen und manipulieren. Zu den wichtigsten Funktionen gehört das Abrufen detaillierter Informationen über Webflow-Seiten, wie Seitennamen, IDs, Domains, Lokalisierungseinstellungen und mehr. Dies verbessert Entwicklungs-Workflows, indem automatisiertes Seitenmanagement, Datenanalyse und kontextuelle Interaktionen direkt von KI-Plattformen aus ermöglicht werden. So können Teams Webflow-Ressourcen einfacher in ihre Toolchains und Automatisierungsabläufe integrieren.

Liste der Prompts

Im Repository werden keine Prompt-Vorlagen erwähnt.

Liste der Ressourcen

In der verfügbaren Dokumentation oder im Code sind keine expliziten Ressourcen gelistet.

Liste der Tools

• get_sites

  • Ruft eine Liste aller Webflow-Seiten ab, auf die der authentifizierte Nutzer Zugriff hat. Gibt Details wie Anzeigename, Kurzname, Seiten- und Workspace-IDs, Erstellungs- und Aktualisierungsdaten, Vorschau-URL, Zeitzone, eigene Domains, Lokalisierungseinstellungen und Präferenzen zur Datenerfassung zurück.

• get_site

  • Ruft detaillierte Informationen zu einer bestimmten Webflow-Seite anhand ihrer siteId ab. Gibt denselben Umfang an Detailinformationen wie get_sites, jedoch für eine einzelne Seite, zurück.

Anwendungsfälle dieses MCP Servers

• Webflow-Seitenerkennung
  • Entwickler oder KI-Agenten können alle mit einem Konto verbundenen Webflow-Seiten schnell auflisten, was die Verwaltung mehrerer Webprojekte erleichtert.
• Automatisiertes Seitenmanagement
  • Abrufen und Überwachen von Metadaten (z. B. Veröffentlichungsdatum, eigene Domains, Sprachen) für eine oder mehrere Webflow-Seiten, um Verwaltungsaufgaben zu optimieren.
• Kontextbezogene KI-Interaktionen
  • KI-Assistenten können detaillierte Seiteninformationen abrufen, um Nutzeranfragen zu beantworten oder Automatisierungsflüsse auf Basis aktueller Seitenkonfigurationen zu steuern.
• Integration mit CI/CD-Pipelines
  • Nutzung von Seiteninformationen als Teil automatisierter Deployments, Veröffentlichungen oder Analyse-Workflows in umfassenden Entwicklungspipelines.

So richten Sie es ein

Windsurf

Im Repository werden keine spezifischen Anweisungen für Windsurf bereitgestellt.

Claude

1. Voraussetzungen
   • Stellen Sie sicher, dass Node.js (v16+) installiert ist.
   • Installieren Sie die Claude Desktop App.
   • Besorgen Sie sich einen Webflow API Token.
2. Abhängigkeiten installieren
   • Führen Sie aus: npm install
3. Umgebungsvariablen konfigurieren
   • Erstellen Sie eine .env-Datei mit folgendem Inhalt:

     WEBFLOW_API_TOKEN=Ihr-api-token
     

4. Claude Desktop konfigurieren
   • Öffnen Sie die Claude-Konfigurationsdatei:
     • Für MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
     • Für Windows: %AppData%\Claude\claude_desktop_config.json
   • Ergänzen/aktualisieren Sie:

     {
         "mcpServers": {
             "webflow": {
                 "command": "node",
                 "args": [
                     "/ABSOLUTER/PFAD/ZU/IHREM/build/index.js"
                 ],
                 "env": {
                     "WEBFLOW_API_TOKEN": "Ihr-api-token"
                 }
             }
         }
     }
     

   • Speichern und starten Sie die Claude Desktop App neu.

API-Schlüssel sichern (env-Beispiel):

{
    "mcpServers": {
        "webflow": {
            "command": "node",
            "args": [
                "/ABSOLUTER/PFAD/ZU/IHREM/build/index.js"
            ],
            "env": {
                "WEBFLOW_API_TOKEN": "Ihr-api-token"
            }
        }
    }
}

Cursor

Im Repository werden keine spezifischen Anweisungen für Cursor bereitgestellt.

Cline

Im Repository werden keine spezifischen Anweisungen für Cline bereitgestellt.

Installation via Smithery

• Führen Sie aus:

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

So nutzen Sie diesen MCP innerhalb von Flows

Nutzung von MCP in FlowHunt

Um MCP-Server in Ihren FlowHunt-Workflow zu integrieren, fügen Sie zunächst die MCP-Komponente zu Ihrem Flow hinzu und verbinden diese mit Ihrem KI-Agenten:

Klicken Sie auf die MCP-Komponente, um das Konfigurationspanel zu öffnen. Im Abschnitt zur System-MCP-Konfiguration tragen Sie Ihre MCP-Serverdetails in folgendem JSON-Format ein:

{
  "webflow": {
    "transport": "streamable_http",
    "url": "https://ihrmcpserver.beispiel/pfadzumcp/url"
  }
}

Nach der Konfiguration kann der KI-Agent diesen MCP als Tool mit Zugriff auf alle Funktionen und Möglichkeiten nutzen. Vergessen Sie nicht, “webflow” durch den tatsächlichen Namen Ihres MCP-Servers zu ersetzen und die URL auf Ihre eigene MCP-Server-URL anzupassen.

Übersicht

Auf Basis der beiden Tabellen bietet der Webflow MCP Server klare und hilfreiche Werkzeuge für die Webflow/KI-Integration, aber es fehlen Prompt-Vorlagen, Ressourcendefinitionen sowie explizite Unterstützung für Roots oder Sampling. Die Einrichtung und Dokumentation sind für Claude solide, andere Plattformen sind jedoch nicht dokumentiert.

MCP Score