What is Framer MCP?

MCP (Model Context Protocol) is an open standard — created by Anthropic in November 2024 — that lets AI assistants communicate directly with external tools. Think of it as a USB-C standard for AI and software: one protocol that connects everything.

The Framer MCP plugin by Tommy D. Rossi creates a secure WebSocket tunnel between your Framer canvas and Claude. Unlike traditional AI assistance where Claude can only advise you, the MCP connection lets it execute changes directly inside your project — updating text, colour styles, components, and more.

According to Design Systems Collective, Claude is currently the only AI that can directly work with Framer projects via MCP — reading site structure, editing CMS content, and exporting production React code.

What you can ask Claude to do in Framer

Once connected, Claude has access to your full project structure via the Framer Plugin API. Here are the most useful workflows:

✏️

1.Rewrite & optimise copy

"Rewrite the hero heading to be more conversion-focused for a SaaS audience"

🎨

2.Update styles & tokens

"Replace all instances of #000000 with #1A1A1A across every component"

🔍

3.SEO optimisation

"Update meta descriptions on all pages with keyword-rich copy under 160 chars"

⚡

4.Export React code

"Export the Hero component as production-ready React code using unframer"

📋

5.Content audit

"Review all pages for inconsistent CTAs and suggest fixes"

🏗️

6.Build new sections

"Add a FAQ section to the pricing page with 5 common questions"