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.

Bereit, Ihr Geschäft zu erweitern?

Starten Sie heute Ihre kostenlose Testversion und sehen Sie innerhalb weniger Tage Ergebnisse.

Demo anfragen Anmelden

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.

Abonnieren Sie unseren Newsletter

Erhalten Sie die neuesten Tipps, Trends und Angebote kostenlos.

E-Mail-Adresse

Abonnieren

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