Framer Bridge

Connects IDEs to Framer, offering animation snippets, component scaffolding, and IDE intelligence for rapid Framer workflow.

javascript

0

GitHub Stars

javascript

Language

4 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "matheusmelo-cabelo-framer-bridge-mcp": {
      "command": "node",
      "args": [
        "/caminho/para/framer-bridge/index.js"
      ]
    }
  }
}

You can connect IDEs to the Framer ecosystem using the Framer Bridge MCP server. It provides high-fidelity animation snippets, React component scaffolding, and intelligent IDE support to mirror visual effects from Framer and Framer Motion into real code that you can work with in your development environment.

How to use

To use this MCP server, first start the Framer Bridge MCP server from your environment, then connect your MCP client to the local or remote endpoint. You can leverage the server to fetch animation snippets, generate React components with ready-made addPropertyControls, and enable IDE intelligence so that your editor mirrors reference-site visuals in actual code. Configure the MCP client to launch the server command and pass the appropriate arguments as shown in the installation steps.

How to install

Prerequisites you need before installing are Node.js and npm installed on your machine.

Clone the repository and install dependencies.

git clone https://github.com/SeuUsuario/framer-bridge.git
cd framer-bridge
npm install

Build the server.

npm run build

Configure the MCP client to start the server. Use the following configuration snippet in your MCP setup (for example in mcp_config.json or framer.toml):

"framer-bridge": {
  "command": "node",
  "args": ["/caminho/para/framer-bridge/index.js"]
}

With this configuration, your MCP client will launch the server using node and the specified path to the index.js file.

Additional content

Configuration notes: This server ships without mandatory API keys by default. If you integrate with a CMS or other services, place sensitive values in environment variables rather than hard-coding them.

Security and notes

The server avoids storing API keys by default. If you enable additional integrations, manage credentials through environment variables and secure storage practices.

Contributing

Contributions are welcome. Open issues or submit pull requests with new animation snippets or improvements to the scaffolding features.

Available tools

Animation Snippets

Provides high-fidelity Framer Motion effects like springs, parallax, and layout transitions as ready-to-use snippets.

Component Scaffolding

Generates React .tsx components with ready-made addPropertyControls, ready to paste into Framer Code tab.

IDE Intelligence

Helps IDEs mirror reference visuals in real code, enabling intelligent code generation from visual references.