Joseph
3:53
Getting started with the Framer MCP
Learn how to connect Framer to Codex, Claude Code, Cursor, and other AI tools with the Framer MCP. Install the Framer plugin or add the Framer MCP server, authorize your account, and connect a chat to your project. Then build and update your site from your own AI tools.
Lesson details
Framer MCP connects AI tools like Codex, Claude Code, and Cursor to your Framer project. Your agent keeps its own files, context, and tools, and works with the project you point it to. This lesson covers setup and your first connection.
The video uses Codex in the ChatGPT desktop app. Open the Plugins tab, search for Framer, and install the official Framer plugin, which connects Codex to the Framer MCP server. Then continue to Framer and allow access to your account. Using Claude Code, Cursor, or another client that supports remote MCP connections? Check for a Framer plugin first. If there isn’t one, follow the steps in Getting started with Framer MCP to add the Framer MCP server and authorize your account.
To point the agent at a project, open it in Framer, click Invite, and copy the Project Link. Start a new chat, write “Connect to”, and paste the link. Codex uses the Framer MCP to connect and waits for your instructions. In a Codex project, you can also ask it to remember the site, so future chats don’t need the link again.
Framer MCP gets more useful when you combine it with your other tools. An agent can sort a local folder of case studies, articles, and team photos and prepare it for the Framer CMS. It can pull a design reference from Figma, a client brief from Google Drive, or feedback from Slack. With scheduled tasks, it can run weekly keyword checks with Ahrefs or prepare an analytics report in Notion before a meeting.
Frequently asked questions
What is Framer MCP?
The Framer MCP server connects an AI tool, such as Codex, Claude Code, or Cursor, to your Framer project. After you authorize access to your Framer account, the agent can combine the files, context, and tools in its own environment with the project you point it to.
How do I install the Framer MCP plugin in Codex?
In the ChatGPT desktop app, open the Plugins tab in Codex, search for Framer, and click the plus icon on the official Framer plugin. Continue to Framer and allow access to your account. Back in Codex, any chat can now connect to any of your Framer projects.
Can I use Framer MCP with Claude or Claude Code?
Yes. The lesson demonstrates Codex, but you can also use Claude in its desktop app or Claude Code in the terminal. Check whether a Framer plugin is available first. If not, add the Framer MCP server manually using the instructions at framer.com/mcp and authorize your Framer account.
How do I add the Framer MCP server to a client without a Framer plugin?
Any client that supports remote MCP connections can add the Framer MCP server manually. The setup screen depends on the client, but the steps are the same: connect to the server and authorize access to your Framer account. The help article Getting started with Framer MCP walks through it.
How do I point the agent at a specific Framer project?
Open the project in Framer, click Invite, and copy the Project Link. In a new chat, write “Connect to” and paste the link. In a Codex project, you can ask the agent to remember the site so you don’t need the link in future chats.
Which AI clients work with Framer MCP?
The video uses Codex in the ChatGPT desktop app. You can also use Claude in its desktop app or the terminal, Cursor with the model of your choice, or any other AI client that supports remote MCP connections.
Continue watching
Load more