Miromiro MCP Server

miromiro-mcp

MCP server for the MiroMiro design-extraction API. Give your AI agent the real design of any live website - brand colors, fonts, design tokens, SVGs, images, Lottie animations, and paste-ready component code - so it builds from actual values instead of guessing from a screenshot.

Works with Claude (web, desktop, Claude Code), ChatGPT, Cursor, Windsurf, Codex, and any MCP client.

Quick start: remote server (nothing to install)

A hosted server lives at:

https://miromiro.app/mcp

Paste that URL into any client that accepts a remote MCP server. On first use it opens a one-click MiroMiro sign-in that links a free account (100 credits/month, no card).

• Claude (web or desktop): Settings → Connectors → Add custom connector → paste the URL. Or use the one-click install.
• ChatGPT: Settings → Security and login → enable Developer mode, then add the URL as a connector (authentication: OAuth).
• Cursor (remote): add { "mcpServers": { "miromiro": { "url": "https://miromiro.app/mcp" } } } to ~/.cursor/mcp.json.
• Raw API key instead of OAuth: append ?access_key=mm_live_... to the URL, or send it as an Authorization: Bearer header.

Local server (npm)

Prefer a local stdio process with the key in an env var? Get a free key at miromiro.app/api/dashboard, then:

Cursor (~/.cursor/mcp.json) / Windsurf (Settings → MCP):

{
  "mcpServers": {
    "miromiro": {
      "command": "npx",
      "args": ["-y", "miromiro-mcp"],
      "env": { "MIROMIRO_API_KEY": "mm_live_your_key" }
    }
  }
}

Claude Code (run in your terminal, not inside a claude session):

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

Tools

All tools are read-only and retry-safe. Identical calls within 24 hours are served from cache for free, and failed calls are never billed.

Controlling output size (remote server)

Remote results are trimmed by default so a big page cannot flood the chat context, and every trimmed response says exactly what was dropped. Two optional arguments loosen it per call:

• limit (up to 200) - raise the item cap: "give me 80 SVGs, not 20"
• full_output: true - complete long strings, like entire inline SVG markup

The REST API and this local npm server always return everything untrimmed.

Examples

"Rebuild stripe.com's pricing section in React"

The agent calls extract_code with the URL, gets the section's real markup, colors, fonts, and spacing, and adapts actual values instead of guessing.

"Build a dashboard in the style of linear.app"

The agent calls extract_brand and extract_design_tokens, gets Linear's real colors, fonts, and spacing scale, and builds to match.

"What fonts does apple.com use?"

The agent calls extract_fonts and returns every family with its font file URLs and weights.

Notes

• The API reads static HTML and resolves the full CSS cascade. It does not execute JavaScript, so a fully client-rendered app may return little for images and Lottie (tokens, fonts, brand, and code come from CSS and are unaffected).
• Respect the sites you extract from: check their terms before reusing assets commercially.

Links

API docs · Playground (no account) · Pricing · Changelog · Connect page

MIT © MiroMiro