Which integrations are available for this server?

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.

How do I use Framer Bridge MCP?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Framer Bridge MCP Generate 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 .tsx prontos para serem colados na aba "Code" do Framer, já com addPropertyControls.
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.json ou framer.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.