Como conectar o Claude ao Webflow MCP?

Resposta rápida: o Claude se conecta ao Webflow por meio do servidor MCP (Model Context Protocol) oficial, dando a você uma linha direta com o CMS, as páginas e a Designer API do seu site, de dentro do Claude Desktop ou do Claude Code. Você pode enviar atualizações de conteúdo, criar itens de CMS e gerenciar coleções descrevendo o que quer em linguagem natural, sem nenhum trabalho manual na interface.

Se você gerencia um site no Webflow e ainda copia conteúdo para o CMS manualmente, este guia vai mudar a sua forma de trabalhar. O servidor MCP do Webflow permite que o Claude leia e escreva diretamente no seu workspace do Webflow, para que você atualize posts de blog, envie novos itens de coleção e edite o conteúdo das páginas por meio de uma conversa, em vez de usar o Designer.

Este é um passo a passo prático para times de B2B SaaS que querem fluxos de publicação mais rápidos e menos trocas de contexto. Ao final, você terá a integração funcionando e entenderá exatamente o que o Claude pode e não pode fazer dentro do Webflow. Se você também está avaliando um apoio mais amplo de crescimento em sistemas de conteúdo e operações de publicação, o SaaS Hackers também reúne as melhores agências de content marketing para B2B SaaS.

O que é o servidor MCP do Webflow?

O servidor MCP do Webflow é uma integração nativa criada pelo próprio Webflow que implementa o padrão Model Context Protocol. O MCP é um protocolo aberto que permite que ferramentas de AI, como o Claude, se conectem a serviços externos com acesso estruturado e controlado por permissões.

Em outras palavras: em vez de o Claude tentar adivinhar como o seu site Webflow está estruturado, o servidor MCP dá a ele acesso em tempo real aos dados reais do seu workspace. O Claude pode consultar suas coleções de CMS, ler itens existentes, criar novas entradas e disparar atualizações pelas mesmas APIs que um desenvolvedor usaria.

O servidor MCP do Webflow é hospedado e mantido diretamente pelo Webflow, o que significa que ele usa a Data API e a Designer API oficiais, e não uma solução alternativa de terceiros.

O que o Claude realmente pode fazer dentro do Webflow?

Antes de configurar qualquer coisa, tenha clareza sobre o escopo. O Claude com o Webflow MCP pode:

Ler coleções do CMS e listar os itens existentes com os dados dos campos
Criar novos itens de coleção do CMS com texto, rich text, imagens e campos de referência
Atualizar itens de coleção existentes, incluindo conteúdo em rascunho e publicado
Publicar itens no seu site ao vivo
Consultar a estrutura do site, incluindo páginas, coleções e esquemas de campos
Aplicar atualizações estruturais e de sistema pela Designer API

O Claude não consegue projetar páginas visualmente como uma pessoa faria no canvas do Webflow Designer. Pense nele como um operador de CMS e publicador de conteúdo poderoso, não como uma ferramenta de design visual. Times que também precisam de apoio na camada visual podem comparar agências de web design para B2B SaaS ou especialistas em web design e UX para B2B SaaS.

O que você precisa antes de começar

Uma conta do Webflow com pelo menos um site (qualquer plano com acesso ao CMS)
Claude Desktop instalado, ou acesso ao Claude Code
Um token de API do Webflow com os escopos corretos
Node.js instalado localmente (versão 18 ou superior)

Como conectar o Claude ao Webflow MCP: passo a passo

Passo 1: gere seu token de API do Webflow

Faça login no painel do Webflow
Vá em Account Settings e depois em Integrações
Role até API Access e gere um novo token
Selecione os escopos de que você precisa: leitura/escrita do CMS, leitura de Sites e leitura/escrita de Pages são os principais para fluxos de conteúdo
Copie o token e guarde-o em um lugar seguro

Passo 2: configure o servidor MCP no Claude Desktop

O Claude Desktop usa um arquivo de configuração para saber a quais servidores MCP se conectar. Abra o arquivo de configuração em:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Adicione o bloco a seguir dentro do mcpServers :

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

Substitua your-api-token-here com o token que você gerou no Passo 1.

Passo 3: reinicie o Claude Desktop

Salve o arquivo de configuração, feche o Claude Desktop por completo e abra-o novamente. O Claude carregará o servidor MCP na inicialização. Você verá um pequeno ícone de martelo na interface do chat quando as ferramentas MCP estiverem disponíveis.

Passo 4: verifique a conexão

Digite isto no Claude:

"List the Webflow sites connected to my account."

Se a conexão estiver funcionando, o Claude retornará os nomes e os IDs dos seus sites. Se houver erro, confira novamente os escopos do token e se o Node.js está instalado corretamente.

Usando o Claude Code em vez do Claude Desktop

Se você trabalha em um ambiente de terminal ou prefere o Claude Code ao Claude Desktop, a configuração é um pouco diferente.

Execute este comando para iniciar o servidor MCP manualmente:

WEBFLOW_TOKEN=your-api-token npx -y @webflow/mcp-server

Depois, configure seu ambiente do Claude Code para apontar para esse servidor em execução. O repositório do Webflow no GitHub para o servidor MCP (webflow/mcp-server) traz a referência completa de variáveis de ambiente e opções avançadas de configuração.

Fluxos de trabalho práticos: o que fazer de fato com isso

Enviando um novo post de blog para o CMS

Depois de conectado, você pode criar um novo item de CMS com um único prompt. Por exemplo:

"Create a new item in my Blog Posts collection. Title: 'How SaaS Teams Use AI for Faster Onboarding'. Slug: how-saas-teams-use-ai-faster-onboarding. Set the status to Draft."

O Claude chamará a API do CMS, criará o item com o mapeamento correto dos campos e retornará o ID do item. Em seguida, você pode pedir que ele preencha o campo de corpo com um conteúdo que você já escreveu ou deixar o Claude redigir direto ali. Se a publicação assistida por AI está ganhando espaço no seu fluxo de trabalho, o SaaS Hackers também explora temas relacionados, como o impacto da AGI no marketing, nos negócios e no desenvolvimento de software.

Atualizando um item existente do CMS

"Find the blog post titled 'Product Update: Q1 2025' and update the excerpt field to: 'A summary of everything we shipped in Q1, including the new onboarding flow and API rate limit increases.'"

O Claude consultará a coleção, encontrará o item correspondente e atualizará o campo. Você não precisa saber o ID do item com antecedência.

Publicando um item em rascunho

"Publish the blog post with slug 'how-saas-teams-use-ai-faster-onboarding' to the live site."

Isso dispara a ação de publicação pela API. O item passa de rascunho para publicado sem que você precise abrir o Designer.

Auditando o CMS em busca de campos ausentes

"Check all items in my Case Studies collection and list any that are missing the 'Client Logo' or 'Industry' fields."

Este é um fluxo de trabalho realmente útil para o controle de qualidade de conteúdo. O Claude lê cada item da coleção e retorna uma lista de lacunas, algo que exigiria um esforço manual considerável pela interface do Webflow.

Permissões e pontos de atenção

Algumas coisas que vale a pena saber antes de usar isso em produção:

O escopo do token importa. Um token com acesso de escrita pode criar e sobrescrever conteúdo. Se você estiver experimentando, gere primeiro um token somente leitura para explorar a estrutura do site sem riscos.

A publicação é imediata. Quando o Claude publica um item, ele vai ao ar. Não há uma etapa de confirmação em staging na API. Crie o hábito de revisar o conteúdo em rascunho antes de enviar comandos de publicação.

Os tipos de campo do CMS têm restrições. Campos de referência, de opção e de imagem têm formatos específicos que a API espera. Se o Claude retornar um erro ao criar ou atualizar, peça que ele descreva primeiro o esquema da coleção para mapear os campos corretamente.

Existem limites de requisições. A Data API do Webflow tem limites de requisições por plano. Em operações em massa (atualizar mais de 50 itens), o Claude precisará lidar com paginação, e você pode atingir os limites em planos de nível mais baixo.

Por que times de B2B SaaS devem se importar com isso

A velocidade de produção de conteúdo é uma limitação real para a maioria dos times de marketing de SaaS. Um ciclo típico de publicação de blog envolve escrever, editar, formatar no CMS, adicionar metadados e publicar. Cada etapa é manual e lenta.

Com a configuração do Claude com o Webflow MCP, o redator pode entregar um rascunho finalizado e deixar que o Claude cuide da entrada no CMS, do preenchimento dos campos, da criação do slug e do disparo da publicação. São de 20 a 30 minutos de trabalho mecânico eliminados de cada post.

Para times que gerenciam conteúdo localizado, páginas de atualização de produto ou bibliotecas de recursos de alto volume, a economia de tempo se acumula rapidamente. O Claude consegue processar em uma única sessão um lote de atualizações que, de outra forma, tomaria uma tarde inteira. Para empresas que estão escalando esses fluxos de trabalho entre canais de aquisição, também pode ser útil conhecer parceiros especializados em agências de SEO para B2B SaaS, agências de PPC para B2B SaaS e agências de performance marketing para B2B SaaS.

O SaaS Hackers aborda esse tipo de automação de fluxo de trabalho em uma série mais ampla sobre o uso do Claude nas operações de B2B SaaS. O objetivo é sempre o mesmo: eliminar o trabalho mecânico para que seu time possa se concentrar nas decisões que realmente exigem julgamento humano. Se quiser conhecer mais parceiros e profissionais verificados, você também pode explorar todas as melhores agências, os melhores especialistas ou os recursos.

Perguntas frequentes

O que é o servidor MCP do Webflow e como ele funciona com o Claude?

O servidor MCP do Webflow é uma integração oficial que implementa o Model Context Protocol, permitindo que o Claude se conecte diretamente ao seu workspace do Webflow. Ele dá ao Claude acesso estruturado às coleções do CMS, às páginas e aos dados do site pela API do Webflow. Você o configura uma única vez no Claude Desktop ou no Claude Code, e o Claude passa a ler e escrever conteúdo no Webflow por meio de prompts em linguagem natural.

O Claude consegue projetar páginas visualmente no Webflow usando o MCP?

Não. O Claude com o Webflow MCP opera pela camada de API, não pelo canvas visual do Designer. Ele pode criar e atualizar conteúdo do CMS, gerenciar itens de coleção e aplicar mudanças em nível de sistema, mas não arrasta, solta nem organiza elementos visualmente como um designer faria. Use-o para operações de conteúdo, não para design visual.

O servidor MCP do Webflow é seguro para usar em um site em produção?

Sim, com os cuidados certos. Use um token de API com escopo limitado, apenas com as permissões que o seu fluxo de trabalho precisa. Evite conceder acesso de escrita e publicação durante os testes iniciais. A publicação pela API é imediata, então trate os comandos de publicação como você trataria uma publicação manual feita pelo Designer.

Preciso saber programar para usar o Claude com o Webflow MCP?

Não é preciso saber programar para a configuração básica nem para executar fluxos de trabalho de conteúdo. Você precisa editar um arquivo de configuração JSON e ter o Node.js instalado, mas as duas etapas são simples. O servidor MCP do Webflow é executado via npx, então não há nada para criar nem para manter.

Qual plano do Webflow eu preciso para ter acesso ao MCP?

O servidor MCP do Webflow usa a Data API, que está disponível nos planos que incluem acesso ao CMS. Confira os detalhes de acesso à API do seu plano atual nas configurações da sua conta do Webflow. Os recursos da Designer API podem ter requisitos de plano adicionais, dependendo das ações de que você precisa.