README.md
Connects IDEs to the Framer and Framer Motion ecosystem
🌉 Framer Bridge MCP
Um servidor MCP (Model Context Protocol) para conectar IDEs (como Cursor, Antigravity, VS Code) ao ecossistema Framer e Framer Motion.
[English] | [Português]
🚀 Funcionalidades / Features
- Animation Snippets: Coleção de efeitos de alta fidelidade do Framer Motion (Springs, Parallax, Layout).
- Component Scaffolding: Gera componentes React
.tsxprontos para serem colados na aba "Code" do Framer, já comaddPropertyControls. - IDE Intelligence: Projetado para ajudar IAs a "espelharem" efeitos visuais de sites de referência em código real.
🛠 Instalação / Installation
- Clonar / Clone:
git clone https://github.com/SeuUsuario/framer-bridge.git
cd framer-bridge
npm install
- Compilar / Build:
npm run build
- Configurar no IDE / IDE Setup:
Adicione o servidor ao seu arquivo de configuração MCP (ex:
mcp_config.jsonouframer.toml):
"framer-bridge": {
"command": "node",
"args": ["/caminho/para/framer-bridge/index.js"]
}
🤝 Contribuindo / Contributing
Este é um projeto Open Source. Sinta-se à vontade para abrir Issues ou enviar Pull Requests com novos snippets de animação ou melhorias no scaffolding de componentes.
⚠️ Segurança / Security
Este servidor não armazena chaves de API por padrão. Se você adicionar integrações com o CMS do Framer, utilize variáveis de ambiente.
Desenvolvido com ❤️ para a comunidade Framer & Antigravity.
Environment Variables
FRAMER_CMS_API_KEYAPI key for Framer CMS integrationsConfiguration
claude_desktop_config.json
{"framer-bridge": {"command": "node", "args": ["/path/to/framer-bridge/index.js"]}}Try it
→Generate a Framer Motion spring animation snippet for a card hover effect.
→Create a React component scaffold with Framer property controls for a custom button.
→Help me mirror the parallax effect from this reference site using Framer Motion code.
→Generate a layout animation component compatible with Framer's code tab.