agents-libagents-lib
AgentsMCP ServersWorkflowsTutorialsComparisonsTemplatesNewsAbout
🔌

Framer MCP

Design•⭐ 1,200

Manage Framer sites, pages, components, animations, and publish through AI.

GitHubWebsite →
Claude DesktopCursor

Overview

Manage Framer sites, pages, components, animations, and publish through AI.

Setup

Run with npx:

npx -y @modelcontextprotocol/server-framer

Configuration

FRAMER_ACCESS_TOKEN environment variable

Documentation

Framer MCP (Enhanced)

Overview

Framer MCP provides integration with Framer's design and publishing platform, enabling AI agents to manage sites, pages, components, animations, and publishing.

Features

  • Site and page management
  • Component creation and editing
  • Animation configuration
  • Publishing control
  • Asset management

Installation

npx -y @modelcontextprotocol/server-framer

Configuration

Set the FRAMER_ACCESS_TOKEN environment variable:

export FRAMER_ACCESS_TOKEN=your_access_token

Get your token from https://www.framer.com/settings/tokens.

Available Tools

ToolDescription
list_sitesList all Framer sites
get_pageGet page content
update_pageUpdate page content
create_componentCreate a new component
publish_sitePublish a site

Usage Examples

Get Site Pages

{
  "site_id": "your-site-id"
}

Update Page Content

{
  "page_id": "your-page-id",
  "content": {
    "blocks": [...]
  }
}

Pros

  • ✅ Framer design integration
  • ✅ Component management
  • ✅ Animation support
  • ✅ Publishing automation

Cons

  • ❌ Requires Framer access token
  • ❌ Limited to Framer ecosystem
  • ❌ Design-specific features

Resources