Framer MCP Setup Guide: Connect Claude, ChatGPT or Cursor, Plus 6 Workflows

What is Framer MCP?

MCP (Model Context Protocol) is an open standard that lets AI agents connect to apps and use them. Framer launched its official MCP server on October 22, 2026. It runs remotely at https://mcp.framer.com/mcp, so there is no local bridge to install and the Framer editor doesn't need to be open.

Once you approve the connection, the agent works with your account's permissions. It can:

• create and update pages and layouts across desktop, tablet and phone breakpoints, reusing your project's styles and components

• create CMS collections and items, and update structured content

• inspect metadata, headings, alt text and page structure for SEO and content issues

• create branches so changes can be reviewed before they are merged or published

• combine Framer with everything else in your AI client: files, Google Docs, Ahrefs, HubSpot, research

What it can't do yet: localization isn't supported at launch. For that, use Framer's older local CLI (@framer/agent), which is still supported while the MCP catches up.

Framer MCP vs External Agents: which one to use

Framer now has two official ways to connect an agent:

Our advice: marketing teams should use Framer MCP. Keep External Agents for developers who need localization.

One warning: many "Framer MCP" guides published before October 2026 describe community plugins. Those ask you to keep a plugin open in Framer or edit Claude Desktop's config file. If a guide tells you to do either, it predates the official server. You don't need those steps any more.

Framer MCP vs Framer's built-in AI

The real advantage is context. In Claude, the article you drafted an hour ago, the brief in your Google Doc and the Framer project are all in one conversation. "Insert the article we just wrote" becomes a one-line request.

How to set up Framer MCP

Every client signs in with OAuth. A workspace admin may need to approve MCP connections first. Ask them before you start, so you aren't left stuck halfway through.

Claude (web or desktop app)

1. Click +, then Plugins, then Browse plugins. Search for Framer and click Connect.

2. Sign in to Framer and click Allow.

Claude Code

claude mcp add --transport http framer https://mcp.framer.com/mcp

claude mcp add --transport http framer https://mcp.framer.com/mcp

claude mcp add --transport http framer https://mcp.framer.com/mcp

Then authorize in the browser window that opens.

ChatGPT or Codex

Install Framer from ChatGPT's plugin directory, or in Codex run:

codex mcp add framer --url https://mcp.framer.com/mcp

codex mcp add framer --url https://mcp.framer.com/mcp

codex mcp add framer --url https://mcp.framer.com/mcp

Wait for "Authentication complete".

Cursor

Add Framer from the Cursor Marketplace, or open Customize → MCPs and add a remote HTTP server named framer with the URL https://mcp.framer.com/mcp.

Then, in any client:

1. Paste the full project link from Framer's address bar. The project name alone isn't enough. The agent can reach every project your Framer account can open, so if you manage client sites or have old test projects, always name the project and check which one it edited.

2. Set tool permissions. Set read tools to "always allow". For client teams we also set editing tools to "always allow", as long as the agent works on a branch (next section). Keep publishing as a human step.

3. Test with a read-only question:

<your Framer project link>

<your Framer project link>

<your Framer project link>

For edits, use your strongest model at medium effort. For read-only questions, a faster model is fine.

The workflow that keeps your live site safe

Framer MCP can publish if you explicitly ask it to. That convenience is also the risk. Every client team we train uses this loop:

1. Ask on a branch. Start every editing prompt with "Work on a new branch."

2. Read the agent's summary. It lists what it changed and what it couldn't do. The second list is your to-do list.

3. Open the branch in Framer and switch between it and main to compare.

4. Run the pre-merge checklist (below).

5. Merge or delete. If the branch looks right, merge to main, publish to staging, check it, then publish to production. If it doesn't, ask for a fix on the same branch, or delete the branch and nothing has changed.

The branch is what makes this safe to hand to a marketing team. Even a bad request ends with a branch you delete.

How to write a prompt that works first time

The prompts that fail are almost always vague. The ones that work have five parts:

Follow-up requests in the same chat go onto the same branch, so batch related changes and review them once.

If your site was built by someone who has since moved on, an agent can only run it well when the project is tidy: clean CMS collections, real components rather than detached copies, and a predictable page structure. This is the kind of Framer build we do →

Six jobs Framer MCP handles well

These are the jobs client teams run every week, each with a prompt you can copy.

1. Add a blog article, with FAQs and schema

Drag in a Markdown or Word file, or point to an article Claude wrote earlier in the same chat.

<project link>

<project link>

<project link>

The agent creates the CMS item with the title, slug, body and FAQs, and often adds structured data too. You still set the author, upload the cover and social images, and pick related posts.

2. Swap featured posts, podcasts or editor's picks

Work on a new branch. On the blog index page, make "<exact article title>"
the featured article in the hero section. In Editor's Picks, show the three
latest podcasts

Work on a new branch. On the blog index page, make "<exact article title>"
the featured article in the hero section. In Editor's Picks, show the three
latest podcasts

Work on a new branch. On the blog index page, make "<exact article title>"
the featured article in the hero section. In Editor's Picks, show the three
latest podcasts

Clicking through CMS toggles to do this is tedious and easy to get wrong. With the agent, it's a single request.

3. Reorder a grid

Work on a new branch. On the customer stories page, in the main grid
section only, move "<story A>" to first position, ahead of "<story B>"

Work on a new branch. On the customer stories page, in the main grid
section only, move "<story A>" to first position, ahead of "<story B>"

Work on a new branch. On the customer stories page, in the main grid
section only, move "<story A>" to first position, ahead of "<story B>"

"Main grid section only" matters here. Without it, one client's agent also tried to reorder the hero, which was a custom code component, and it failed.

4. Build a page from an existing layout

Work on a new branch. Create a new event page called "<name>" using the
same layout as our existing event pages. Speakers: <names>.
Registration form ID: <ID>

Work on a new branch. Create a new event page called "<name>" using the
same layout as our existing event pages. Speakers: <names>.
Registration form ID: <ID>

Work on a new branch. Create a new event page called "<name>" using the
same layout as our existing event pages. Speakers: <names>.
Registration form ID: <ID>

Create any form first and give the agent its ID. Otherwise it may reuse another page's form instead of asking you for one.

5. Replace copy and legal text

Work on a new branch. Replace the content of the Privacy Policy page with
the attached approved text. Keep the existing heading styles and layout

Work on a new branch. Replace the content of the Privacy Policy page with
the attached approved text. Keep the existing heading styles and layout

Work on a new branch. Replace the content of the Privacy Policy page with
the attached approved text. Keep the existing heading styles and layout

AI is good at copy work. For legal pages, give it the final wording rather than asking it to write the text.

6. Run an SEO check before a launch

The agent can read your metadata, headings and alt text directly. If Ahrefs or Search Console is also connected to your AI client, it can compare that with real ranking data.

<project link>

<project link>

<project link>

Fix the list on a branch afterwards. We run this kind of check on our own site before every major content push.

Pre-merge checklist

Run this on the branch before you click merge:

• The change is on the page and section you asked for, and nowhere else

• Two or three similar pages still look right (shared components change everywhere)

• Items you meant to keep as drafts are still drafts

• Images, author and social image are set

• Forms point to the right form, not one copied from another page

• Mobile and tablet breakpoints look right

• Links in the new content go where they should

Where Framer MCP breaks

This is what the launch posts don't cover. We have seen each of these on real client projects.

• Code components. On most sites the interesting parts (heroes, carousels, calculators) are custom React code components. The agent can't change them safely. Those changes go to a developer.

• Design decisions. The agent can lay out a page with your components, but it has no taste. Hierarchy, spacing and new sections still need a designer.

• Shared components. Removing something that lives in a shared component on one page removes it everywhere.

• Gaps get filled with what already exists. If you ask for a new form, it may wire up an old one. If you don't name an author, it may pick one.

• Draft status. When CMS items are edited through Framer's API, a draft can switch back to published without warning. This is easy to miss in bulk edits.

• Localization. It isn't supported in the MCP yet. Use the @framer/agent CLI.

The pattern is consistent. Framer MCP is a strong content operator and a weak designer.

Framer MCP vs Webflow MCP

Webflow shipped its own MCP server too, so teams choosing between the two platforms ask how they compare. In day-to-day use, the difference is in the setup:

Both servers handle content well. Neither one is a designer. We compare the platforms in more depth in Framer vs Webflow.

Troubleshooting

Who should own what

This split is why a one to three person marketing team can keep a large Framer site current without filing a ticket for every change. If your site has to hold up through a launch, a funding round or a press cycle, that's what we set up: a Framer build an agent can run, plus a playbook like this one for your team.