Framer MCP

Overview

Framer MCP is a Model Context Protocol server that enables AI assistants to interact with Framer, the popular no-code website builder. It provides access to Framer's design, publishing, and site management capabilities, allowing designers and developers to manage their Framer projects through natural language commands.

This MCP server bridges the gap between AI assistants and the visual design workflow, enabling tasks like creating pages, managing components, updating content, and publishing sites—all through conversational interactions.

Features

• Site Management: List and manage Framer sites
• Page Operations: Create, update, and manage pages
• Component Library: Access and modify component libraries
• Content Updates: Update text, images, and other content
• Publishing Control: Publish sites and manage deployment
• Design Token Access: Read and modify design tokens
• Export Capabilities: Export designs and assets

Installation

npx -y @modelcontextprotocol/server-framer

Or install globally:

npm install -g @modelcontextprotocol/server-framer

Configuration

Add to your Claude Desktop configuration:

{
  "mcpServers": {
    "framer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-framer"],
      "env": {
        "FRAMER_ACCESS_TOKEN": "your-framer-access-token"
      }
    }
  }
}

Getting a Framer Access Token

1. Go to Framer Settings
2. Navigate to API Access or Developer Settings
3. Generate a new access token
4. Copy the token and add it to your MCP configuration

Available Tools

Tool	Description
list_sites	List all Framer sites
get_site	Get details of a specific site
list_pages	List pages in a site
create_page	Create a new page
update_page	Update page content or settings
get_component_library	Get site's component library
update_content	Update text or image content
publish_site	Publish a site
get_design_tokens	Get design token values
export_assets	Export site assets

Usage Examples

Create a New Page

Create a new page called "About Us" in my portfolio site

The MCP server will:

1. List your sites
2. Ask which site to add the page to
3. Create the page with default settings
4. Return the page URL

Update Content

Update the hero section text on my homepage to say "Welcome to our new site"

Manage Components

Show me all components in my design system

Publish a Site

Publish my portfolio site

Export Assets

Export all images from my landing page

Claude Desktop Setup

1. Open Claude Desktop configuration file:

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Add the Framer MCP server configuration:

{
  "mcpServers": {
    "framer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-framer"],
      "env": {
        "FRAMER_ACCESS_TOKEN": "your-framer-access-token-here"
      }
    }
  }
}

3. Restart Claude Desktop

Integration with Other Tools

The Framer MCP server works well with:

• GitHub MCP: For version control integration
• Linear MCP: For project management
• Figma MCP: For design handoff workflows

Pros

• ✅ Design Workflow Integration: Manage Framer sites through AI
• ✅ Natural Language Updates: Change content without opening Framer
• ✅ Rapid Prototyping: Create and iterate quickly
• ✅ Asset Management: Export and organize design assets
• ✅ Team Collaboration: Help teams manage shared sites

Cons

• ❌ Framer Specific: Only works with Framer platform
• ❌ Limited Design Control: Can't replace visual design tools
• ❌ API Token Required: Need to manage access tokens
• ❌ New Integration: Less mature than other MCP servers

When to Use

Ideal for:

• Framer users who want AI-assisted site management
• Designers managing multiple Framer projects
• Teams needing rapid content updates
• Projects requiring frequent publishing cycles

Not ideal for:

• Non-Framer users
• Complex design modifications (use Framer directly)
• Projects without API access

Resources

• Framer MCP Server
• Framer API Documentation
• Framer Documentation
• Model Context Protocol