Framer MCP Plugin – AI Website Design and Editing
The Framer MCP marketplace plugin by Tommy D. Rossi connects MCP-compatible AI assistants to the currently open Framer project through a secure remote tunnel. Use it for design edits, content updates, style-system changes, code-component creation, CMS operations, and supported React export workflows.
Overview
The Framer MCP plugin is a community-built integration distributed through the official Framer Marketplace. It connects Claude, Cursor, Codex, and other MCP-compatible clients to the Framer project currently open in the plugin. The integration uses Framer's Plugin API and a secure tunnel so an agent can inspect and modify live project content instead of relying only on screenshots or manually copied properties.
What the MCP server enables
The plugin documents tools for:
- Retrieving an XML representation of pages, components, code files, and project structure.
- Reading and manipulating the currently selected canvas elements.
- Updating node attributes, text, layout, borders, overflow, stacking, and structure through XML operations.
- Creating, updating, and applying project color styles.
- Managing text styles and typography properties.
- Searching Framer's font library and applying fonts.
- Duplicating, deleting, selecting, and zooming to nodes.
- Creating, reading, and updating TypeScript or React code components.
- Inserting components into the canvas with positioning.
- Creating CMS collections and design or web pages.
- Exporting supported Framer components as React code through the related Unframer workflow.
When to use it
Use this MCP integration when an AI workflow needs direct access to an active Framer design. Typical uses include rewriting landing-page copy, updating color or typography systems, creating code components, inserting generated components, changing multiple design nodes, creating pages or CMS collections, and preparing supported components for production React projects.
Connection and authentication
Install and open the MCP plugin from the Framer Marketplace. The plugin generates a user-specific MCP URL tied to the Framer account, with an optional session secret for additional protection. Copy that complete URL from the plugin and provide it to the MCP client as a remote HTTP server.
Because the URL is generated per user and can contain a secret, this YAML references it through FRAMER_MCP_URL rather than embedding a fabricated or sensitive value. The plugin must remain open in Framer while the MCP connection is used.
Key considerations
This is a third-party Marketplace plugin, not an official Framer-built plugin. Requests pass through a Cloudflare Worker to the open plugin and execute through Framer's Plugin API. Only one plugin instance can connect for a user at a time, although multiple MCP clients can share that connection. Operations require client approval, are limited to the currently open project, and have documented request timeouts. Never share the generated MCP URL or session secret, and review destructive edits, code changes, CMS operations, and exported components before production use.
Supported Transports
streamable_http
URL: ${FRAMER_MCP_URL}
Frequently Asked Questions
- When should an AI agent use the Framer MCP plugin?
- Use it when a workflow needs live access to an open Framer project for canvas edits, copy changes, style-system updates, code-component work, page or CMS creation, or supported React export.
- What does the Framer MCP plugin add to an AI agent's capabilities?
- It gives the agent structured access to the current Framer project through Framer's Plugin API, allowing it to inspect project structure and perform approved design, content, style, code, and CMS operations.
- What can an AI agent access or manage through this server?
- The agent can work with project structure, selected nodes, XML properties, color styles, text styles, fonts, node operations, TypeScript or React code files, component insertion, CMS collections, pages, and supported React export workflows.
- How is authentication configured for the Framer MCP plugin?
- The plugin generates a user-specific MCP URL tied to the Framer account and can include an optional session secret. Store the complete generated URL in FRAMER_MCP_URL, keep it private, and leave the plugin open in the active Framer project.
- Which transport should be used for the Framer MCP plugin?
- Use the remote HTTP connection represented by the complete MCP URL copied from the plugin. The Marketplace documentation does not provide a fixed public endpoint or a local stdio package, so the per-user generated URL must be used.