> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: Framer MCP Overview
sidebarTitle: Overview
description: Let AI assistants read and modify your Framer project through the Model Context Protocol.
icon: lucide:bot
---

# Framer MCP

The **Framer MCP plugin** lets AI assistants (Claude, Cursor, Copilot, Codex, etc.) interact with your Framer project directly. They can read your design, modify text, create components, manage CMS content, and export React code, all through natural language.

## What is MCP?

MCP (**Model Context Protocol**) is an open standard that lets AI tools connect to external services. The Framer MCP plugin exposes your Framer project as a set of tools that AI assistants can call.

```diagram
┌───────────────────────────────────┐
│  AI Assistant                     │
│  (Claude, Cursor, Copilot...)     │
└────────────────┬──────────────────┘
                 │ StreamableHTTP
                 ▼
┌───────────────────────────────────┐
│  mcp.unframer.co/mcp              │
│  Cloudflare Worker                │
│  • Durable Object tunnel          │
└────────────────┬──────────────────┘
                 │ WebSocket tunnel
                 ▼
┌───────────────────────────────────┐
│  Framer MCP Plugin                │
│  (iframe inside Framer editor)    │
└────────────────┬──────────────────┘
                 │ Framer SDK
                 ▼
┌───────────────────────────────────┐
│  Your Framer Project              │
└───────────────────────────────────┘
```

## What can the AI do?

With Framer MCP connected, your AI assistant can:

* **Read project structure** — get all pages, components, styles as XML
* **Modify text and attributes** — rewrite copy, change colors, update layout
* **Create new nodes** — add frames, text, images, and component instances
* **Manage CMS content** — create collections, add/edit/delete items
* **Work with code files** — create and update code components
* **Export React components** — trigger the React Export pipeline
* **Search fonts** — find and apply fonts from Framer's library
* **Manage styles** — create and update color styles and text styles

## Two modes of operation

### Plugin mode (default)

Requires the **Framer MCP plugin to be open** in the Framer editor. The AI communicates through a WebSocket relay to the plugin running in your browser. This mode has full access to the live editor state.

**Best for:** Interactive design work, real-time modifications, visual feedback.

### Server API mode (headless)

Uses the **Framer API** directly, no browser required. The AI connects to Framer's cloud via a headless Chrome instance. There is an initial delay of \~9 seconds while the Chrome instance spins up.

**Best for:** CI/CD automation, batch operations, scripts that run without a human present.

<Aside>
  <Info>
    Most users should use **Plugin mode**. It is faster for interactive work and gives immediate visual feedback in the Framer editor. Server API mode is for advanced automation use cases.
  </Info>
</Aside>

## Getting started

1. Open your Framer project
2. Press **Cmd+K** and search for **MCP**
3. Install and open the plugin
4. Copy the MCP URL shown in the plugin
5. Follow the [connection guide](/mcp/connect) for your AI tool

## Important: keep the plugin open

The Framer MCP plugin must remain **open** in the Framer editor while you use it. If you close the plugin or switch to a different project, the AI loses its connection.

Only **one MCP plugin** can be active at a time. The AI controls whichever project currently has the plugin open.