Connect your Framer project to AI assistants using the MCP (Model Context Protocol). With secure connections, Claude, Cursor, and other MCP-compatible tools can directly interact with your Framer designs.

Use Cases

• Request Claude to rewrite landing page copy based on SEO research

• Create custom code components and insert them directly onto the canvas

• Update the project-wide color styles with a single command

• Export Framer components to production-ready React code

• Automate design updates with AI-generated content

How It Works

This plugin establishes a WebSocket-based secure tunnel between your Framer project and MCP-compatible AI assistants. The Framer user ID serves as a unique identifier, and the same connection URL can be used across all projects, requiring setup just once.
Requests from the AI assistant (like Claude) are sent to the Framer plugin via a Cloudflare Worker, and the Framer Plugin API executes the corresponding commands. Responses are sent back through the same secure channel. The MCP URL includes your Framer ID and an optional session secret key, consistently used across all projects.

Features

• Project Structure: Return XML structure of pages, components, and code files

• Node Selection: Read and modify selected elements

• XML Updates: Modify node attributes, text, and structure

• Color Styles: Create, modify, and apply color styles

• Text Styles: Manage typography styles (including properties)

• Font Search: Search and apply fonts from the Framer font library

• Node Operations: Clone, delete, or zoom into specific nodes

• React Export: Convert Framer components to React code using unframer CLI, sharing the same subscription as the React Export plugin

• Code Files: Create, read, and modify TypeScript/React code components

• Component Insertion: Insert components in precise locations

Connecting AI Assistants

Claude Desktop App

1. Open Menu > Settings

2. Edit settings file under the Developer tab

3. Add the MCP server URL provided by the plugin

4. Restart the app to enable the connection

Cursor IDE

1. Open the command palette (Cmd/Ctrl + Shift + P)

2. Select MCP options from “Cursor Settings”

3. Add the server URL in the settings file (~/.cursor/mcp.json)

4. Refresh the MCP server

5. Use MCP tools in agent mode

Claude Code CLI

1. Install Claude Code CLI

2. Execute claude mcp add "framer-mcp" <mcp-url>

3. Access the server from all sessions

Technical Details

This system is composed of three elements:

• Framer Plugin: Runs within Framer, handling API calls and maintaining WebSocket connections

• MCP Server: Executes the MCP protocol via Cloudflare Worker

• WebSocket Tunnel: A bidirectional connection based on the user ID

Only one plugin can connect to a user account at a time, but multiple MCP clients can connect simultaneously. All requests support a 5-second timeout and automatic reconnection, verified before execution.

Security Considerations

• Never share the MCP URL containing the session secret.

• Connections are linked to the Framer user account.

• All operations require explicit approval from the MCP client.

• The plugin only accesses the currently open project.

Use Cases

• Landing Page Optimization: Use Claude to research keywords and update titles and meta descriptions with SEO-optimized content

• Design System Update: Have Claude generate a color palette and apply it across all components

• Component Development: Write React components with Claude Code and insert them directly into the Framer project

• Content Migration: Export existing components to React code to integrate into production apps

• Automated Testing: Identify and fix text styles that don't meet accessibility standards, along with space-saving tips for the Framer canvas

Saving Canvas Space

Although MCP needs to remain open, you can save screen space by minimizing the window using the minimize button in the bottom right corner.

Programmatic Use Cases

MCP can also control Framer programmatically through tools. For example, create an agent that automatically adds blog posts based on SEO keyword research results.