Servidor oficial MCP de Webflow

Un servidor Node.js que implementa el Model Context Protocol (MCP) per a Webflow utilitzant el Webflow JavaScript SDK. Permet que agents d’IA interaccionin amb les APIs de Webflow. Aprèn més sobre l’API de dades de Webflow a la documentació per a desenvolupadors.

ℹ Requisits

• Node.js
• NPM
• Un compte Webflow

▶️ Inici ràpid (hostat a Cloudflare workers)

Per a Cursor:

1. Vés a Settings → Cursor Settings → MCP
2. Fes clic a + Add New Global MCP Server
3. Enganxa la configuració següent (o afegeix la part webflow a la teva configuració existent)

{
  "mcpServers": {
    "webflow": {
      "command": "npx mcp-remote https://mcp.webflow.com/sse"
    }
  }
}

4. Guarda, i Cursor obrirà automàticament una nova finestra del navegador amb la pàgina d’inici de sessió OAuth per autoritzar els llocs Webflow que vulguis que el servidor MCP tingui accés.

Per a Claude Desktop:

1. Obre Settings → Developer
2. Fes clic a Edit Config
3. Obre claude_desktop_config.json en un editor de codi i enganxa la configuració següent (o afegeix la part webflow a la teva configuració existent)

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}

4. Guarda el fitxer i reinicia Claude Desktop (command/ctrl + R). Quan Claude es reiniciï, obrirà automàticament una nova finestra del navegador amb la pàgina d’inici de sessió OAuth per autoritzar els llocs Webflow que vulguis que el servidor MCP tingui accés.

Per a Windsurf:

1. Vés a Windsurf - Settings → Advanced Settings
2. Desplaça't fins a la secció Cascade → Add Server → Add custom server +
3. Enganxa la configuració següent (o afegeix la part webflow a la teva configuració existent)

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}

4. Fes clic a Save, i Windsurf obrirà automàticament una nova finestra del navegador amb la pàgina d’inici de sessió OAuth per autoritzar els llocs Webflow que vulguis que el servidor MCP tingui accés.

Per a VS Code:

1. Obre settings.json
2. Enganxa la configuració següent (o afegeix la part webflow a la teva configuració existent)

{
  "mcp": {
    "servers": {
      "webflow": {
        "command": "npx",
        "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
      }
    }
  }
}

4. Guarda el fitxer. Hauràs de veure un botó start sobre la clau webflow que pots fer clic per obrir i executar el flux d’autenticació. Alternativament, reinicia VS Code i el flux d’autenticació s’hauria d’iniciar automàticament.

Nota important

Tots aquests mètodes depenen del paquet npm mcp-remote que encara es considera experimental a partir del 30/04/2025. Si en algun moment tens problemes i vols restablir els teus tokens OAuth, pots executar la comanda següent abans de reiniciar el client MCP:

rm -rf ~/.mcp-auth

▶️ Inici ràpid (instal·lació local)

1. Obtenir el teu token API de Webflow

• Vés a API Playground de Webflow
• Inicia sessió i genera un token
• Copia el token del Request Generator

2. Afegeix-lo al teu editor d’IA

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

Per a Cursor:

1. Vés a Settings → Cursor Settings → MCP
2. Fes clic a + Add New Global MCP Server
3. Enganxa la configuració
4. Substitueix YOUR_WEBFLOW_TOKEN pel token que vas copiar anteriorment
5. Guarda i reinicia Cursor

Per a Claude Desktop:

1. Obre Settings → Developer
2. Fes clic a Edit Config
3. Obre claude_desktop_config.json en un editor de codi i enganxa la configuració
4. Substitueix YOUR_WEBFLOW_TOKEN pel token que vas copiar anteriorment
5. Guarda i reinicia Claude

❓ Solució de problemes

Si tens problemes per iniciar el servidor en el teu client MCP (p. ex. Cursor o Claude Desktop), prova el següent.

Assegura't que tens un token API de Webflow vàlid

1. Vés a API Playground de Webflow, inicia sessió i genera un token, i després copia el token del Request Generator
2. Substitueix YOUR_WEBFLOW_TOKEN a la configuració del client MCP amb el token que vas copiar
3. Guarda i reinicia el teu client MCP

Assegura't que tens Node i NPM instal·lats

• Node.js
• NPM

Executa les comandes següents per confirmar que tens Node i NPM instal·lats:

node -v
npm -v

Esborra la caché de NPM

En alguns casos, esborrar la caché de NPM pot resoldre problemes amb npx.

npm cache clean --force

Corregir els permisos del paquet global de NPM

Si npm -v no funciona però sudo npm -v sí, potser has de corregir els permisos del paquet global de NPM. Consulta la documentació oficial de NPM per a més informació.

Nota: si estàs fent canvis a la configuració del teu shell, pot ser necessari reiniciar el shell perquè els canvis s’apliquin.

🛠️ Eines disponibles

Sites

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

Pages

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

Components

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 - preco; // List items

Custom Code

custom - create; // Create custom code
custom - get; // Get custom code
custom - update; // Update custom code

Components (de nou)

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

🗣️ Prompts & Recursos

Cap prompt o recurs addicional que s’hagi de considerar per a aquest projecte.

🚧 Mode de desenvolupament

Instal·la localment el servidor i executa les següents comandes per a iniciar el servidor MCP en mode desenvolupament:

npm install -g webflow-mcp-server
webflow-mcp-server start