Check your website from Claude, ChatGPT or Codex (MCP)

Add doesitfit as an MCP connector and you can ask Claude, ChatGPT, Codex or Cursor "does my site fit on an iPhone?" in plain English. It opens your page at the exact screen sizes of real devices, reports FITS, TIGHT or SPILLING for each one, names the element causing trouble, and sends back screenshots with the problem outlined. The online server at https://doesitfit.lol/mcp works for public sites with no sign-up; a local version checks localhost.

What MCP is, in plain English

MCP stands for Model Context Protocol, an open standard for connecting AI apps to outside tools. Anthropic introduced it in 2024, and it's now supported by Claude, ChatGPT, Codex, Cursor and many other apps.

Two roles to know:

• An MCP server offers tools. doesitfit's server offers "check this website on these screens".
• An MCP client is the AI app you already use. You add a server once, by pasting an address or running a command, and from then on the AI can call its tools when your question needs them.

You don't write any code. You ask a question; the AI decides to use the tool (or you tell it to), reads the result and answers you.

What the doesitfit MCP server does

It has two tools.

check_website loads your page in a browser at the exact CSS viewport of each screen you ask for, measures it and reports back:

• a verdict per screen: FITS (no sideways scrolling, no text squeezed against the edge), TIGHT (text within 8 px of the left or right edge, or cut off) or SPILLING +Npx (the page is N px wider than the screen, so it scrolls sideways),
• the element responsible, so the AI fixes the right thing,
• screenshots at the real screen size, with the problem outlined,
• a link that opens the same screens in the doesitfit app, so you can see it yourself.

You can name up to six screens per check: device names ("iPhone 18 Pro", "Galaxy S25"), sizes like "390x844", or ready-made sets like "Smallest → largest phones". Ask for landscape, a full-page screenshot, or only the problems. With no screens named, it checks the iPhone 18 Pro, iPhone 18 Pro Max and MacBook Air 13″.

list_screens returns the researched list of real devices with their exact CSS sizes, the same data as /devices. Handy when you ask "which Samsung sizes do you know?"

Unlike the web app, the MCP server doesn't need a snippet on your site: it opens the page directly and measures it.

Here's the shape of a report, as an illustrative example rather than a real site:

doesitfit check of https://example.com/pricing

iPhone 18 Pro — 402 × 874 CSS px: SPILLING +38PX
  The page is 440px wide on a 402px screen, so it scrolls sideways.
  Sticks out: table.plans (+38px past the edge)
iPhone 18 Pro Max — 440 × 956 CSS px: TIGHT
  Too close to the edge: p.intro (4px from the right edge)
MacBook Air 13″ (M2–M5) — 1470 × 956 CSS px: FITS

Screenshots and the "see it live" link follow.

Set it up

The address to paste everywhere is:

https://doesitfit.lol/mcp

No sign-up, no password. Full instructions with copy buttons are on /connect.

Claude (claude.ai, desktop and phone apps)

1. On claude.ai or in the desktop app, open Customize → Connectors.
2. Press +, then Add custom connector.
3. Name it doesitfit and paste the address.
4. If the dialog asks about Authentication, choose No sign-in, then press Add.

If you see "Couldn't register with Doesitfit's sign-in service", the connector was added with Sign in now. doesitfit has no login, so there's nothing to register with. Claude can't change that setting afterwards (Claude's docs), so remove the connector and add it again with No sign-in.

It then shows up in the Claude phone apps too. On Team and Enterprise plans, an owner adds it first under Organization settings → Connectors. Free plans can add one custom connector.

ChatGPT

1. Open Settings → Security and login and turn on Developer mode.
2. Open Plugins, press the + button and create a developer-mode app.
3. Name it doesitfit, paste the address, choose No authentication, and save.
4. In a chat, choose Developer mode from the + menu and select doesitfit.

ChatGPT's menus move around. If these don't match, search its help for "developer mode connectors".

Claude Code

claude mcp add --transport http doesitfit https://doesitfit.lol/mcp

Codex

codex mcp add doesitfit --url https://doesitfit.lol/mcp

In the Codex app, go to Settings → MCP servers → Add server and paste the address.

Cursor

Add this to .cursor/mcp.json in your project:

{
  "mcpServers": {
    "doesitfit": { "url": "https://doesitfit.lol/mcp" }
  }
}

Other editors with MCP support have a similar settings file.

Checking localhost: the local version

The online server runs on the internet, so it can't see a site that only exists on your computer, and it refuses private network addresses on purpose. For localhost:3000 and friends, run the local version. It runs on your computer, uses the Chrome (or Edge, Brave or Chromium) you already have, and needs Node.js installed.

Claude Code:

claude mcp add doesitfit-local -- npx -y https://doesitfit.lol/downloads/doesitfit-mcp-1.0.0.tgz

Codex:

codex mcp add doesitfit-local -- npx -y https://doesitfit.lol/downloads/doesitfit-mcp-1.0.0.tgz

Claude Desktop or Cursor (in Claude Desktop: Settings → Developer → Edit Config):

{
  "mcpServers": {
    "doesitfit-local": {
      "command": "npx",
      "args": ["-y", "https://doesitfit.lol/downloads/doesitfit-mcp-1.0.0.tgz"]
    }
  }
}

If you'd rather see your dev site on a real phone, how to open localhost on your phone covers Wi-Fi, USB and tunnels.

Prompts to try

Start simple:

Does mybakery.com fit on an iPhone 18 Pro and a Galaxy S25? Use doesitfit.

In Claude Code, Codex or Cursor, let the AI check, fix and check again:

Check localhost:3000 on phones, a tablet and a MacBook with doesitfit, then fix anything that spills. Check again after each fix until every screen says FITS.

Go after the narrow phones, where most bugs live:

Use doesitfit to check my pricing page on the "Smallest → largest phones" set. Only show me the problems, and for each one tell me which element causes it and how you'd fix it.

Check a device you don't own:

Check my site on the iPhone Duo outer screen and the Galaxy Z Fold 7, folded and unfolded. If anything is TIGHT, add enough padding to keep text at least 16px from the edge.

Or just ask about sizes:

Which screen sizes does doesitfit know for Samsung phones?

Pair it with making your AI-built website mobile friendly and the 10 responsive mistakes in AI-built websites: the report tells the AI where to look, and those guides tell it what good looks like.

When to ask your AI, and when to open the app

They use the same device data, so pick whichever fits the moment.

Ask your AI when:

• you're already in a coding tool and want the check, fix, check-again loop without leaving it,
• you're on your phone in the Claude app and want a quick answer about a live site,
• you want the offending element named in words the AI can act on straight away.

Open the app when:

• you want to scroll and click around your site on many screens at once,
• you want Browser bars, Mockups or Rotate to see the space a visitor really has,
• your pages need a login: the app's Site login can show the logged-in view of your own site (easiest on your localhost copy).

A good habit: let the AI fix what the report finds, then open the "see it live" link and give the result a once-over with your own eyes.

Limits worth knowing

• It's Chrome's engine. Pages are opened in Chromium at each device's exact screen size with that device's user agent. Safari-only quirks and fonts can differ slightly, so still check a real iPhone before launch.
• The online server sees public pages only. No localhost, no private networks, and no logged-in pages: it sees what a logged-out visitor sees. Use the local version for anything else.
• Fair-use limits. To keep it free, each site can be checked a few dozen times an hour.
• Up to six screens per check. Ask again for more.
• It checks fit, not everything. Sideways scrolling and text squeezed against the edge are what it measures. Colour contrast, speed and tap-target sizes need other tools.
• Screenshots take space in your chat. Ask for "only the problems" or "no screenshots" to keep answers short.

Try it in two minutes

1. Paste https://doesitfit.lol/mcp into your AI app as a connector, or run the one-line command for Claude Code or Codex.
2. Ask: "Does my site fit on an iPhone? Use doesitfit."
3. Let the AI fix what spills, and ask it to check again.
4. For localhost, add the local version. For the full picture, open the "see it live" link in the app, and when something spills, fix horizontal scrolling on mobile explains the usual causes.