Connect an AI Agent to Framer With MCP

Framer 3.0 put an agent inside the editor, but there is a second way in that is easy to miss. MCP lets the AI tool you already use, Claude or any other MCP-capable client, work on your Framer project from the outside. No copying text out of a chat window and pasting it into the canvas. The agent reads your project and, with your say-so, writes to it.

This guide covers what the connection actually is, what the agent can see and do once it is in, and one real workflow, publishing a blog post to your CMS, plus the habits that keep the whole thing safe.

What MCP is, in plain terms

MCP, the Model Context Protocol, is an open standard that lets an AI client call tools in another app. Framer’s MCP server turns your projects into those tools. Through it, an agent can list your projects, open one, read its pages, components and CMS collections, take screenshots, and make changes.

The useful part is that the agent works with your real project instead of a description of it. It sees your actual collection fields, your actual fonts and your actual component names, so what it produces fits what you already have.

Connect your agent

The exact steps depend on the client you use, and Framer keeps the current instructions for each one on its MCP page, but the shape is always the same:

1. Add Framer’s MCP server in your client’s connector or MCP settings, following Framer’s current instructions for that client.

2. Sign in with your Framer account and approve access when asked.

3. Test it with something harmless, like asking the agent to list your projects.

One thing worth knowing: earlier Framer MCP setups ran through a plugin that had to be open inside a project, so the agent could only reach whatever you currently had on screen. The newer server works with your account instead, so the agent can list and open any project you have access to without the editor being open. If a tool tells you the Framer plugin is not connected, you are on the older setup.

What happens when the agent opens a project

Opening a project starts a session and hands the agent the project’s context: fonts, components, collections and any skills you have saved. From there it works by running short programs against the project, reading nodes, changing them and checking the result with screenshots.

For the CMS, the mapping is simple. A collection is like a table, its fields are the columns, and each item is a row. Reference fields, like a blog post’s author or category, point to items in other collections by id, which is why an agent should read the structure first and never guess at names.

Edits are made on a branch, so nothing reaches your published site until you review the changes and merge them. Publishing is a separate step the agent only takes when you ask for it.

A real workflow: publishing a blog post

Here is the flow I use for the UIhub blog. The Blog collection has a title, slug, SEO title, subtitle, dates, author and category references, reading time, cover image, excerpt, meta description, a featured toggle and the article content.

1. Read the structure. Ask the agent to list the Blog collection’s fields and how many items it has.

2. Read recent posts. Have it look at two or three published items, so the new one matches their tone and length.

3. Add the content. Create the item with your title, then write or paste the article into the content field, using real headings, paragraphs and lists.

4. Fill the metadata. SEO title, subtitle, excerpt, meta description, reading time and category, all derived from the article itself.

5. Review and merge. Add the cover image and check the author yourself, read it in the editor, then merge the branch and publish.

What used to be twenty minutes of copying, counting characters and picking a category becomes a review pass. You still decide what the post says. The agent handles the filling.

Let a skill hold the rules

Steps two to four are the same every time, which is exactly what Framer Skills are for. A skill like new-blog-item can hold your checklist once: how long an SEO title should be, what a good subtitle sounds like, how the excerpt is written, how reading time is calculated, which category fits, and which fields the agent must never touch, like the title, slug, author and cover image. Every new post then gets the same treatment without you retyping the rules.

The way I think about it: MCP gives the agent access, and a skill gives it judgment. You need both, and they stay separate, so you can change the rules without touching the connection.

Habits that keep it safe

• Start read-only. Ask the agent to describe what it plans to change before it changes anything.

• Review the branch. Look at the list of changes before you merge, especially after bulk edits.

• Treat connection details like passwords. If a connection URL or token ever ends up in a chat, rotate it.

• Keep the final calls human. Cover images, author attribution and the publish button are yours.

Where this is going

Connecting an agent is a ten-minute job, and the payoff compounds. The repetitive parts of running a Framer site, filling fields, checking structure, keeping content consistent, are exactly the parts an agent does well, which leaves more of your time for design and writing. Start with one small task, like a blog post, and build from there.