# Framer MCP

> Framer MCP connects your AI agent directly into Framer's backend, letting you manage site content and publishing workflows conversationally. You can list, create, and update CMS collections, query site structures, and trigger full website publishes—all without opening the visual design editor.

## Overview
- **Category:** design-creative
- **Price:** Free
- **Tags:** web-design, cms-management, site-publishing, interactive-design, content-sync, visual-canvas

## Description

Manage your entire digital presence from plain language commands. This MCP gives your agent direct control over Framer's Content Management System (CMS) and publishing pipeline. You can ask it to list all available collections or create a new team profile item, ensuring your content is always accurate and up-to-date.

Need to update a blog post across three different collection types? Your agent handles that by pushing changes directly into the CMS. When everything is ready, you simply ask it to publish the site, making those updates visible to visitors immediately. It's about treating your website content like structured data—something you manage with text commands, not clicks in a GUI.

It works as part of the Vinkius catalog, giving your AI client access to Framer alongside thousands of other services. This means you don't need separate tools for every platform; everything connects through one place.

## Tools

### list_projects
Retrieves a list of all Framer projects associated with your account.

### get_project
Fetches detailed configuration and information for a specific Framer project.

### list_collections
Reads and returns the names of all content management collections available on your site.

### list_collection_items
Retrieves a list of existing items (like blog posts) within a specific CMS collection.

### create_collection_item
Generates and adds brand new content items to a specified CMS collection.

### publish_site
Makes all current changes—content, pages, etc.—visible to the public website visitors.

### list_pages
Lists every page defined in your Framer site structure.

### get_site_info
Grabs general configuration data and settings details for the entire website.

## Prompt Examples

**Prompt:** 
```
List all CMS collections in my Framer site.
```

**Response:** 
```
Your Framer project has 3 CMS collections: 'Blog Posts' (18 items), 'Team Members' (12 items), and 'Case Studies' (7 items).
```

**Prompt:** 
```
Add a new team member 'Ana Silva' to the Team Members collection.
```

**Response:** 
```
Team member 'Ana Silva' added to the 'Team Members' collection. Fields set: Name, Role (empty). You can ask me to update additional fields like bio, photo URL, or social links.
```

**Prompt:** 
```
Publish my Framer site with the latest CMS changes.
```

**Response:** 
```
Site publish triggered. Your CMS changes are now live. Last updated: just now. All 37 collection items synced across 3 collections.
```

## Capabilities

### Manage Content Collections
List or create new items within any CMS collection, like adding a new employee profile or case study.

### Query Site Structure
Get details about the entire project setup, including all available site pages and content model schemas.

### Push Content Updates
Programmatically push fresh data or updates into your existing CMS collections from an outside source.

### Deploy Website Changes
Trigger a full site publish to ensure all the changes you made—the new blog post, the updated portfolio—go live immediately.

## Use Cases

### Launching a New Product Line
A marketing lead needs to launch 10 new product pages. Instead of manually creating each item, they ask their agent to 'Create 10 new collection items for the Products category.' The agent uses `create_collection_item` for all ten entries, then runs `publish_site` so the entire catalog goes live simultaneously.

### Updating Team Bios After Reorg
The HR team needs to update 15 employee profiles. They ask their agent to 'Update the bio and role for all staff members in the People collection.' The agent uses `list_collection_items` first, then selectively updates data, finishing by calling `publish_site`.

### Syncing Database Content
A developer needs to sync product inventory from an external Postgres database. They configure their client to push this structured data into Framer's CMS collections and then use the MCP to trigger a site publish, making the updated prices visible.

### Pre-Flight Site Check
Before launching a major campaign, the content manager asks their agent to 'List all pages and check if the main landing page is configured.' The agent uses `list_pages` and `get_site_info` to confirm site readiness before allowing the publish command.

## Benefits

- Stop logging into Framer manually. You can use the `create_collection_item` tool to add new blog posts or team bios directly through conversation.
- Need to know what content exists? The `list_collections` and `list_collection_items` tools let your agent query everything, saving you from clicking through endless dashboards.
- When a site update is ready, the `publish_site` tool makes it live instantly. It bypasses manual deployment steps and pushes changes immediately to visitors.
- You don't need to touch the canvas. Use this MCP to manage complex data flows, syncing external information into CMS fields using structured commands.
- Get a complete overview of your site with `list_pages` and `get_site_info`. Your agent can confirm if all necessary pages are configured before you run a publish command.

## How It Works

The bottom line is that your AI client executes complex content workflows using simple natural language requests.

1. Subscribe to the Framer integration on Vinkius and generate an API key from your Framer project's settings.
2. Connect your AI client using this MCP, passing it the required API credentials.
3. Tell your agent exactly what you need done—for example, 'Create a new case study for Acme Corp and publish the site.'—and watch it execute the steps.

## Frequently Asked Questions

**How do I get my Framer API key?**
Open your Framer project in the editor. Go to **Site Settings** (gear icon in the top bar), then navigate to the **General** tab. Scroll down to find the **Server API** section and click **Generate API key**. Copy the key and store it securely — treat it like a password. This key is specific to this project. Paste it into the configuration field below.

**Can I push content from a spreadsheet into my Framer CMS?**
Yes. Your AI agent can create and update CMS collection items programmatically. Describe the data you want to add, and it maps your fields to the Framer collection schema and creates the items — perfect for bulk content migrations or data-driven landing pages.

**Does publishing through the API affect my Framer design?**
No. The Server API only manages CMS content — it cannot modify your visual design, canvas layout, or component structure. Your designers remain in full control of the visual experience while content teams operate independently through the AI agent.

**Is this suitable for agencies managing multiple Framer projects?**
Yes. Each API key is bound to a specific Framer project. Configure separate integrations for each client project and your AI agent can switch between them — managing content across your entire portfolio without opening multiple browser tabs.