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 to paste a key. The bare URL triggers a one-click sign in with your MiroMiro account - free, 300 credits a month, no card. 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
3. Leave the OAuth Client ID and Secret fields under Advanced settings empty - Claude discovers them from the server.
4. Click Add. Claude opens the MiroMiro sign-in page; approve it and the tools are live in every chat - ask "get the brand colors and fonts of stripe.com" and watch it call extract_brand.

One click faster: Add MiroMiro to Claude opens this dialog with the name and URL pre-filled - you just click Add and sign in.

Cursor

Cursor supports install deeplinks, so Add MiroMiro to Cursor does the whole thing in one click - it opens Cursor with the server config pre-filled. Manual version, in ~/.cursor/mcp.json:

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

Drop the headers line and Cursor prompts you to sign in instead - either works. If you do use a key, the header keeps it 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 → Security and login → enable Developer mode
2. Settings → Plugins (or go straight to chatgpt.com/plugins) → New Plugin:
   • Name: MiroMiro
   • Connection: Server URL, https://miromiro.app/mcp
   • Authentication: OAuth - ChatGPT reads the sign-in settings from the server, so there is nothing to configure
   • Tick the custom-server acknowledgment and click Create
3. ChatGPT shows a consent card. Click Sign in with MiroMiro, approve, and the tools appear in any chat via the + menu → More.

OpenAI has renamed this area twice recently - if your build still says Apps & Connectors, the Developer mode toggle lives under Advanced there instead.

Prefer to delegate? Paste this prompt into the assistant and let it do the guiding - ChatGPT walks you through its own settings, and Codex installs the server for real:

Add the MiroMiro MCP server to this client.

Server name: miromiro
Server URL:  https://miromiro.app/mcp
Transport:   Streamable HTTP (stateless JSON responses)
Auth:        OAuth (auto-discovered). On first connect you'll be asked to sign in to MiroMiro - a free account includes 300 credits/month, no card. API keys also work: append ?access_key=mm_live_YOUR_KEY or send "Authorization: Bearer".

If you are ChatGPT: Settings → Security and login → enable Developer mode, then Settings → Plugins (chatgpt.com/plugins) → New Plugin with the URL above (authentication: OAuth).
If you are Codex CLI: add to ~/.codex/config.toml:
[mcp_servers.miromiro]
url = "https://miromiro.app/mcp"

Then list the tools - you should see extract_code, extract_brand, extract_design_tokens, extract_assets, extract_svgs, extract_fonts and extract_lottie.

Codex CLI

Add to ~/.codex/config.toml:

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

Codex prompts you to sign in on first use. To pin a key instead, use 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

Then run /mcp inside a session to sign in - Claude Code opens the browser consent page once and stores the token. If you'd rather skip the browser, pass the key directly:

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.

Sign-in vs pasting a key

Both end up in the same place: signing in links your account and provisions a free API key behind the scenes, so the tiers are identical either way.

Sign-in is the better default: no key to store, tokens expire and refresh on their own, and revoking the connector kills access without touching your other keys. Paste a key only where a client cannot run the sign-in flow.

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.
• The client keeps asking you to sign in. Remove the connector and add it again - a stale token from a revoked link is the usual cause. Tokens normally refresh on their own for 180 days.
• Thin results on an app-like site. The engine reads static HTML and CSS by default, so a fully client-rendered app returns little - and the tools say so instead of inventing values. The fix is one argument: render: true loads the page in a real browser and runs its JavaScript before extracting (+5 credits). The thin response includes a hint telling the agent exactly that.
• Claude web has no header field. Correct - claude.ai custom connectors cannot send custom headers. You do not need one: the sign-in flow handles auth, and ?access_key= still works if you prefer a pinned key.

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, then approve the MiroMiro sign-in page it opens.

Do I need a key to try it?

No. Paste the bare URL and sign in with a MiroMiro account when prompted - free, 300 credits a month, no card. Keys are the fallback for clients that cannot run the sign-in flow.

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.