How to connect Claude, Cursor, Grok Bot and more to Framer with MCP

Once you approve the connection, your agent can work with the canvas, components, supported project settings and CMS in any project your Framer account has access to. It uses your account’s permissions.

Work from your desktop, browser or phone. Use Framer from any supported desktop, browser or phone app. There’s no local Framer bridge to install and no need to keep the editor open.

Review every change before it goes live. Changes stay in your project or branch until you or your agent publishes them. Ask your agent to work on a branch, review its changes, compare them with main, and publish when you're ready.

Use the agent you already pay for. Your AI usage follows that agent’s plan or credits.

Here’s how to connect Framer MCP in eight tools. Each one takes less than a minute.

Claude

1. Click your profile in the bottom left and open Settings.

2. Go to Connectors and search for Framer.

3. Click Connect next to Framer.

4. Sign in to Framer and click Allow.

Framer now shows as Connected. You can also use Add to Claude on our MCP page.

Cursor

1. Click Customize in the sidebar and open the MCPs tab.

2. Click Browse Marketplace and search for Framer.

3. Click Add, then Authenticate.

4. Sign in to Framer and click Allow.

A green dot shows Framer is connected and its tools are enabled. You can also use Add to Cursor on our MCP page.

Grok Bot

1. Click Connect apps in the bottom left.

2. Find Framer under Recommended for you and click Add.

3. Click Add again to confirm.

4. Sign in to Framer and click Allow.

Framer now shows as Connected. You can also use Add to Grok Bot on our MCP page.

ChatGPT

1. Open the Framer listing in ChatGPT’s Plugins directory and select Install Plugin.

2. Sign in to Framer in the tab that opens and approve access.

3. Start a chat, paste your Framer project link, and ask ChatGPT to connect to it.

ChatGPT connects to your project and waits for your instructions. You can also use Add to ChatGPT on our MCP page.

Devin

1. Click Customize in the sidebar and open the MCPs tab.

2. Click + and choose New MCP.

3. Name it Framer, set the transport to HTTP, and paste https://mcp.framer.com/mcp as the server URL.

4. Click Add, confirm the security notice, and click Add again.

5. Sign in to Framer and click Allow.

Devin confirms the account is linked and switches Framer on.

OpenCode

1. Create your OpenCode config file: mkdir -p ~/.config/opencode && touch ~/.config/opencode/opencode.json

2. Open opencode.json and add Framer as a remote MCP server with the URL https://mcp.framer.com/mcp.

3. Run opencode mcp auth framer.

4. Sign in to Framer and click Allow.

You'll see "Authorization successful. OpenCode is now connected to Framer."

VS Code

1. Open the Command Palette and run Chat: Open Customizations.

2. Open MCP Servers and click Add Server.

3. Choose HTTP and paste https://mcp.framer.com/mcp.

4. Name it framer, then sign in to Framer and click Allow when prompted.

Hermes Agent

1. Open your terminal and run: hermes mcp add framer --url https://mcp.framer.com/mcp --auth oauth

2. Sign in to Framer in the browser window that opens and click Allow.

Hermes connects and can see your Framer projects right away.

Using another tool?

Any AI tool that supports remote MCP servers and OAuth can connect to Framer, including Codex, Claude Code, Windsurf, Warp, Kiro, Notion and Antigravity. Add the Framer MCP server in your tool, approve the connection with your Framer account, and ask your agent to work on your project.

https://mcp.framer.com/mcp

Start building

Paste your Framer project link into the chat and tell your agent what you want: build a page, update your CMS content, or migrate an existing site. By default nothing goes live until you publish.

Building an AI product? You can bring Framer to your users, too. Submit your app.

Get started with Framer MCP