MCP Framer plugin
Bridge your Framer designs with AI assistants like Claude and Cursor using the Model Context Protocol (MCP). This plugin enables these tools to directly interact with your Framer designs through a secure tunnel connection.
Key Features:
- AI-Powered Editing: Edit text, update styles, create components, and export React code using natural language commands.
- Cross-Project Compatibility: One connection works across all your Framer projects.
- Secure Connection: Uses a secure WebSocket tunnel with your Framer user ID for identification.
- Versatile Tools: Access project structure, node selection, XML updates, color/text styles, font search, node operations, React export (integrates with React Export plugin), code files, and component insertion.
How it Works:
The plugin creates a secure connection between your Framer project and MCP-compatible AI assistants. Requests from Claude or other MCP clients are routed through a Cloudflare Worker to your open Framer plugin, executed using Framer's Plugin API, and the response is returned securely.
The MCP URL, which includes your user ID and an optional session secret, remains consistent across all your projects.
Connecting to AI Assistants:
Configuration steps are provided for Claude Desktop App, Cursor IDE, and Claude Code. Refer to the plugin details for specific instructions.
Saving space in the Framer canvas
This plugin needs to always remain open to use MCP. To save space and not consume too much space you can click the collapse button in the bottom right of the plugin. This minimizes the plugin window.
Using Framer MCP programatically
This MCP can be used also with tools to control Framer programatically for agentic tasks. For example you will be able create an agent that uses Framer to add new blog posts based on SEO keyword research