Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

How to connect Framer MCP server

Note: All code snippets below already include your user session ID and secret. Do not share these URLs with others.
Important: Using Framer MCP requires that the Framer MCP plugin is open inside the Framer app. Only one MCP plugin can be open at any time; the server will control whichever Framer project currently has the plugin open.

Automatic Install

Run the following command to automatically install Framer MCP to your preferred AI client:
Terminal
npx -y @playwriter/install-mcp --oauth no "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
This will prompt you to choose which client to install to: Cursor, Claude Code, Claude Desktop, VS Code, Zed, and more.

Manual Install

Below are manual configuration instructions for each AI client.

Cursor

Install in Cursor
Or configure manually:
.cursor/mcp.json
{
  "mcpServers": {
    "framer": {
      "type": "streamableHttp",
      "url": "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
    }
  }
}
  1. Save to project root, or ~/.cursor/mcp.json.
  2. Restart Cursor and enable Agent mode.
  3. Ask in the agent panel: "What tools do you have available?" to make sure Framer MCP is connected.
  4. Enable the Framer MCP tool in Cursor settings if it is still disabled.

Claude Code

Use the following command from the current project directory:
Important: You must keep the quotes around the URL or Claude can drop some query params.
CLI
claude mcp add --transport http --scope project framer "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
This generates the following file:
.mcp.json
{
  "mcpServers": {
    "framer": {
      "type": "http",
      "url": "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
    }
  }
}
Important: The config above only makes Framer MCP available when you call claude from the same directory as .mcp.json. Omit --scope project only if you want the MCP globally available.

Claude Web and Desktop

Claude supports custom MCP connectors on all plans (Free is limited to one connector).
  1. Open Customize → Connectors → + and select Add custom connector.
  2. Name the connector Framer.
  3. Paste this URL:
MCP URL for Claude connector
https://mcp.unframer.co/mcp?id=xxx&secret=xxx
  1. Save and enable the connector.
This works on claude.ai, Claude Desktop, and Claude mobile. The connector syncs across all your Claude apps.
If your Claude Desktop version does not support remote connectors yet, you can bridge through mcp-remote instead by editing claude_desktop_config.json:
claude_desktop_config.json
{
  "mcpServers": {
    "framer": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
      ]
    }
  }
}

OpenCode

Create opencode.json in your project root, or use ~/.config/opencode/opencode.json globally:
opencode.json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "framer": {
      "type": "remote",
      "url": "https://mcp.unframer.co/mcp?id=xxx&secret=xxx",
      "enabled": true
    }
  }
}
  1. Save the config.
  2. OpenCode detects and connects to the MCP server.
  3. Ask "What tools do you have available?" to verify Framer MCP access.

Zed

Add this to ~/.config/zed/settings.json:
~/.config/zed/settings.json
{
  "context_servers": {
    "framer": {
      "url": "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
    }
  }
}
Reload the Agent panel. A green dot means the server is connected.

VS Code and GitHub Copilot

  1. Use VS Code 1.102 or newer with an active Copilot subscription.
  2. Open the command palette and run MCP: Add Server.
  3. Paste the MCP URL. VS Code creates this file:
.vscode/mcp.json
{
  "servers": {
    "framer": {
      "type": "http",
      "url": "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
    }
  }
}
  1. Switch Copilot Chat to Agent mode to invoke tools.

Programmatic control via OpenAI JS SDK Responses API

agent.ts
import { Agent, hostedMcpTool, run } from "@openai/agents"

const agent = new Agent({
  name: "Framer assistant",
  model: "gpt-4.1",
  tools: [
    hostedMcpTool({
      serverLabel: "framer",
      serverUrl: `https://mcp.unframer.co/mcp?id=${process.env.USER_ID}&secret=${process.env.SECRET}`,
    }),
  ],
})

const result = await run(agent, "Publish the current page to production")
console.log(result.finalOutput)
The agent streams tool calls to Framer MCP and returns status when complete.

Codex Desktop App

The Codex desktop app natively supports streamable HTTP MCP servers. Add this to ~/.codex/config.toml:
~/.codex/config.toml
[mcp_servers.framer]
url = "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
  1. Create or edit ~/.codex/config.toml.
  2. Add the Framer MCP server configuration above.
  3. Restart the Codex app for changes to take effect.
  4. You can also configure MCP servers from the app via Settings → Integrations & MCP.
Keep this config file private because the URL includes your Framer MCP credentials.

Codex CLI

Codex CLI supports streamable HTTP MCP servers natively. Add this to ~/.codex/config.toml:
~/.codex/config.toml
[mcp_servers.framer]
url = "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
  1. Create or edit ~/.codex/config.toml.
  2. Add the Framer MCP server configuration above.
  3. Restart Codex CLI for changes to take effect.
  4. Ask Codex "What tools do you have available?" to verify the connection.

Remote MCP bridge for stdio-only clients

If your tool only supports stdio transport, use mcp-remote to bridge remote HTTP:
Bridge Command
mcp-remote "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
This creates a local stdio process that forwards to the remote HTTP server.

How to check MCP availability

Ask your assistant:
Do you have access to the Framer MCP tool?
Then try a small action:
Rewrite the current page text.
If the integration is successful, the tool should respond or attempt the requested action. If you receive an error about tool access, check that the Framer MCP plugin is open and your configuration matches the relevant section above.

Troubleshooting cheatsheet

SymptomQuick fix
Timeouts or very slow callsEnsure the Framer MCP plugin is open. If it is hung, close and reopen it.
App does not see Framer MCPOpen the Framer MCP plugin before opening Cursor or Claude.
MCP loading fails in Claude CodeMake sure you used quotes around the URL in the claude mcp add command.
Switching projectsClose the MCP plugin in the current project and open it in the target project.
Cursor cannot see serverEnsure Agent mode is enabled and Pro subscription is active.
Copilot does not list serverUpdate to VS Code 1.102 or newer and enable MCP support.

Unframer CLI

You can also use the unframer CLI to interact with Framer MCP directly from your terminal, without needing an AI assistant.
First, save your MCP URL:
Terminal
npx -y unframer mcp login "https://mcp.unframer.co/mcp?id=xxx&secret=xxx"
After login, all MCP commands become available. Run npx unframer --help to see the full list.
# Get project structure as XML
npx unframer mcp getProjectXml

# Get a specific node by ID
npx unframer mcp getNodeXml --nodeId "abc123"

# Update a node's text or attributes
npx unframer mcp updateXmlForNode --nodeId "abc123" --xml '<Text nodeId="abc123">New text</Text>'

# Search for available fonts
npx unframer mcp searchFonts --query "Inter"

# List all CMS collections
npx unframer mcp getCMSCollections

# Get items from a CMS collection
npx unframer mcp getCMSItems --collectionId "col123"

# Export React components
npx unframer mcp exportReactComponents

# Run any command with --help for detailed options
npx unframer mcp updateXmlForNode --help
Powered byHolocron