Connecting Claude or ChatGPT to Framer with MCP? Back up first

What Framer MCP is and how to connect it

MCP (Model Context Protocol) is a standard way for AI tools to talk to apps. Framer runs a remote MCP server at https://mcp.framer.com/mcp. Any client that supports remote Streamable HTTP servers and OAuth can connect. There is nothing to install locally.

• Claude: open the Framer listing in the Claude Directory and choose Connect to Claude. In Claude Code, add the server URL as an HTTP server (Framer's setup guide has the exact command).
• ChatGPT and Codex, Cursor, Grok Bot: each has a Framer listing you install from. Framer also has setup guides for VS Code, Windsurf, Warp, Notion, Devin and others.
• Then: sign in to Framer in the browser window that opens and approve access. In Framer, click Invite and copy the Project Link, and give that link to the agent with your request.

The agent works with your account's permissions, on any project that account can open. Localization isn't supported over MCP yet.

Sources: Framer MCP, Getting started with Framer MCP, Academy lesson.

What an agent can change

• Pages and layouts

  Create new pages and update existing layouts across desktop, tablet and phone breakpoints, reusing your project's styles and components.

• CMS content

  Create CMS collections and items, update structured content, and import content from files or tools the AI client can reach.

• SEO and settings

  Inspect metadata, headings, alt text and page structure. Framer says the agent can also work with "supported project settings".

• Your live site, if you ask

  By default changes stay in the project and don't reach visitors. An agent can publish if you explicitly ask it to.

Source: What you can do with Framer MCP.

What Framer's own history covers

• Nothing goes live on its own

  Framer's MCP page says changes stay in your project or branch until you or your agent publishes them. Your live site keeps showing the last published version.

• A branch, if you ask for one

  You can ask the agent to create a branch and make its changes there. A branch inherits pages, components, CMS items, collections and styles from Main and keeps its own changes on top. Merging and publishing are separate steps.

• Version history for canvas content

  Version History (⇧⌘H) keeps view-only snapshots: every five minutes for the last four hours, hourly for the last day, then daily. You copy elements from an old version and paste them into the current canvas.

• Rolling back what visitors see

  With Staging & Versions turned on, you can deploy an earlier published version to your custom domain. Staging needs a custom domain.

Sources: Branching lesson, Version history, Staging and versions.

What it doesn't cover

• Branching is something you ask for

  The MCP docs say you can ask your agent to work on a branch. They don't say MCP edits are branched automatically. Framer's older External Agents page says that about its local CLI setup, but Framer now recommends MCP instead. Check the branch menu after the first run to see where the changes landed.

• Deletions are not spelled out

  Framer lists what an agent can create and edit. It doesn't list what it can't do, or say whether it can delete pages, components or CMS items. The agent uses your account's permissions, so plan as if it can change or remove anything you could.

• Version history is copy and paste

  It brings back canvas elements one paste at a time. Framer doesn't document restoring CMS items from it, or putting a whole page or site back in one step.

• Undoing a merge or a rollback in the editor

  We couldn't find Framer documentation for undoing a merge. A staging rollback changes which published version your domain serves. Framer doesn't say it changes the project you edit, so the agent's changes would still be there.

Source: External Agents. If Framer documents automatic branching for MCP or a way to undo a merge, we'll update this page. For CMS-specific details, see what Branching protects in the CMS.

Safe setup before your first MCP run

1. 1

   Back up first. Save a full copy of the project (pages, components, styles and CMS) right before you connect an agent, and again before each big run. Note how many items each collection has.

2. 2

   Ask the agent to create a branch and work only there. Then check the branch menu in Framer to confirm it did.

3. 3

   Keep the task narrow. Give it the project link, name the pages or collections it may touch, and tell it not to delete anything or publish. Ask it to list what it plans to change before it writes.

4. 4

   Review in Framer before merging. Open the Changes panel, preview each breakpoint, compare collection item counts with your notes, and spot-check rich text, images, slugs and references.

5. 5

   Merge, then publish yourself. If you use staging, check the base domain before you deploy to your custom domain.

6. 6

   Save another copy after the merge, so your next restore point includes the work you approved.

Putting a page or the whole site back with FrameVault

If you saved a FrameVault archive before the run, open it in your dashboard, pick one page or the whole site, and click Restore. It goes back into your Framer project.

• The whole site brings back every page, component, color and text style, code file and the CMS content.
• One page brings back that page, the CMS collections it shows, and anything it uses that was deleted.
• Edited pages are put back in place and deleted ones come back. Undo puts the project back as it was just before the restore.
• Nothing goes live until you publish.

What it can't do: Framer doesn't let an app write Site Settings (custom code, domains, favicon and social image, forms, password), so each archive saves them in a text file for you to re-enter by hand. Uploaded custom fonts are a manual step too. Restoring into Framer needs Pro, Studio or Agency. The Free plan backs up the CMS of one site every week and lets you browse, compare and download every backup.