#What is MCP Plugin?

MCP Plugin is a powerful Framer plugin that connects your Framer projects with AI assistants using the Model Context Protocol (MCP). It allows tools like Claude, Cursor, and Codex to directly interact with your design canvas. Instead of manually editing layouts, content, or styles, you can simply instruct an AI assistant to make changes—like updating copy, generating components, or applying design systems—and it executes them inside Framer in real time.

#Features ⚡

• AI Integration: Connect Framer with Claude, Cursor, Codex, and other MCP-compatible tools

• Real-Time Editing: Modify layouts, text, styles, and components using AI commands

• React Export: Convert Framer components into production-ready React code

• Design Automation: Update colors, typography, and layouts across the entire project

• Code Component Creation: Generate and insert React/TypeScript components

• Project Structure Access: View and manipulate pages and elements using XML

• Node Control: Select, duplicate, delete, or update elements via AI

• Secure Connection: Uses WebSocket tunnel with Cloudflare for safe communication

#Included Components/Capabilities

• MCP server connection setup

• WebSocket-based communication system

• AI command execution layer

• XML-based project structure access

• Code file management system

• Component insertion and editing tools

#Pricing 💸

• Free plugin

• No cost for basic usage

• Some advanced features (like React export) may depend on external tools/subscriptions

#Integrations 🧰

• Framer visual editor

• Claude (Desktop & CLI)

• Cursor IDE

• Codex and MCP-compatible AI tools

• Cloudflare Workers (for secure connection)

• React / TypeScript workflows