Framer MCP Server

An MCP server that connects Claude Code, Cursor, or any MCP client to your Framer project. Read your site, edit CMS content, design pages with a canvas DSL, manage code components, and preview changes locally -- all from your editor.

Setup

1. Get your Framer API key

1. Open your project in Framer

2. Go to Site Settings > General

3. Scroll to API and create a new key

4. Copy the project URL from your browser (e.g. https://framer.com/projects/MyProject--abc123)

2. Configure MCP

Add to your .mcp.json (Claude Code) or MCP settings (Cursor):

{
  "mcpServers": {
    "framer": {
      "command": "npx",
      "args": ["-y", "framer-mcp-server"],
      "env": {
        "FRAMER_PROJECT_URL": "https://framer.com/projects/YourProject--abc123",
        "FRAMER_API_KEY": "fr_your_api_key_here"
      }
    }
  }
}

Or install globally:

npm install -g framer-mcp-server

Related MCP server: figma-ui-mcp

Tools

Project

CMS

Design

Preview & Publish

Usage Examples

Browse your site

"What pages does my site have?"
→ Uses framer_mcp_read_page with site-map query

"Show me the homepage structure"
→ Uses framer_mcp_get_page_context + framer_mcp_read_page with node-by-id

Edit CMS content

"Update the title of my AI project to 'AI Sommelier v2'"
→ Uses framer_mcp_get_collection_items to find the item
→ Uses framer_mcp_add_collection_items to update it

Design changes

"Make the hero section full-screen with centered text"
→ Uses framer_mcp_get_page_context for DSL docs
→ Uses framer_mcp_read_page to get current hero node
→ Uses framer_mcp_apply_changes with DSL commands
→ Uses framer_mcp_preview to generate local preview

Preview before pushing

"Preview the homepage"
→ Uses framer_mcp_preview to generate HTML and open in browser

"Publish to staging"
→ Uses framer_mcp_publish to deploy and return the preview URL

How It Works

The server connects to your Framer project via the Framer Server API using a WebSocket connection. It translates MCP tool calls into Framer API operations:

• CMS tools use collection/item CRUD methods

• Design tools use the Framer agent DSL (applyAgentChanges, readProjectForAgent) for canvas manipulation

• Preview reads the full page node tree and converts it to styled HTML

• Code tools use createCodeFile / setFileContent for React components

All write operations (CMS add/remove, design changes) include undo support by snapshotting previous state.

Development

git clone https://github.com/ericpjtsai/framer-mcp-server.git
cd framer-mcp-server
npm install
cp .env.example .env  # Add your credentials
npm run dev

License

MIT