Como conectar o Claude ao Webflow via MCP?

Resposta rápida: o Claude se conecta ao Webflow por meio do servidor MCP oficial do Webflow, o que dá a você acesso direto ao CMS, às APIs do Designer e à camada de dados do seu site a partir do Claude Desktop ou do Claude Code. Você pode enviar atualizações de conteúdo, gerenciar coleções do CMS e fazer edições estruturais nas páginas sem abrir a interface do Webflow.

Você já sabe que o Claude escreve. O que a maioria das equipes de B2B SaaS ainda não percebeu é que o Claude também consegue publicar. Com o servidor MCP do Webflow conectado, você deixa de copiar e colar conteúdo entre ferramentas e passa a enviar atualizações direto do seu fluxo de trabalho com AI para o seu site Webflow no ar.

Este tutorial mostra passo a passo como fazer essa configuração, o que você pode fazer com ela e onde estão os ganhos reais de fluxo de trabalho para equipes de SaaS que gerenciam conteúdo em escala.

O que é o servidor MCP do Webflow?

O servidor MCP do Webflow é uma integração oficial, criada sobre o Model Context Protocol (MCP) da Anthropic, um padrão aberto que permite que modelos de AI se conectem a ferramentas e fontes de dados externas. A implementação do Webflow dá ao Claude acesso direto às coleções do CMS, às APIs do Designer e à camada de conteúdo do seu site.

Em termos simples: o Claude deixa de ser um assistente de escrita do qual você copia o texto e se torna um agente capaz de ler a estrutura do seu site Webflow, criar e atualizar itens do CMS e enviar alterações sem que você saia da conversa.

A integração é mantida pelo Webflow e funciona com Claude Desktop, Claude Code, Cursor e Windsurf.

O que você pode fazer com o Claude e o MCP do Webflow

Antes de configurar qualquer coisa, vale entender o que essa integração realmente oferece. O servidor MCP do Webflow expõe um conjunto definido de ações que o Claude pode executar no seu workspace:

Operações do CMS:

Criar novos itens em coleções do CMS
Atualizar campos de itens existentes (texto, rich text, imagens, referências)
Publicar e despublicar itens
Consultar os esquemas das coleções para entender a estrutura dos campos

Gerenciamento de site e páginas:

Ler a estrutura e os metadados das páginas
Aplicar atualizações estruturais nas páginas
Gerenciar configurações e estilos do site em nível de sistema

O que ele não faz (ainda):

Design visual de arrastar e soltar (isso continua no Webflow Designer)
Substituir a fila de publicação do Webflow em configurações complexas com vários ambientes
Lidar com componentes de código personalizado sem intervenção manual

Para equipes de B2B SaaS, os casos de uso de maior valor são envio de conteúdo para o CMS, atualização de copy de landing pages e edições de campos em massa em itens de uma coleção. Se a sua equipe faz esse tipo de trabalho repetitivo de publicação em escala, isso costuma se somar às responsabilidades mais amplas de marketing operations para B2B SaaS.

Como conectar o Claude ao Webflow via MCP

Passo 1: gere um token de API do Webflow

Entre na sua conta do Webflow e abra o site que você quer conectar
Acesse Site Settings > Integrations > API Access
Gere um novo token de API com permissões de leitura e escrita no CMS
Copie o token e guarde em um lugar seguro. Você não conseguirá vê-lo de novo depois de fechar essa tela.

Se você trabalha com vários sites no Webflow, gere um token separado para cada site. Misturar tokens entre workspaces gera erros de permissão que dão trabalho para depurar.

Passo 2: instale o servidor MCP do Webflow

O servidor MCP do Webflow roda como um processo Node.js na sua máquina. Você precisa ter o Node.js instalado antes desta etapa.

Abra o terminal e execute:

npx @webflow/mcp-server

Como alternativa, instale de forma global:

npm install -g @webflow/mcp-server

O servidor é open source e mantido no repositório oficial do Webflow no GitHub, em webflow/mcp-server.

Passo 3: configure o Claude Desktop para usar o servidor MCP

Abra o arquivo de configuração do Claude Desktop. No macOS, ele fica em:

~/Library/Application Support/Claude/claude_desktop_config.json

Adicione o servidor MCP do Webflow à sua configuração:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["@webflow/mcp-server"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

Substitua your-token-here pelo token de API que você gerou no Passo 1.

Salve o arquivo e reinicie o Claude Desktop. Você verá um ícone de martelo na interface do Claude confirmando que as ferramentas MCP estão ativas.

Passo 4: verifique a conexão

Inicie uma nova conversa no Claude e pergunte:

"Liste as coleções do CMS disponíveis no meu site Webflow."

O Claude vai chamar o servidor MCP do Webflow e retornar os nomes e as estruturas das suas coleções. Se aparecer um erro, confira se o seu token de API tem as permissões corretas e se o JSON do arquivo de configuração é válido (uma vírgula faltando quebra o arquivo inteiro).

Como enviar atualizações de conteúdo para o CMS com o Claude

Depois de conectado, as operações de conteúdo seguem um padrão simples: descreva o que você quer, deixe o Claude consultar o esquema e depois confirme a ação de escrita.

Atualizando um item existente do CMS

Comece pedindo ao Claude que leia o estado atual de um item:

"Encontre o post de blog chamado 'How to reduce churn in SaaS' na minha coleção Blog Posts e mostre a meta description e o conteúdo do corpo atuais."

O Claude vai buscar o item e exibir os campos. Depois, dê a instrução de atualização:

"Atualize a meta description para: 'Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff.' Depois publique a alteração."

O Claude vai gravar a atualização no Webflow e confirmar o status do item.

Criando um novo item no CMS

É aqui que o fluxo de trabalho fica realmente rápido. Escreva o briefing do conteúdo no Claude, gere o conteúdo na mesma conversa e envie direto:

"Crie um novo item na coleção Blog Posts. Título: 'SaaS Pricing Page Teardown: What High-Converting Pages Have in Common'. Slug: saas-pricing-page-teardown. Defina o status como Draft. Use o conteúdo a seguir no campo do corpo: [cole seu conteúdo]."

O Claude associa o que você informou aos campos corretos da coleção e cria o item. Depois, você pode abrir o Webflow para revisar e publicar, ou pedir ao Claude que publique direto, se o seu fluxo de trabalho permitir.

Atualizações de campos em massa em uma coleção

Este é o caso de uso que a maioria das equipes não sabe que é possível. Se você precisa atualizar um campo em vários itens do CMS, como melhorar title tags durante uma limpeza de SEO ou corrigir erros repetidos de taxonomia, dá para fazer tudo em uma única conversa:

"Na minha coleção Case Studies, encontre todos os itens em que o campo 'Industry' está vazio e defina como 'B2B SaaS'."

O Claude vai consultar a coleção, identificar os itens correspondentes e aplicar a atualização. O que levaria 20 minutos de cliques manuais no Webflow leva menos de dois minutos assim.

Fluxo de trabalho prático: publicando a atualização de uma landing page

Este é um fluxo de trabalho real que uma equipe de marketing de B2B SaaS executaria no Claude com o MCP do Webflow conectado.

Cenário: você atualizou a copy do hero da sua homepage e quer enviar a alteração para o Webflow sem abrir o Designer.

Consulte o estado atual: "Mostre o headline e o subheadline atuais do hero no item da Homepage no CMS."
Revise e aprove: o Claude retorna a copy atual. Você confirma que ela precisa ser atualizada.
Escreva a atualização: "Atualize o headline do hero para: 'Stop guessing. Start converting.' Atualize o subheadline para: 'SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue.' Publique as alterações."
Confirme: o Claude confirma que os campos foram atualizados e que o item está publicado.

Tempo total: menos de três minutos. Sem sessão no Designer, sem copiar e colar, sem alternar entre abas.

Para que as equipes de B2B SaaS devem usar isso

Nem toda atualização de conteúdo precisa passar pelo Claude e pelo MCP. Veja onde essa configuração compensa mais para equipes de SaaS:

Casos de uso de alto valor:

Atualizar metadados de SEO em várias landing pages antes do lançamento de uma campanha
Publicar conteúdo de blog que foi redigido e editado no Claude
Fazer auditorias de SEO e aplicar correções (meta descriptions, title tags) na mesma sessão
Criar versões localizadas do conteúdo do CMS para diferentes mercados
Atualizar em massa as descrições de funcionalidades do produto após um lançamento

Casos de uso de menor valor (prefira usar o Webflow diretamente):

Alterações pontuais de design visual
Reestruturações de layout que exigem o Designer
Alterações que precisam de aprovação das partes interessadas antes da publicação

Equipes que fazem atualizações frequentes de metadados, lançamentos de conteúdo ou de campanhas também podem acabar combinando esse fluxo de trabalho com o apoio de agências de content marketing para B2B SaaS ou de parceiros especializados em SEO.

Erros comuns e como corrigi-los

"No tools available" no Claude Desktop
O arquivo de configuração tem um erro de sintaxe ou o servidor MCP não iniciou. Valide seu JSON em jsonlint.com e confira se o Node.js está instalado corretamente.

"Unauthorised" quando o Claude tenta gravar no Webflow
Seu token de API não tem permissão de escrita ou foi gerado para o site errado. Gere o token de novo com todas as permissões do CMS e atualize o arquivo de configuração.

O Claude lê as coleções, mas não encontra itens específicos
Os nomes dos itens da coleção diferenciam maiúsculas de minúsculas na API do Webflow. Peça ao Claude que liste primeiro todos os itens da coleção e depois use o nome exato que ele retornar.

As alterações aparecem no Webflow, mas não estão no ar no site
O item foi atualizado, mas não publicado. Acrescente "e publique o item" à sua instrução ou verifique a fila de publicação do Webflow manualmente.

Perguntas frequentes

O que é o Claude Webflow MCP e como ele funciona?
A integração Claude Webflow MCP conecta o Claude ao seu site no Webflow usando o Model Context Protocol, da Anthropic. O Claude usa o servidor MCP do Webflow para ler e gravar nas suas coleções do CMS, nos metadados das páginas e nas configurações do site diretamente a partir de uma conversa. Você se autentica com um token de API do Webflow, e o Claude chama as APIs do Webflow em seu nome.

Preciso saber programar para usar o servidor MCP do Webflow?
Você precisa se sentir à vontade para editar um arquivo de configuração JSON e executar um único comando no terminal. Fora isso, a interação é totalmente conversacional. Você não escreve código para publicar atualizações de conteúdo. Se você consegue descrever o que quer em português simples, o Claude cuida das chamadas de API.

O servidor MCP do Webflow é seguro para usar em um site de produção no ar?
Sim, com uma precaução: peça sempre ao Claude para mostrar o estado atual de um item antes de gravar alterações e confirme a atualização antes de pedir que ele publique. O servidor MCP grava diretamente no seu workspace ativo do Webflow, então não há buffer de staging, a menos que você configure um no próprio Webflow. Trate como acesso direto ao banco de dados: com cuidado e revisão antes de confirmar.

Qual é a diferença entre usar o Claude com o Webflow MCP e os recursos de AI do Webflow integrados ao Designer?
Os recursos nativos de AI do Webflow funcionam dentro da interface do Designer e têm foco em apoio visual e de layout. A integração Claude Webflow MCP funciona fora do Designer e tem foco em operações de CMS, publicação de conteúdo e gestão de dados em massa. Elas atendem partes diferentes do fluxo de trabalho. O MCP é melhor para equipes de conteúdo que gerenciam grandes volumes de dados estruturados.

Posso usar o servidor MCP do Webflow com o Claude Code ou o Cursor, e não só com o Claude Desktop?
Sim. O servidor MCP do Webflow funciona com Claude Desktop, Claude Code, Cursor e Windsurf. O método de configuração varia um pouco de uma ferramenta para outra, mas o token de API e a configuração do servidor são os mesmos. Consulte a documentação de MCP de cada ferramenta para ver o formato de configuração específico.