How to Connect the MiroMiro MCP to Claude, Cursor, ChatGPT and Codex

Every client that speaks MCP can connect to MiroMiro with one URL. Paste https://miromiro.app/mcp into the client's connector settings and seven design-extraction tools appear in your chats: section-to-code, brand, design tokens, images, SVGs, fonts, and Lottie.

You do not need an account to try it. The bare URL connects in demo mode; a free key (100 credits a month, no card) unlocks full results. Client-by-client steps below.

Claude - web and desktop

Claude calls these custom connectors. Two ways in:

1. In any chat, click the + button in the input, then Connectors → Add connector → Add custom connector. (Settings → Connectors gets you to the same dialog.)
2. In the dialog, fill in:
   • Name: MiroMiro
   • URL: https://miromiro.app/mcp?access_key=mm_live_your_key - or just https://miromiro.app/mcp to try it keyless first
3. Leave the OAuth Client ID and Secret fields under Advanced settings empty. The key travels in the URL.
4. Click Add. The tools are live in every chat immediately - ask "get the brand colors and fonts of stripe.com" and watch it call extract_brand.

One click faster: the Add to Claude button on our MCP page opens this dialog with the name and URL pre-filled.

Cursor

Cursor supports install deeplinks, so the Add to Cursor button does the whole thing in one click. Manual version, in ~/.cursor/mcp.json:

{
  "mcpServers": {
    "miromiro": {
      "url": "https://miromiro.app/mcp",
      "headers": { "Authorization": "Bearer mm_live_your_key" }
    }
  }
}

Cursor can send headers, so put the key there instead of in the URL - headers stay out of logs. Restart Cursor and check the MCP panel for the seven tools.

ChatGPT

ChatGPT only takes remote servers, which is exactly what this is:

1. Settings → Apps & Connectors → Advanced → enable Developer mode
2. Create a connector:
   • Name: MiroMiro
   • MCP server URL: https://miromiro.app/mcp?access_key=mm_live_your_key
   • Authentication: No authentication (the key is in the URL)
3. Enable the connector in a chat via the tools menu.

Codex CLI

Add to ~/.codex/config.toml:

[mcp_servers.miromiro]
url = "https://miromiro.app/mcp?access_key=mm_live_your_key"

Claude Code

One command in your terminal, not inside a session:

claude mcp add --transport http miromiro https://miromiro.app/mcp \
  --header "Authorization: Bearer mm_live_your_key"

claude mcp list   # look for "✓ Connected"

Claude Code also runs the local npm package if you prefer the key in an env var instead of a header.

Demo mode vs a key

The same tools respond either way. What changes:

Demo mode is for seeing real output before you sign up. Treat the free key as the actual starting point: it is also free, and extract_code alone is worth the 30 seconds of signup.

What to ask once connected

You never name tools in prompts - ask design-shaped questions and the agent picks the right one:

• "Rebuild stripe.com's pricing section in React"
• "Extract linear.app's design tokens and restyle our Button component to match"
• "What fonts does vercel.com actually load?"
• "Pull the brand palette from ourcustomer.com and generate a theme file"

Common problems

• "Invalid or revoked API key" in the tool result. The key in your URL or header is wrong or was rotated. Grab the current one from API Keys - keys are shown once at creation, so rotate if you lost it.
• Rate limited in demo mode. The keyless tier is 5 requests a minute per IP, shared with everyone behind your NAT. A free key gives you your own 30/minute.
• Thin results on an app-like site. The engine reads static HTML and CSS, no JavaScript execution. A fully client-rendered app returns little, and the tools say so instead of inventing values.
• Claude web has no header field. Correct - claude.ai custom connectors cannot send custom headers. That is what ?access_key= is for.

Or skip MCP entirely

The same engine is a plain REST API:

curl "https://miromiro.app/api/v1/brand?url=stripe.com" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

Full reference at /api/docs. You can start for free.

Frequently asked questions

How do I add a custom MCP connector to Claude web?

The + button in the chat input → Connectors → Add connector → Add custom connector. Name it, paste the URL, click Add.

Do I need a key to try it?

No. The bare URL runs in demo mode. Full results need a key - free, 100 credits a month, no card.

Which clients does the remote server work with?

Claude web and desktop, Cursor, ChatGPT developer mode, Codex, Claude Code, Windsurf, and any MCP SDK. If it takes a server URL, it works.

Where does my key go safest?

Header (Authorization: Bearer) where the client supports it - Cursor, Claude Code, SDKs. URL (?access_key=) only where headers are not an option - claude.ai, ChatGPT. Rotate keys anytime in the dashboard.