Framer MCP: conecte sua IA aos seus projetos do Framer

O Framer MCP é um servidor remoto oficial do Framer, baseado no MCP (Model Context Protocol), o protocolo que permite a agentes de IA se conectarem a aplicativos. Na prática, em vez de abrir o editor e usar só o agente embutido, você pede para a IA que já usa trabalhar direto no seu projeto do Framer.

Segundo o Framer, depois que você aprova a conexão, o agente pode trabalhar com o canvas, os componentes, algumas configurações do projeto e o CMS, em qualquer projeto que a sua conta consiga acessar. Ele pode criar ou atualizar páginas nos três breakpoints (desktop, tablet e celular), criar coleções e itens de CMS, revisar SEO (metadados, títulos, textos alternativos) e reconstruir um site existente dentro do Framer. O projeto não precisa estar aberto no editor.

O endereço do servidor é https://mcp.framer.com/mcp. Funciona com qualquer cliente que aceite servidores MCP remotos (Streamable HTTP) e login por OAuth. A página oficial lista, entre outros, Claude, Claude Code, ChatGPT, Codex, Cursor, VS Code, Windsurf, Warp, Grok e Devin. Ferramentas fora da lista também podem funcionar se cumprirem esses requisitos.

Antes de começar, você precisa de um cliente de IA compatível e de uma conta do Framer com acesso ao projeto. Se a sua empresa exige aprovação para plugins ou conexões MCP, peça ao administrador. Sobre planos: a documentação oficial que consultamos não informa qual plano do Framer é exigido, e diz que o uso de IA segue o plano ou os créditos do seu agente. Confira na página oficial de preços do Framer antes de assumir qualquer coisa.

No Claude Code, o passo a passo oficial usa quatro comandos. Primeiro, claude mcp add --transport http --scope user framer https://mcp.framer.com/mcp, que adiciona o Framer a todos os seus projetos do Claude Code. Depois, claude mcp login framer para iniciar a autorização. O Framer abre no navegador: entre na conta e aprove. Quando aparecer "Authentication complete", feche a janela, rode claude mcp list para ver se o Framer aparece como conectado e abra uma nova sessão.

No Codex, o comando manual é codex mcp add framer --url https://mcp.framer.com/mcp, seguido de login e aprovação no navegador. No Cursor, abra Customize, depois MCPs, crie um novo servidor com nome framer, tipo Streamable HTTP e a URL acima, salve, clique em Connect e aprove. No Claude (aplicativo), o caminho mais simples é abrir a listagem do Framer no Claude Directory e escolher Connect to Claude. A página do Framer também tem botões "Add to" para os clientes principais.

Para usar, envie ao agente o link completo do projeto, não só o nome. Sem o link, ele pode abrir o projeto errado, porque tem acesso a todos os que a sua conta enxerga. Um bom primeiro pedido é só de leitura, como listar as coleções de CMS do projeto, para confirmar que a conexão funciona antes de pedir mudanças maiores.

O principal cuidado é o que o agente pode mudar. Segundo o Framer, as alterações ficam no projeto e só vão ao ar se você pedir explicitamente para publicar ou se você mesmo publicar. Peça ao agente para trabalhar em uma branch: assim você revisa e compara com a principal antes de juntar. Mesclar uma branch não publica o site; publicar é outra etapa.

Backup: a página do Framer MCP não fala de backup. O Framer tem Histórico de Versões (menu File, ou Cmd+Shift+H no Mac e Ctrl+Shift+H no Windows), onde você abre uma versão anterior, copia o trecho e cola na versão atual. Para mudanças grandes, a dica é revisar tudo no Framer antes de publicar e, se quiser mais segurança, duplicar o projeto antes. Isso é uma recomendação nossa, não um recurso do MCP.

Limites: a localização (tradução do site) não está disponível no Framer MCP no lançamento; para isso o Framer mantém a configuração antiga com a CLI local @framer/agent. A migração de sites existentes é possível, mas o Framer avisa que migrações feitas por IA podem perder conteúdo, layouts e interações, então revise tudo antes de lançar e não desligue a hospedagem antiga sem testar URLs e redirecionamentos. Só aprove clientes de IA em que você confia, porque eles agem com as suas permissões.