Framer MCP Guide: Connect Codex, Claude, and Cursor Safely

Framer MCP is Framer’s official remote Model Context Protocol server for connecting tools such as Codex, Claude, and Cursor to a Framer project. An agent can create pages, edit layouts and content, manage CMS collections, and review site quality without requiring the Framer editor to remain open. The convenient connection also expands the impact of a mistake: the agent works with the permissions of the Framer account used during OAuth, and it can publish if you explicitly ask it to do so. A safe workflow therefore starts with the correct project link, a read-only inventory, a review branch, and a separate publishing decision.

Quick summary

• Requirement: an AI client that supports remote Streamable HTTP MCP servers and OAuth
• Official server URL: https://mcp.framer.com/mcp
• Access boundary: the projects and permissions available to the Framer account that authorizes the connection
• Safer default: full project URL → read-only check → branch changes → responsive and CMS review → explicit publish step
• Launch limitation: localization is not supported through Framer MCP; Framer directs localization workflows to the existing local @framer/agent setup.

What changed: a hosted connection for the agent you already use

Framer’s built-in Agent works inside the Framer experience. Framer MCP takes a different approach: it lets an external client treat a Framer project as a connected work surface. That means a client can combine the project with files, research, scripts, APIs, or other tools that the client can access. The Framer project does not need to be open while the agent works, and supported clients can connect from desktop, browser, or mobile environments.

The previous External Agents workflow uses a local @framer/agent bridge. The new MCP server is hosted by Framer and uses OAuth, so there is no local bridge to keep running. Framer now recommends MCP for compatible agents, but it has not reached full feature parity with the local setup. Localization is the clearest launch-day exception, so teams should compare the required workflow before removing an existing CLI configuration.

A practical safety boundary separates account authorization, project edits, branch review, and the final publish action.

Before connecting Framer MCP

1. Choose a low-risk project first. Use a test project, duplicate, or non-critical branch. Confirm that the Framer account has the intended editing role and consider whether it can also access unrelated production projects.
2. Pick a compatible client. The client must support remote Streamable HTTP MCP servers and OAuth. ChatGPT/Codex, Claude/Claude Code, and Cursor have official directory or marketplace paths. Other compatible clients can use manual server configuration.
3. Write acceptance criteria before the prompt. “Improve the pricing page” leaves too many decisions open. A better brief says to reuse existing type, color, button, and card components; support desktop, tablet, and phone breakpoints; preserve current URLs; work on a branch; and avoid publishing.
4. Separate discovery from writing. For CMS or multi-page work, ask the agent to list the affected pages, collections, fields, slugs, and proposed actions before it changes anything.

How to connect Framer MCP

Option 1: install from an official directory

For ChatGPT or Codex, open Framer’s listing in ChatGPT Plugins and select Install Plugin. For Claude, use the Framer listing in the Claude Directory and select Connect to Claude. For Cursor, use the Cursor Marketplace and select Add to Cursor. A browser tab opens for Framer sign-in and authorization. Review the permissions, approve the connection, return to the client, and begin a new conversation if the current session does not refresh its available tools.

Option 2: add the remote server manually

Open the MCP settings in a compatible client and create a remote server with these values:

Name: framer
Type: Streamable HTTP
URL: https://mcp.framer.com/mcp

Save the server and choose Connect, or the equivalent action in your client. Sign in to Framer in the browser window, approve the connection, and wait for the authorization-complete message. Back in the client, confirm that Framer appears as connected or enabled with OAuth.

Cursor’s documented path is Customize → MCPs → New MCP Server, followed by the remote server name, transport type, and URL. Source: Framer Help, checked October 23, 2026.

Verify with a read-only request

Do not make the first prompt a redesign. Include the complete project link and ask for an inventory:

Open this Framer project but do not edit it.
List:
1. pages and their URL paths,
2. CMS collections and key fields,
3. the main color, text, button, and card styles currently in use.
Project: [full project link]

The result should match the intended project and its visible structure. If the agent opens the wrong project or cannot find it, provide the full link rather than a project name and verify that the OAuth account has access.

What the connection can do and what to review

Area	Supported work	Human review
Pages and layouts	Create pages, edit content and layouts, work across desktop, tablet, and phone breakpoints, and reuse styles and components	Component reuse, responsive overflow, destination URLs, and consistency with the existing system
CMS	Create collections and items, update structured content, and import material available to the AI client	Required fields, duplicate slugs, date and author mapping, images, and deletion scope
SEO and site quality	Inspect metadata, headings, alt text, page structure, and content issues	Search intent, canonical and redirect implications, accurate alt text, and bulk-change risk
External data and tools	Combine Framer with files, scripts, APIs, research, and services available in the client	Source quality, data freshness, customer information, secrets, and the permissions of every connected service

Three practical workflows

1. Build a pricing page without abandoning the design system

Goal: create a responsive pricing page that looks like the existing site rather than an isolated generated mockup. First ask the agent to inspect the project’s color styles, typography, buttons, cards, navigation, and footer. Require a short reuse plan before writing. Then ask it to create a branch and build the page for desktop, tablet, and mobile without publishing.

Review: compare plan names, prices, feature lists, CTA links, mobile table behavior, header and footer connections, and whether the agent created unnecessary duplicate components. Merge or publish only after these checks pass.

2. Clean up or import CMS content

Goal: map a spreadsheet, document set, or research output into an existing collection. Ask the agent to read the target schema, required fields, current slugs, and a sample of existing items. It should produce a proposed “create, update, skip” list before writing. Define the duplicate rule and date format explicitly.

Review: reconcile item counts, slugs, images, dates, authors, empty fields, and source links. Treat deletion and overwriting as separate approval steps. If the AI client is connected to several data sources, constrain it to the specific files or records needed for this import.

3. Run a pre-publish SEO and accessibility review

Goal: inventory metadata, heading hierarchy, alt text, internal links, and structural issues before changing the page. Request a read-only report first, grouped by page and severity. Approve a limited set of fixes and ask the agent to implement them on a branch.

Review: make sure titles and descriptions match the page, alt text describes the actual image instead of repeating a keyword, and heading changes do not confuse visual styling with document structure. If an SEO service is connected to the client, distinguish the service’s measured data from the agent’s interpretation.

Permissions, publishing, and cost boundaries

• The Framer account defines the project boundary. OAuth is not a substitute for least privilege. Review which projects the connected account can access, and check whether a workspace administrator must approve plugins or MCP connections.
• Publishing is available when requested. Changes normally remain in the project or on a branch, but Framer says an agent can change the live site if you explicitly ask it to publish. Put “do not publish” in working prompts and reserve publishing for a separate final instruction.
• AI usage follows the connected agent’s plan or credits. Framer’s launch documentation does not present a universal MCP usage allowance. Teams using several clients should expect AI costs and usage controls to be distributed across those vendors.
• Combined tools create combined risk. Access to a repository, SEO platform, storage service, or customer file is separate from Framer access. Do not place secrets or sensitive customer data in prompts or CMS fields, and remove unnecessary connections before broad automation.

Current limitation: localization still needs the local setup

Localization is not available in Framer MCP at launch. Framer points localization workflows to the existing @framer/agent local bridge and says both methods will remain supported while MCP moves toward feature parity. If language variants are a core requirement, keep the local workflow in place instead of assuming the remote server can replace it today.

Troubleshooting in the right order

1. Framer is missing from the directory: confirm that the client supports remote Streamable HTTP MCP and OAuth, then add the official server URL manually.
2. The authorization window was closed: restart the connection and wait for the authentication-complete message before returning to the client.
3. The agent cannot find the project: provide the full project link, not only its name, and confirm access for the Framer account used during OAuth.
4. The server is connected but tools are unavailable: start a new conversation or restart the client. Also check workspace policies that may disable MCP connections.
5. Localization commands fail: this is a documented launch limitation. Use the local @framer/agent setup for that workflow.
6. The result ignores the site’s design: narrow the task and name the styles, components, breakpoints, links, and protected areas. Ask for a plan or read-only inventory before another edit.

Bottom line

Framer MCP is most useful when Framer becomes one controlled step in a larger workflow instead of an opaque “build a website” button. The hosted connection makes setup simpler and lets an external agent combine project work with other tools, but the account’s permissions and the clarity of the project link matter more than ever. Begin with a read-only inventory, keep production changes on a branch, verify responsive layouts and CMS mappings, and make publishing an explicit human-reviewed step.

한국어 버전: Framer MCP 한국어 가이드 보기.

Official sources

• Framer MCP
• Getting started with Framer MCP
• What you can do with Framer MCP
• Use external agents with Framer

Sources checked October 23, 2026.