Framer MCP connects AI clients such as Codex, Claude, Cursor, and Grok Bot to Framer, letting them work directly in your Framer projects. You can create pages, edit layouts, update content, manage CMS collections, and more.
Connect Framer MCP
Choose your AI client below and follow its setup instructions. If yours isn’t listed, use the Another MCP client instructions at the end of this section. The connection uses the permissions of the Framer account you sign in with.
Getting started with the Framer MCP
3:53
ChatGPT/Codex
Install from the Plugins directory
Open the Framer listing in the ChatGPT Plugins and select Install Plugin.
When a new browser tab opens, sign in to Framer and approve access.
In ChatGPT or Codex chat, ask it to connect to your Framer project and start making changes.
Manual setup
Run this command in your terminal to add Framer MCP:
When Framer opens in your browser, sign in and approve the connection. When you see “Authentication complete,” close the browser window.
Return to your terminal and run this command to verify the connection:
Framer should appear as enabled with OAuth. Restart Codex and start a new chat.
Claude
Install from the Claude Directory
Open the Framer listing in the Claude Directory and select Connect to Claude.
When a new browser tab opens, sign in to Framer and approve access.
In Claude chat, ask it to connect to your Framer project and start making changes.
Manual setup
Run this command in your terminal to add Framer to all your Claude Code projects:
Then run this command in your terminal to start authorization:
When Framer opens in your browser, sign in and approve the connection. When you see “Authentication complete,” close the browser window.
Return to your terminal and run this command to verify the connection:
Confirm that Framer shows as connected, then start a new Claude Code session.
Cursor
Install from the Cursor Marketplace
Open the Framer listing in the Cursor Marketplace and select Add to Cursor.
In Cursor chat, ask Cursor to connect to your Framer project. Include the project link, then select Authenticate when prompted.
A new browser tab will open. Sign in to Framer, review the permissions, and select Allow.
Go back to your project and start making changes.
Manual setup
Open Customize → MCPs in Cursor.
Choose New MCP Server.
Add a remote server with:
Name:
framerType:
Streamable HTTPURL:
https://mcp.framer.com/mcp
Save the server and select Connect.
When Framer opens in your browser, sign in and approve the connection. When you see “Authentication complete,” close the browser window and return to Cursor. Confirm that Framer shows as connected.
Grok Bot
Install from the Grok Bot Plugins
Open the Framer listing in the Grok Bot Connected Apps and select Add.
Grok Bot will open a new browser tab. Sign in to Framer, review the permissions, and select Allow.
In Grok Bot chat, ask Grok Bot to connect to your Framer project and start making changes.
Another MCP client
Any AI client that supports remote MCP servers and OAuth can connect to Framer. The exact settings and labels may differ between clients.
Open your client’s MCP settings and add a remote server:
Name:
framerType:
Streamable HTTPURL:
https://mcp.framer.com/mcp
Save or add the server, then connect to it or start using it.
When Framer opens in your browser, sign in and approve the connection. Return to your client and confirm that Framer shows as connected.
Client-specific setup guides
Start working with your project
Once Framer is connected, give your agent the project link and describe what you want it to do.
For example:
Open this Framer project and create a responsive pricing page using its existing styles and components: [project link]
Or start with something smaller:
List the CMS collections in this project: [project link]
Update the homepage heading to “Design and publish without handoff”: [project link]
Review the result
After your agent finishes, open the project in Framer and review the changes on the canvas. Adjust the result yourself or ask your agent for another change. When it’s ready, publish it yourself or ask your agent to publish.
If you can’t connect
Check that you entered
https://mcp.framer.com/mcpexactly.Confirm that your client supports remote Streamable HTTP servers and OAuth.
Ask your workspace administrator whether plugins or MCP connections need approval.
Retry authentication if you closed the Framer sign-in window.
Give your agent the full project link if it opens or selects the wrong project.
FAQ
Does Framer need to stay open?
No. Once connected, your agent can work with your projects while the Framer editor is closed. Open Framer when you want to inspect or adjust the result.
Why can’t my agent find my project?
Check that you connected a Framer account with access to the project. Give your agent the full Framer project link rather than the project name.
Can I work on a different project?
Yes. Your agent can work with any project available to your connected Framer account. Include the full project link to make sure it opens the right one.
How is Framer MCP different from the local CLI setup?
Framer MCP connects compatible AI tools through a remote MCP server. The existing @framer/agent setup uses a local CLI bridge and currently supports additional workflows, including localization. Both remain supported while Framer MCP reaches feature parity.
Which AI clients work with Framer MCP?
Framer MCP works with Codex, Claude Code, Cursor, and other clients that support remote Streamable HTTP MCP servers and OAuth authorization.
