Webflow

Servidor MCP de Webflow

Un servidor Node.js que implementa el Protocolo de Contexto de Modelo (MCP) para Webflow usando el SDK de JavaScript de Webflow. Permite que los agentes de IA interactúen con las APIs de Webflow. Obtén 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

🚀 Instalación remota

Comienza instalando el servidor MCP remoto de Webflow. El servidor remoto usa OAuth para autenticarse con tus sitios de Webflow, y una aplicación complementaria que sincroniza tu lienzo en vivo con tu agente de IA.

Requisitos

• Node.js 22.3.0 o superior

Nota: El servidor MCP actualmente es compatible con Node.js 22.3.0 o superior. Si encuentras problemas de versión, consulta la guía de compatibilidad de Node.js.

Cursor

Agregar el servidor MCP a Cursor

1. Ve a Settings → Cursor Settings → MCP & Integrations.
2. En Herramientas MCP, haz clic en + New MCP Server.
3. Pega la siguiente configuración en .cursor/mcp.json (o agrega la parte de webflow a tu configuración existente):

{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

Consejo: Puedes crear un mcp.json a nivel de proyecto para evitar solicitudes de autenticación repetidas en múltiples ventanas de Cursor. Consulta la documentación de Cursor sobre ubicaciones de configuración.

4. Guarda y cierra el archivo. Cursor abrirá automáticamente una página de inicio de sesión OAuth donde puedes autorizar los sitios de Webflow para usar con el servidor MCP.

Abrir el Diseñador de Webflow

• Abre tu sitio en el Diseñador de Webflow, o pídele a tu agente de IA:

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Abrir la App MCP de Webflow

1. En el Diseñador, abre el panel de Apps (presiona E).
2. Inicia tu "Webflow MCP Bridge App" publicada.
3. Espera a que la app se conecte al servidor MCP.

Escribe tu primer prompt

Prueba esto en tu chat de IA:

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

Agregar el servidor MCP a Claude desktop

1. Habilita el modo desarrollador: Help → Troubleshooting → Enable Developer Mode.
2. Abre la configuración de desarrollador: File → Settings → Developer.
3. Haz clic en Get Started o edita la configuración para abrir claude_desktop_config.json y agrega:

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

4. Guarda y reinicia Claude Desktop (Cmd/Ctrl + R). Se abrirá una página de inicio de sesión OAuth para autorizar los sitios.

Abrir el Diseñador de Webflow

• Abre tu sitio en el Diseñador de Webflow, o pídele a tu agente de IA:

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Abrir la App MCP de Webflow

1. En el Diseñador, abre el panel de Apps (presiona E).
2. Inicia tu "Webflow MCP Bridge App" publicada.
3. Espera a que la app se conecte al servidor MCP.

Escribe tu primer 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

Restablecer tu token OAuth

Para restablecer tu token OAuth, ejecuta el siguiente comando en tu terminal.

rm -rf ~/.mcp-auth

Compatibilidad con Node.js

Consulta la guía de compatibilidad de Node.js en la documentación para desarrolladores de Webflow.

---

Instalación local

También puedes configurar el servidor MCP para que se ejecute localmente. Esto requiere:

• Crear y registrar tu propia MCP Bridge App en un espacio de trabajo de Webflow con permisos de Administrador
• Configurar tu cliente de IA para iniciar el servidor MCP local con un token de API de Webflow

1. Crear y publicar la app puente MCP

Antes de conectar el servidor MCP local a tu cliente de IA, debes crear y publicar la Webflow MCP Bridge App en tu espacio de trabajo.

Pasos

1. Registrar una App de Webflow

   • Ve a tu Espacio de Trabajo de Webflow y registra una nueva app.
   • Sigue la guía oficial: Registrar una App.

2. Obtener el código de la MCP Bridge App

   • Opción A: Descarga el último bundle.zip desde la página de lanzamientos.
   • Opción B: Clona el repositorio y compílalo:

     git clone https://github.com/virat21/webflow-mcp-bridge-app
     cd webflow-mcp-bridge-app
     

     • Luego compila el proyecto siguiendo las instrucciones del repositorio.

3. Publicar la Extensión del Diseñador

   • Ve a Panel de Webflow → Configuración del espacio de trabajo → Apps e integraciones → Desarrollar → Tu App.
   • Haz clic en “Publicar Versión de Extensión”.
   • Sube tu archivo bundle.zip compilado.

4. Abrir la App en el Diseñador

   • Una vez publicada, abre la MCP Bridge App desde el panel Diseñador → Apps en un sitio dentro de tu espacio de trabajo.

2. Configurar tu cliente de IA

Cursor

Agrega a .cursor/mcp.json:

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

Claude desktop

Agrega a claude_desktop_config.json:

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

3. Usar el servidor MCP con el Diseñador de Webflow

• Abre tu sitio en el Diseñador de Webflow.
• Abre el panel de Apps (presiona E) e inicia tu “Webflow MCP Bridge App” publicada.
• Espera a que la app se conecte al servidor MCP, luego usa las herramientas desde tu cliente de IA.
• Si la Bridge App solicita una URL de conexión local, llama a la herramienta get_designer_app_connection_info desde tu cliente de IA y pega la URL http://localhost:<port> devuelta.

Opcional: Ejecutar localmente mediante shell

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

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

Restablecer tu Token OAuth

Para restablecer tu token OAuth, ejecuta el siguiente comando en tu terminal.

rm -rf ~/.mcp-auth

Compatibilidad con Node.js

Consulta la guía de compatibilidad de Node.js en la documentación para desarrolladores de Webflow.

❓ Solución de problemas

Si tienes problemas para iniciar el servidor en tu cliente MCP, por ejemplo, Cursor o Claude Desktop, intenta lo siguiente.

Asegúrate de tener un token de API de Webflow válido

1. Ve al API Playground de Webflow, inicia sesión y genera un token, luego copia el token del Generador de Solicitudes
2. Reemplaza YOUR_WEBFLOW_TOKEN en la configuración de tu cliente MCP con el token que copiaste
3. Guarda y reinicia tu cliente MCP

Asegúrate de tener Node y NPM instalados

• Node.js
• NPM

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

node -v
npm -v

Limpiar tu caché de NPM

A veces, limpiar tu caché de NPM puede resolver problemas con npx.

npm cache clean --force

Corregir permisos de paquetes globales de NPM

Si npm -v no te funciona pero sudo npm -v sí, es posible que necesites corregir los permisos de paquetes globales de NPM. Consulta la documentación oficial de NPM para más información.

Nota: si realizas cambios en la configuración de tu shell, es posible que necesites reiniciar tu shell para que los cambios surtan efecto.

🛠️ Herramientas disponibles

Consulta el directorio ./tools para ver una lista de las herramientas disponibles

🗣️ Prompts y recursos

Esta implementación no incluye prompts ni resources de la especificación MCP. Sin embargo, esto puede cambiar en el futuro cuando haya un soporte más amplio entre los clientes MCP populares.

📄 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

El endpoint pages_update_static_content actualmente solo 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 generarán errores.