Docs/Install MCP

Install MCP

Two ways to get the MiroMiro tools into your agent: connect to the hosted remote server (just a URL, nothing to install), or run the local miromiro-mcp npm package. Both expose the same 9 extract tools automatically.

Remote server - no install

A hosted MCP server lives at https://miromiro.app/mcp (Streamable HTTP). Paste it into any client that takes a server URL - on first connect the client opens a MiroMiro sign-in, and one click links a free account (300 credits/month, no card). Prefer a raw key? Send it as Authorization: Bearer where the client supports headers, or append ?access_key=mm_live_… to the URL where it doesn't.

Add to Claude Add to CursorChatGPT, Claude Code and Codex: use the tabs below.

{
  "url":          "https://stripe.com",
  "selector":     "section.hero-section-container",
  "autoDetected": true,
  "sections": [
    { "selector": "section.hero-section-container", "label": "Financial infrastructure…", "elements": 343 },
    { "selector": "section.business-sizes-section", "label": "Powering businesses of all sizes.", "elements": 604 },
    …
  ],
  "framework":    "tailwind",
  "code":         "<section class=\"relative w-full\">\n  <h1 class=\"text-[#000000] …\">…</h1>\n</section>",
  "css":          null,
  "tokens": {
    "colors":       ["#000000", "#533afd"],
    "fontFamilies": ["sohne-var"],
    "fontSizes":    ["48px", "16px"],
    "spacing":      ["16px", "24px"],
    "radii":        ["8px"],
    "shadows":      ["0 2px 4px rgba(0,0,0,.1)"]
  },
  "theme":   "light",
  "assets":  { "images": ["https://…/hero.png"], "fonts": [] },
  "summary": { "elements": 42, "declarations": 310, "mappedToTailwind": 180, "arbitrary": 44, "styledCoverage": 97, "repeatedGroups": 1, "truncated": false },
  "usage":   { "creditsSpent": 25, "creditsThisMonth": 25, "monthlyLimit": 100, "remaining": 75, "cached": false }
}

Free vs paid - what actually changes

Signing in links a free account and provisions a key behind the scenes, so the tiers are identical whether you connected via sign-in or pasted a key:

	Free account	Paid plans
Rate limit	30/min	60 to 300/min
Credits	300/month	5,000 to 200,000/month
Price	Free, no card	From €19/month

Same 9 tools and full results on both. A tool call spends the same credits as the matching REST endpoint, cached repeats within 24 hours are free, and failed calls are never billed. Want to see output before connecting anything? The web playground runs in the browser without an account.

Controlling output size

Remote MCP results land directly in the chat's context, so list-heavy tools trim by default: 20 SVGs, 20 Lotties, 50 fonts, 60 token entries, 100 images, and very long strings (like inline SVG markup) are shortened. Whenever anything was trimmed, the response carries a truncation_note saying what was dropped. Two optional tool arguments loosen this per call:

limit (number, up to 200) - raise the item cap: "give me 80 SVGs, not 20".
full_output (boolean) - return complete long strings, e.g. entire SVG markup, instead of trimming them.

A single response never exceeds ~100KB - beyond that the server tightens the result again (and says so in the note) rather than letting the chat client clip the JSON silently. Need genuinely everything? The REST API returns full, untrimmed results, and the local npm server passes REST responses through untrimmed.

Local server (npm)

The miromiro-mcp package runs locally as npx miromiro-mcp and reads your key from MIROMIRO_API_KEY. Prefer it when you want the key in a local env var instead of a URL.

Claude Code is configured with the claude mcp add command - run it in your terminal, not inside a claude session. Cursor and Windsurf take a JSON mcpServers block instead - pick your client below.

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

# Client-rendered site (React, Next, SPA)? Add render=true to run its
# JavaScript in a real browser first (+5 credits):
curl "https://miromiro.app/api/v1/code?url=stripe.com&framework=jsx&render=true" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

What each piece does

npx -y miromiro-mcp - downloads the miromiro-mcp package from the npm registry and runs it. Nothing to install or update by hand - -y skips the "install this package?" prompt so your editor can start it unattended.
MIROMIRO_API_KEY - your key from the dashboard. The server reads it from the environment and sends it as the bearer token on every call. It stays in your local config - it is never shown to the agent or sent anywhere except miromiro.app.
command + args - how your editor launches the server: a small local process on your machine that translates the agent's tool calls into HTTPS requests to miromiro.app/api/v1. It talks to nothing else.
-s user (Claude Code) - registers the server for every project on your machine. Drop it to scope to the current project only.

Config paths - Claude Code: registered via claude mcp add (use claude mcp list to verify) · Cursor: ~/.cursor/mcp.json · Windsurf: its MCP settings · Package: miromiro-mcp on npm.

← PreviousAgent Quickstart Next →Code