Webflow MCP Server

offiziell

Interagiere mit den Webflow-APIs, um deine Website- und CMS-Daten aufzulisten und zu bearbeiten.

GitHub
132

Dokumentation

Webflow's MCP-Server

Ein Node.js-Server, der das Model Context Protocol (MCP) für Webflow unter Verwendung des Webflow JavaScript SDK implementiert. Ermöglicht KI-Agenten die Interaktion mit Webflow-APIs. Erfahren Sie mehr über die Data API von Webflow in der Entwicklerdokumentation.

npm shield Webflow

Voraussetzungen

🚀 Remote-Installation

Beginnen Sie mit der Installation des Remote-MCP-Servers von Webflow. Der Remote-Server verwendet OAuth zur Authentifizierung bei Ihren Webflow-Websites und eine Begleit-App, die Ihre Live-Arbeitsfläche mit Ihrem KI-Agenten synchronisiert.

Anforderungen

  • Node.js 22.3.0 oder höher

Hinweis: Der MCP-Server unterstützt derzeit Node.js 22.3.0 oder höher. Wenn Sie auf Versionsprobleme stoßen, lesen Sie die Node.js-Kompatibilitätsanleitung.

Cursor

MCP-Server zu Cursor hinzufügen

  1. Gehen Sie zu Settings → Cursor Settings → MCP & Integrations.
  2. Klicken Sie unter MCP-Tools auf + New MCP Server.
  3. Fügen Sie die folgende Konfiguration in .cursor/mcp.json ein (oder fügen Sie den webflow-Teil zu Ihrer bestehenden Konfiguration hinzu):
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

Tipp: Sie können eine mcp.json auf Projektebene erstellen, um wiederholte Authentifizierungsaufforderungen über mehrere Cursor-Fenster hinweg zu vermeiden. Siehe Cursors Dokumentation zu Konfigurationsspeicherorten.

  1. Speichern und schließen Sie die Datei. Cursor öffnet automatisch eine OAuth-Anmeldeseite, auf der Sie Webflow-Websites für die Verwendung mit dem MCP-Server autorisieren können.

Den Webflow Designer öffnen

  • Öffnen Sie Ihre Website im Webflow Designer oder bitten Sie Ihren KI-Agenten:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Die MCP Webflow App öffnen

  1. Öffnen Sie im Designer das Apps-Panel (drücken Sie E).
  2. Starten Sie Ihre veröffentlichte „Webflow MCP Bridge App“.
  3. Warten Sie, bis die App eine Verbindung zum MCP-Server hergestellt hat.

Schreiben Sie Ihren ersten Prompt

Probieren Sie diese in Ihrem KI-Chat aus:

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Claude Desktop

MCP-Server zu Claude Desktop hinzufügen

  1. Aktivieren Sie den Entwicklermodus: Help → Troubleshooting → Enable Developer Mode.
  2. Öffnen Sie die Entwicklereinstellungen: File → Settings → Developer.
  3. Klicken Sie auf Get Started oder bearbeiten Sie die Konfiguration, um claude_desktop_config.json zu öffnen und fügen Sie hinzu:
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. Speichern Sie und starten Sie Claude Desktop neu (Cmd/Ctrl + R). Eine OAuth-Anmeldeseite öffnet sich, um Websites zu autorisieren.

Den Webflow Designer öffnen

  • Öffnen Sie Ihre Website im Webflow Designer oder bitten Sie Ihren KI-Agenten:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Die MCP Webflow App öffnen

  1. Öffnen Sie im Designer das Apps-Panel (drücken Sie E).
  2. Starten Sie Ihre veröffentlichte „Webflow MCP Bridge App“.
  3. Warten Sie, bis die App eine Verbindung zum MCP-Server hergestellt hat.

Schreiben Sie Ihren ersten Prompt

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Ihr OAuth-Token zurücksetzen

Um Ihr OAuth-Token zurückzusetzen, führen Sie den folgenden Befehl in Ihrem Terminal aus.

rm -rf ~/.mcp-auth

Node.js-Kompatibilität

Bitte lesen Sie die Node.js-Kompatibilitätsanleitung in der Webflow-Entwicklerdokumentation.

Lokale Installation

Sie können den MCP-Server auch so konfigurieren, dass er lokal ausgeführt wird. Dies erfordert:

  • Erstellen und Registrieren Ihrer eigenen MCP Bridge App in einem Webflow-Workspace mit Admin-Berechtigungen
  • Konfigurieren Ihres KI-Clients, um den lokalen MCP-Server mit einem Webflow-API-Token zu starten

1. Die MCP Bridge App erstellen und veröffentlichen

Bevor Sie den lokalen MCP-Server mit Ihrem KI-Client verbinden, müssen Sie die Webflow MCP Bridge App in Ihrem Workspace erstellen und veröffentlichen.

Schritte

  1. Eine Webflow-App registrieren

    • Gehen Sie zu Ihrem Webflow-Workspace und registrieren Sie eine neue App.
    • Folgen Sie der offiziellen Anleitung: Eine App registrieren.

  2. Den Code der MCP Bridge App erhalten

    • Option A: Laden Sie die neueste bundle.zip von der Releases-Seite herunter.
    • Option B: Klonen Sie das Repository und bauen Sie es: 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • Bauen Sie dann das Projekt gemäß den Repository-Anweisungen.

  3. Die Designer-Erweiterung veröffentlichen

    • Gehen Sie zu Webflow Dashboard → Workspace-Einstellungen → Apps & Integrationen → Entwickeln → Ihre App.
    • Klicken Sie auf „Erweiterungsversion veröffentlichen“.
    • Laden Sie Ihre gebaute bundle.zip-Datei hoch.

  4. Die App im Designer öffnen

    • Öffnen Sie nach der Veröffentlichung die MCP Bridge App über das Designer → Apps-Panel in einer Website innerhalb Ihres Workspace.

2. Ihren KI-Client konfigurieren

Cursor

Zu .cursor/mcp.json hinzufügen:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server@latest"],
      "env": {
        "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
      }
    }
  }
}

Claude Desktop

Zu claude_desktop_config.json hinzufügen:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server@latest"],
      "env": {
        "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
      }
    }
  }
}

3. Den MCP-Server mit dem Webflow Designer verwenden

  • Öffnen Sie Ihre Website im Webflow Designer.
  • Öffnen Sie das Apps-Panel (drücken Sie E) und starten Sie Ihre veröffentlichte „Webflow MCP Bridge App“.
  • Warten Sie, bis die App eine Verbindung zum MCP-Server hergestellt hat, und verwenden Sie dann die Tools von Ihrem KI-Client aus.
  • Wenn die Bridge App nach einer lokalen Verbindungs-URL fragt, rufen Sie das get_designer_app_connection_info-Tool von Ihrem KI-Client aus auf und fügen Sie die zurückgegebene http://localhost:<port>-URL ein.

Optional: Lokal über die Shell ausführen

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest

# PowerShell
$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
npx -y webflow-mcp-server@latest

Ihr OAuth-Token zurücksetzen

Um Ihr OAuth-Token zurückzusetzen, führen Sie den folgenden Befehl in Ihrem Terminal aus.

rm -rf ~/.mcp-auth

Node.js-Kompatibilität

Bitte lesen Sie die Node.js-Kompatibilitätsanleitung in der Webflow-Entwicklerdokumentation.

❓ Fehlerbehebung

Wenn Sie Probleme beim Starten des Servers in Ihrem MCP-Client (z. B. Cursor oder Claude Desktop) haben, versuchen Sie bitte Folgendes.

Stellen Sie sicher, dass Sie ein gültiges Webflow-API-Token haben

  1. Gehen Sie zum Webflow API Playground, melden Sie sich an und generieren Sie ein Token, dann kopieren Sie das Token aus dem Request Generator
  2. Ersetzen Sie YOUR_WEBFLOW_TOKEN in Ihrer MCP-Client-Konfiguration durch das kopierte Token
  3. Speichern Sie und starten Sie Ihren MCP-Client neu

Stellen Sie sicher, dass Node und NPM installiert sind

Führen Sie die folgenden Befehle aus, um zu bestätigen, dass Node und NPM installiert sind:

node -v
npm -v

Leeren Sie Ihren NPM-Cache

Manchmal kann das Leeren Ihres NPM-Cache Probleme mit npx beheben.

npm cache clean --force

NPM-Berechtigungen für globale Pakete korrigieren

Wenn npm -v bei Ihnen nicht funktioniert, sudo npm -v aber schon, müssen Sie möglicherweise die NPM-Berechtigungen für globale Pakete korrigieren. Weitere Informationen finden Sie in der offiziellen NPM-Dokumentation.

Hinweis: Wenn Sie Änderungen an Ihrer Shell-Konfiguration vornehmen, müssen Sie Ihre Shell möglicherweise neu starten, damit die Änderungen wirksam werden.

🛠️ Verfügbare Tools

Sehen Sie sich das ./tools-Verzeichnis für eine Liste der verfügbaren Tools an

🗣️ Prompts & Ressourcen

Diese Implementierung enthält keine prompts oder resources aus der MCP-Spezifikation. Dies kann sich jedoch in Zukunft ändern, wenn es eine breitere Unterstützung in gängigen MCP-Clients gibt.

📄 Webflow-Entwicklerressourcen

⚠️ Bekannte Einschränkungen

Aktualisierungen statischer Seiteninhalte

Der pages_update_static_content-Endpunkt unterstützt derzeit nur Aktualisierungen lokalisierter statischer Seiten in sekundären Sprachversionen. Aktualisierungen statischer Inhalte in der Standard-Sprachversion werden nicht unterstützt und führen zu Fehlern.