Webflow

oficial

Interaja com as APIs do Webflow para listar e editar seu site e dados do CMS.

Documentação

Servidor MCP do Webflow

Um servidor Node.js que implementa o Model Context Protocol (MCP) para o Webflow usando o Webflow JavaScript SDK. Permite que agentes de IA interajam com as APIs do Webflow. Saiba mais sobre a API de Dados do Webflow na documentação do desenvolvedor.

Pré-requisitos

🚀 Instalação remota

Comece instalando o servidor MCP remoto do Webflow. O servidor remoto usa OAuth para autenticar com seus sites Webflow e um aplicativo complementar que sincroniza seu canvas ao vivo com seu agente de IA.

Requisitos

Node.js 22.3.0 ou superior

Nota: O servidor MCP atualmente suporta Node.js 22.3.0 ou superior. Se você encontrar problemas de versão, consulte a orientação de compatibilidade do Node.js.

Cursor

Adicionar servidor MCP ao Cursor

Vá para Settings → Cursor Settings → MCP & Integrations.
Em Ferramentas MCP, clique em + New MCP Server.
Cole a seguinte configuração em .cursor/mcp.json (ou adicione a parte webflow à sua configuração existente):

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

Dica: Você pode criar um mcp.json no nível do projeto para evitar prompts de autenticação repetidos em várias janelas do Cursor. Consulte a documentação do Cursor sobre locais de configuração.

Salve e feche o arquivo. O Cursor abrirá automaticamente uma página de login OAuth onde você pode autorizar sites Webflow para uso com o servidor MCP.

Abrir o Webflow Designer

Abra seu site no Webflow Designer ou peça ao seu agente de IA:

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

Abrir o aplicativo MCP Webflow

No Designer, abra o painel Apps (pressione E).
Inicie seu "Webflow MCP Bridge App" publicado.
Aguarde o aplicativo conectar ao servidor MCP.

Escreva seu primeiro prompt

Experimente estes no seu 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

Adicionar servidor MCP ao Claude desktop

Ative o modo desenvolvedor: Help → Troubleshooting → Enable Developer Mode.
Abra as configurações do desenvolvedor: File → Settings → Developer.
Clique em Get Started ou edite a configuração para abrir claude_desktop_config.json e adicione:

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

Salve e reinicie o Claude Desktop (Cmd/Ctrl + R). Uma página de login OAuth será aberta para autorizar sites.

Abrir o Webflow Designer

Abra seu site no Webflow Designer ou peça ao seu agente de IA:

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

Abrir o aplicativo MCP Webflow

No Designer, abra o painel Apps (pressione E).
Inicie seu "Webflow MCP Bridge App" publicado.
Aguarde o aplicativo conectar ao servidor MCP.

Escreva seu primeiro 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

Redefinir seu token OAuth

Para redefinir seu token OAuth, execute o seguinte comando no seu terminal.

rm -rf ~/.mcp-auth

Compatibilidade com Node.js

Consulte a orientação de compatibilidade na documentação do desenvolvedor do Webflow.

Instalação local

Você também pode configurar o servidor MCP para executar localmente. Isso requer:

Criar e registrar seu próprio MCP Bridge App em um workspace do Webflow com permissões de Administrador
Configurar seu cliente de IA para iniciar o servidor MCP local com um token de API do Webflow

1. Criar e publicar o aplicativo MCP bridge

Antes de conectar o servidor MCP local ao seu cliente de IA, você deve criar e publicar o Webflow MCP Bridge App no seu workspace.

Passos

Registrar um aplicativo Webflow
- Vá para o seu Workspace do Webflow e registre um novo aplicativo.
- Siga o guia oficial: Registrar um aplicativo.
Obter o código do MCP Bridge App
- Opção A: Baixe o bundle.zip mais recente da página de releases.
- Opção B: Clone o repositório e compile:
```
git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
```
  - Depois compile o projeto seguindo as instruções do repositório.
Publicar a Extensão do Designer
- Vá para Painel do Webflow → Configurações do workspace → Apps e Integrações → Desenvolver → Seu App.
- Clique em “Publicar Versão da Extensão”.
- Faça upload do seu arquivo bundle.zip compilado.
Abrir o App no Designer
- Uma vez publicado, abra o MCP Bridge App no Designer → painel Apps em um site dentro do seu workspace.

2. Configurar seu cliente de IA

Cursor

Adicione ao .cursor/mcp.json:

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

Claude desktop

Adicione ao claude_desktop_config.json:

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

3. Usar o servidor MCP com o Webflow Designer

Abra seu site no Webflow Designer.
Abra o painel Apps (pressione E) e inicie seu “Webflow MCP Bridge App” publicado.
Aguarde o aplicativo conectar ao servidor MCP e então use as ferramentas do seu cliente de IA.
Se o Bridge App solicitar uma URL de conexão local, chame a ferramenta get_designer_app_connection_info do seu cliente de IA e cole a URL http://localhost:<port> retornada.

Opcional: Executar localmente via 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

Redefinir seu Token OAuth

Para redefinir seu token OAuth, execute o seguinte comando no seu terminal.

rm -rf ~/.mcp-auth

Compatibilidade com Node.js

Consulte a orientação de compatibilidade na documentação do desenvolvedor do Webflow.

❓ Solução de problemas

Se você estiver tendo problemas para iniciar o servidor no seu cliente MCP, como Cursor ou Claude Desktop, tente o seguinte.

Certifique-se de ter um token de API do Webflow válido

Vá para o API Playground do Webflow, faça login e gere um token, depois copie o token do Gerador de Solicitações
Substitua YOUR_WEBFLOW_TOKEN na configuração do seu cliente MCP pelo token que você copiou
Salve e reinicie seu cliente MCP

Certifique-se de ter o Node e o NPM instalados

Node.js
NPM

Execute os seguintes comandos para confirmar que você tem o Node e o NPM instalados:

node -v
npm -v

Limpar o cache do NPM

Às vezes, limpar o cache do NPM pode resolver problemas com npx.

npm cache clean --force

Corrigir permissões de pacotes globais do NPM

Se npm -v não funcionar para você, mas sudo npm -v funcionar, talvez seja necessário corrigir as permissões de pacotes globais do NPM. Consulte a documentação oficial do NPM para mais informações.

Nota: se você estiver fazendo alterações na configuração do seu shell, pode ser necessário reiniciar o shell para que as alterações tenham efeito.

🛠️ Ferramentas disponíveis

Consulte o diretório ./tools para obter uma lista das ferramentas disponíveis

🗣️ Prompts e recursos

Esta implementação não inclui prompts ou resources da especificação MCP. No entanto, isso pode mudar no futuro quando houver um suporte mais amplo entre os clientes MCP populares.

📄 Recursos para desenvolvedores Webflow

⚠️ Limitações conhecidas

Atualizações de conteúdo de página estática

O endpoint pages_update_static_content atualmente suporta apenas atualizações para páginas estáticas localizadas em idiomas secundários. Atualizações de conteúdo estático no idioma padrão não são suportadas e resultarão em erros.