Miromiro

What miromiro MCP server does

The miromiro MCP server lets an MCP-compatible agent inspect a live website and use the extracted design information in later work. It connects to the MiroMiro design-extraction API and provides read-only operations for interface reconstruction, brand analysis, token export, and asset discovery.

The server can retrieve a named page section as component code in Tailwind, HTML and CSS, JSX, or Vue. It can also identify brand color roles, palettes, fonts, logos, social profiles, design tokens, font files, videos, audio, Lottie animations, SVGs, and image URLs. Results include source or inference details where the API provides them, such as whether a color came from declared tokens or was inferred.

How it works

Tools accept a website URL and, where relevant, options such as a page section, framework, theme, output format, or rendering mode. extract_code uses named sections including hero, header, footer, pricing, features, testimonials, FAQ, and CTA. Results also expose other detected sections and selectors for follow-up requests.

The default extraction reads static HTML and resolves the CSS cascade. Client-rendered pages may return limited media and animation data unless browser rendering is requested. Rendering costs five credits and is unavailable to free accounts; a free account receives a 402 render_requires_plan response before the request runs. A site that rejects a plain request with 401, 403, or 406 may receive an automatic browser retry a limited number of times.

Remote responses are trimmed by default. response_format, limit, and full_output can increase the returned detail, while generated code is not trimmed. Calls are read-only and retry-safe. Matching requests within 24 hours use the cache without another charge, and failed calls are not billed. The fresh option bypasses that cache.

Setup and configuration

The miromiro MCP server can be used remotely at https://miromiro.app/mcp. Add that URL to a client that accepts remote MCP servers. The first use opens a MiroMiro sign-in flow; the README describes a free account with 300 credits per month and no card. OAuth is supported by the documented ChatGPT connector setup. An API key can instead be supplied as an access_key URL parameter or a Bearer header.

For local stdio use, install and run the npm package through npx:

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

Obtain a key from the MiroMiro API dashboard. The README documents local configuration for Cursor, Windsurf, and Claude Code, as well as remote configuration for Claude, ChatGPT, and Cursor.

Tools and capabilities

• extract_code: Returns a selected page section as paste-ready code plus the tokens used by that section.
• extract_brand: Reports named color roles, palette data, fonts by role, logo information, social profiles, confidence, and extraction signals.
• extract_design_tokens: Exports tokens as CSS, Tailwind, DTCG, or JSON, including usage counts.
• extract_fonts: Lists loaded font families, weights, formats, and file URLs.
• extract_videos and extract_audio: Finds media files, metadata URLs, embeds, and podcast enclosures.
• extract_lottie: Finds Lottie animation JSON files declared by the page.
• extract_svgs and extract_assets: Returns inline or external SVGs and image URLs with source tags and alt text.

Three prompts are also exposed: clone_section, brand_kit, and design_tokens. Clients can surface these prompts to guide the corresponding extraction workflow.

Limitations and notes

Static extraction may not reveal content created only after JavaScript runs. Theme selection supports light or dark CSS rules, but JavaScript class-based theme switches cannot be selected through the documented theme option. Browser rendering, screenshots, and larger remote responses have the stated plan, credit, or output limits. Screenshots require rendering and produce a public URL that remains available for seven days.