Framer Bridge MCP
Connects IDEs to the Framer and Framer Motion ecosystem, enabling the generation of high-fidelity animation snippets and React component scaffolding with property controls for use within Framer.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Framer Bridge MCPGenerate a React card component with property controls for Framer"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🌉 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.
Related MCP server: Figma Dash MCP Server
🛠 Instalação / Installation
Clonar / Clone:
git clone https://github.com/SeuUsuario/framer-bridge.git
cd framer-bridge
npm installCompilar / Build:
npm run buildConfigurar 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.
This server cannot be deployed
Maintenance
Related MCP Connectors
Connect AI coding agents to Anima Playground, Figma, and your design system.
Serves your design system and coding standards to coding agents, so they stop guessing.
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Related MCP Servers
- AlicenseBqualityDmaintenanceEnables creation and management of Framer plugins with web3 capabilities like wallet connections, contract interactions, and NFT displays.238MIT
- FlicenseAqualityDmaintenanceConnects IDE to Figma Desktop App, enabling AI assistants to generate and manipulate layouts, shapes, and designs directly inside the Figma canvas.81-
- FlicenseNot gradedqualityDmaintenanceEnables programmatic interaction with Framer canvas via a local MCP server and companion plugin, allowing automation of page generation, content updates, and component manipulation.1-
- AlicenseNot gradedqualityDmaintenanceConnects MCP clients to Framer projects for reading sites, editing CMS content, designing pages with a DSL, managing code components, and previewing changes locally.MIT