Servidor MCP oficial de Webflow

Un servidor Node.js que implementa el Protocolo de contexto de modelo (MCP) para Webflow utilizando el SDK JavaScript de Webflow. Permite a los agentes de AI interactuar con las API de Webflow. Obtenga más información sobre la API de datos de Webflow en la documentación para desarrolladores.

ℹ Requisitos previos

• Node.js
• NPM
• Una cuenta de Webflow

▶️ Inicio rápido (alojado en trabajadores de Cloudflare)

Para Cursor:

1. Vaya a Configuración → Configuración de Cursor → MCP
2. Haga clic en + Añadir nuevo servidor MCP global
3. Pegue la siguiente configuración (o añada la parte webflow a su configuración existente)

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

4. Guardar, Cursor abrirá automáticamente una nueva ventana del navegador mostrando una página de inicio de sesión OAuth para autorizar los sitios Webflow a los que desea que el servidor MCP tenga acceso.

Para Claude Desktop:

1. Abra Configuración → Desarrollador
2. Haga clic en Editar configuración
3. Abra claude_desktop_config.json en un editor de código y pegue la siguiente configuración (o añada la parte webflow a su configuración existente)

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

4. Guarde el archivo y reinicie Claude Desktop (command/ctrl + R). Cuando Claude se reinicie, se abrirá automáticamente una nueva ventana del navegador mostrando una página de inicio de sesión OAuth para autorizar los sitios Webflow a los que desea que el servidor MCP tenga acceso.

Para Windsurf:

1. Navegue hasta Windsurf - Configuración → Configuración avanzada
2. Desplácese hasta la sección Cascada → Añadir servidor → Añadir servidor personalizado +
3. Pega la siguiente configuración (o añade la parte webflow a tu configuración existente)

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

4. Haga clic en Guardar, Windsurf abrirá automáticamente una nueva ventana del navegador mostrando una página de inicio de sesión OAuth para autorizar los sitios Webflow a los que desea que el servidor MCP tenga acceso.

Para VS Code:

1. Abra settings.json
2. Pega la siguiente configuración (o añade la parte webflow a tu configuración existente)

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

4. Guarde el archivo. Debería aparecer un botón de inicio sobre la tecla "webflow" en el que puede hacer clic para abrir y ejecutar el flujo de autenticación. Alternativamente, reinicie VS Code y el flujo de autenticación se iniciará automáticamente.

Nota importante

Todos estos métodos se basan en el paquete npmmcp-remote que todavía se considera experimental a partir del 30/04/2025. Si en algún momento tiene problemas, y desea restablecer sus tokens OAuth, puede ejecutar el siguiente comando antes de reiniciar su cliente MCP:

rm -rf ~/.mcp-auth

▶️ Inicio rápido (instalación local)

1. Obtenga su token de API de Webflow

• Vaya a Webflow's API Playground
• Inicie sesión y genere un código de acceso
• Copie el código del generador de solicitudes

2. Añada a su editor de AI

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

Para Cursor:

1. Vaya a Configuración → Configuración del cursor → MCP
2. Haga clic en + Añadir nuevo servidor MCP global
3. Pegue la configuración
4. Sustituya YOUR_WEBFLOW_TOKEN por el token que copió anteriormente
5. Guarde y reinicie el Cursor

Para Claude Desktop:

1. Abra Configuración → Desarrollador
2. Haga clic en Editar configuración
3. Abre claude_desktop_config.json en un editor de código y pega la configuración
4. Sustituye YOUR_WEBFLOW_TOKEN por el token que copiaste anteriormente 5. Guarde y reinicie Claude

solución de problemas

Si tiene problemas para iniciar el servidor en su cliente MCP, por ejemplo Cursor o Claude Desktop, intente lo siguiente.

Asegúrese de que dispone de un token de API de Webflow válido

1. Vaya a Webflow's API Playground, inicie sesión y genere un token, luego copie el token del generador de solicitudes
2. Sustituya YOUR_WEBFLOW_TOKEN en la configuración de su cliente MCP por el código que ha copiado
3. Guarde y reinicie su cliente MCP

Asegúrate de tener instalado Node y NPM

• Node.js
• NPM

Ejecuta los siguientes comandos para confirmar que tienes Node y NPM instalados:

node -v npm -v

Borra la caché de NPM

A veces borrar la caché de NPM puede resolver problemas con npx.

npm cache clean --force

Arreglar los permisos globales de paquetes NPM

Si npm -v no le funciona pero sudo npm -v sí, puede que necesite arreglar los permisos globales de paquetes NPM. Consulte la documentación oficial de NPM para obtener más información.

Nota: si está haciendo cambios en la configuración de su shell, puede que necesite reiniciar su shell para que los cambios surtan efecto.

🛠️ Herramientas disponibles

Sitios

sites - list; // Listar todos los sitios sites - get; // Obtener detalles del sitio sites - publish; // Publicar cambios en el sitio

Páginas

pages - list; // Listar todas las páginas pages - get - metadata; // Obtener los metadatos de la página pages - update - page - settings; // Actualizar la configuración de la página pages - get - content; // Obtener el contenido de la página pages - update - static - content; // Actualizar el contenido de la página

Componentes

components - list // Listar todos los componentes de un sitio components - get - content // Obtener el contenido de los componentes (texto, imágenes, componentes anidados) components - update - content // Actualizar el contenido de los componentes para su localización components - get - properties // Obtener las propiedades de los componentes (valores por defecto) components - update - properties // Actualizar las propiedades de los componentes para su localización

CMS

collections - list; // Listar colecciones collections - get; // Obtener detalles de la colección collections - create; // Crear una colección collection - fields - create - static; // Crear una colección de campos static - fields - create - option; // Crear una colección de campos option - fields - create - reference; // Crear una colección de campos reference - fields - update; // Actualizar un campo personalizado colecciones - items - create - item - live; // Crear items colecciones - items - update - items - live; // Actualizar items colecciones - items - list - items; // Listar items de colección colecciones - items - create - item; // Crear items de colección (por etapas) colecciones - items - update - items; // Actualizar items de colección (por etapas) colecciones - items - publish - items; // Publicar items de colección

Código personalizado

custom code - add - inline - site - script // Registrar un script en línea para un sitio custom code - get - registered - site - script - list // Listar todos los scripts registrados en un sitio custom code - get - applied - site - script - list // Obtener todos los scripts aplicados a un sitio custom code - delete site custom code // Eliminar scripts de un sitio

Componentes

components - list; // Listar todos los componentes de un sitio components - content - get; // Obtener el contenido estático de una definición de componente components - content - update; // Actualizar el contenido de una definición de componente para configuraciones regionales secundarias components - properties - get; // Obtener los valores de las propiedades por defecto de una definición de componente components - properties - update; // Actualizar los valores de las propiedades por defecto de una definición de componente para configuraciones regionales secundarias

Preguntar a Webflow AI

ask - webflow - ai; // Buscar documentos Webflow utilizando la búsqueda AI

🗣️ Avisos y recursos

Esta implementación no incluye avisos ni recursos de la especificación MCP. Sin embargo, esto puede cambiar en el futuro cuando haya un soporte más amplio a través de clientes MCP populares.

🚧 Modo de desarrollo

Si desea ejecutar el servidor en modo de desarrollo, puede instalar las dependencias y ejecutar el servidor utilizando el siguiente comando:

1. Clonar e instalar:

git clone git@github.com:webflow/mcp-server.git cd mcp-server npm install

2. Añade tu token a un archivo .env en la raíz del proyecto:

# .env WEBFLOW_TOKEN=<TU_TOKEN_WEBFLOW>

3. Inicie el servidor de desarrollo:

npm start

📄 Recursos para desarrolladores de Webflow

• Documentación de la API de Webflow
• SDK de JavaScript de Webflow

⚠️ Limitaciones conocidas

Actualizaciones de contenido de páginas estáticas

Actualmente, el punto final pages_update_static_content sólo admite actualizaciones de páginas estáticas localizadas en configuraciones regionales secundarias. Las actualizaciones de contenido estático en la configuración regional predeterminada no son compatibles y producirán errores.