Skip to main content
Glama
deenesjakoruzh

Webflow

Official
by webflow
npmGitHub
TypeScript
MIT License
188
43
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Offizieller MCP-Server von Webflow

Ein Node.js-Server, der das Model Context Protocol (MCP) für Webflow mithilfe des Webflow JavaScript SDK implementiert. Ermöglicht KI-Agenten die Interaktion mit Webflow-APIs. Weitere Informationen zur Webflow-Daten-API finden Sie in der Entwicklerdokumentation .

ℹ Voraussetzungen

▶️ Schnellstart (gehostet auf Cloudflare-Workern)

Für Cursor:

  1. Gehen Sie zu Settings → Cursor Settings → MCP
  2. Klicken Sie auf + Add New Global MCP Server
  3. Fügen Sie die folgende Konfiguration ein (oder fügen Sie den webflow -Teil zu Ihrer vorhandenen Konfiguration hinzu)
{ "mcpServers": { "webflow": { "command": "npx mcp-remote https://mcp.webflow.com/sse" } } }
  1. Speichern. Cursor öffnet automatisch ein neues Browserfenster mit einer OAuth-Anmeldeseite, um die Webflow-Sites zu autorisieren, auf die der MCP-Server Zugriff haben soll.

Für Claude Desktop:

  1. Öffnen Sie Settings → Developer
  2. Klicken Sie Edit Config
  3. Öffnen Sie claude_desktop_config.json in einem Code-Editor und fügen Sie die folgende Konfiguration ein (oder fügen Sie den webflow -Teil zu Ihrer vorhandenen Konfiguration hinzu).
{ "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }
  1. Speichern Sie die Datei und starten Sie Claude Desktop neu (Befehl/Strg + R). Beim Neustart öffnet sich automatisch ein neues Browserfenster mit einer OAuth-Anmeldeseite zur Autorisierung der Webflow-Sites, auf die der MCP-Server Zugriff haben soll.

Für Windsurfen:

  1. Navigieren Sie zu Windsurf - Settings → Advanced Settings
  2. Scrollen Sie nach unten zum Abschnitt Cascade → Add Server → Add custom server +
  3. Fügen Sie die folgende Konfiguration ein (oder fügen Sie den webflow -Teil zu Ihrer vorhandenen Konfiguration hinzu)
{ "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }
  1. Klicken Sie auf Save . Windsurf öffnet automatisch ein neues Browserfenster mit einer OAuth-Anmeldeseite, um die Webflow-Sites zu autorisieren, auf die der MCP-Server Zugriff haben soll.

Wichtiger Hinweis

Alle diese Methoden basieren auf dem npm-Paket mcp-remote , das am 30.04.2025 noch als experimentell gilt. Sollten Probleme auftreten und Sie Ihre OAuth-Token zurücksetzen möchten, können Sie vor dem Neustart Ihres MCP-Clients den folgenden Befehl ausführen:

rm -rf ~/.mcp-auth

▶️ Schnellstart (lokale Installation)

  1. Holen Sie sich Ihr Webflow-API-Token
  1. Zu Ihrem KI-Editor hinzufügen
{ "mcpServers": { "webflow": { "command": "npx", "args": ["-y", "webflow-mcp-server@0.5.1"], "env": { "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>" } } } }

Für Cursor:

  1. Gehen Sie zu Einstellungen → Cursoreinstellungen → MCP
  2. Klicken Sie auf + Add New Global MCP Server
  3. Konfiguration einfügen
  4. Ersetzen Sie YOUR_WEBFLOW_TOKEN durch das Token, das Sie zuvor kopiert haben
  5. Cursor speichern und neu starten

Für Claude Desktop:

  1. Öffnen Sie Einstellungen → Entwickler
  2. Klicken Sie Edit Config
  3. Öffnen Sie claude_desktop_config.json in einem Code-Editor und fügen Sie die Konfiguration ein
  4. Ersetzen Sie YOUR_WEBFLOW_TOKEN durch das Token, das Sie zuvor kopiert haben. 5. Speichern Sie und starten Sie Claude neu.

❓ Fehlerbehebung

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

Stellen Sie sicher, dass Sie über ein gültiges Webflow-API-Token verfügen

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

Stellen Sie sicher, dass Sie Node und NPM installiert haben

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

node -v npm -v

Leeren Sie Ihren NPM-Cache

Manchmal können Probleme mit npx durch das Leeren Ihres NPM-Cache behoben werden.

npm cache clean --force

Korrigieren Sie die globalen Paketberechtigungen von NPM

Wenn npm -v bei Ihnen nicht funktioniert sudo npm -v jedoch schon, müssen Sie möglicherweise die globalen Paketberechtigungen von NPM 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

Seiten

sites - list; // List all sites sites - get; // Get site details sites - publish; // Publish site changes

Seiten

pages - list; // List all pages pages - get - metadata; // Get page metadata pages - update - page - settings; // Update page settings pages - get - content; // Get page content pages - update - static - content; // Update page content

Komponenten

components - list // List all components in a site components - get - content // Get component content (text, images, nested components) components - update - content // Update component content for localization components - get - properties // Get component properties (default values) components - update - properties // Update component properties for localization

CMS

collections - list; // List collections collections - get; // Get collection details collections - create; // Create a collection collection - fields - create - static; // Create a static field collection - fields - create - option; // Create an option field collection - fields - create - reference; // Create a reference field collection - fields - update; // Update a custom field collections - items - create - item - live; // Create items collections - items - update - items - live; // Update items collections - items - list - items; // List collection items collections - items - create - item; // Create collection items (staged) collections - items - update - items; // Update collection items (staged) collections - items - publish - items; // Publish collection items

Benutzerdefinierter Code

custom code - add - inline - site - script // Register an inline script for a site custom code - get - registered - site - script - list // List all scripts registered to a site custom code - get - applied - site - script - list //Get all scripts applied to a site custom code - delete site custom code // Remove scripts from a site

🗣️ Eingabeaufforderungen und Ressourcen

Diese Implementierung enthält keine prompts oder resources aus der MCP-Spezifikation. Dies kann sich jedoch in Zukunft ändern, wenn die Unterstützung durch gängige MCP-Clients breiter wird.

🚧 Entwicklungsmodus

Wenn Sie den Server im Entwicklungsmodus ausführen möchten, können Sie Abhängigkeiten installieren und den Server mit dem folgenden Befehl ausführen:

  1. Klonen und installieren:
git clone git@github.com:webflow/mcp-server.git cd mcp-server npm install
  1. Fügen Sie Ihr Token zu einer .env Datei im Stammverzeichnis des Projekts hinzu:
# .env WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
  1. Entwicklungsserver starten:
npm start

📄 Webflow-Entwicklerressourcen

⚠️ Bekannte Einschränkungen

Aktualisierungen statischer Seiteninhalte

Der Endpunkt „pages_update_static_content“ unterstützt derzeit nur Aktualisierungen lokalisierter statischer Seiten in sekundären Gebietsschemata. Aktualisierungen statischer Inhalte im Standardgebietsschema werden nicht unterstützt und führen zu Fehlern.

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all tools

Interagieren Sie mit Webflow-Sites, -Seiten und -Sammlungen.

  1. ℹ Voraussetzungen
    1. ▶️ Schnellstart (gehostet auf Cloudflare-Workern)
      1. ▶️ Schnellstart (lokale Installation)
        1. ❓ Fehlerbehebung
          1. Stellen Sie sicher, dass Sie über ein gültiges Webflow-API-Token verfügen
          2. Stellen Sie sicher, dass Sie Node und NPM installiert haben
          3. Leeren Sie Ihren NPM-Cache
          4. Korrigieren Sie die globalen Paketberechtigungen von NPM
        2. 🛠️ Verfügbare Tools
          1. Seiten
          2. Seiten
          3. Komponenten
          4. CMS
          5. Benutzerdefinierter Code
        3. 🗣️ Eingabeaufforderungen und Ressourcen
          1. 🚧 Entwicklungsmodus
            1. 📄 Webflow-Entwicklerressourcen
            2. ⚠️ Bekannte Einschränkungen

          Related Resources

          Related MCP Servers

          • mcp-twikit

            adhikasp
            -
            security
            A
            license
            -
            quality
            Interact with Twitter search and timeline
            Last updated -
            4
            41
            Python
            MIT License

          • Webflow MCP Server

            kapilduraphe
            A
            security
            A
            license
            A
            quality
            Enables Claude to interact with Webflow's APIs for managing sites, retrieving information, and executing tasks using natural language.
            Last updated -
            2
            4
            TypeScript
            MIT License
            • Apple
            • Linux

          • Confluence Communication Server

            KS-GEN-AI
            A
            security
            A
            license
            A
            quality
            Enables querying and retrieving content from Confluence through CQL searches and page content fetching, allowing Claude to seamlessly access information stored in Confluence workspaces.
            Last updated -
            2
            10
            JavaScript
            MIT License
            • Apple

          • Webflow MCP Server

            TimKJones
            -
            security
            A
            license
            -
            quality
            Enables Claude to interact with Webflow's APIs, allowing access to site information, collections, and other Webflow resources.
            Last updated -
            TypeScript
            MIT License
            • Apple

          View all related MCP servers

          Appeared in Searches

          New MCP Servers

          MCP directory API

          We provide all the information about MCP servers via our MCP API.

          curl -X GET 'https://glama.ai/api/mcp/v1/servers/webflow/mcp-server'

          If you have feedback or need assistance with the MCP directory API, please join our Discord server