How do I install the miromiro mcp server?

Use a recorded configuration for your client, replace example credential values and paths, and verify the documented runtime. Restart or reconnect the client, then inspect the available tools.

What credentials does it need?

It reads `MIROMIRO_API_KEY` from the environment. Store these in your client's env block or a secrets manager — never commit them to a repository — and grant the narrowest scope that still covers your use case.

SSyncDev

Start a project

Miromiro MCP Server

Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.

Remote serverstreamable-http

What is the Miromiro MCP Server?

Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.

The short version

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.

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Maintainer setup documentation.

Recorded tools

Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.

Tool	What it does
response_format	'concise' \| 'detailed' - the one-word knob: concise keeps lists to 10 entries for a chat answer, detailed returns everything the tool has
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
fresh	true - skip the 24-hour cache and re-extract the live page (charged normally); use when the site just changed
screenshot	true (requires render: true) - the result gains a screenshot field: a public URL of a 1440x900 capture of the page, live for 7 days, at no extra credits - show
extract_code	A section of a live page as a paste-ready component (Tailwind, HTML+CSS, JSX or Vue) plus the tokens it uses - start here to rebuild real UI
extract_brand	Named color roles (primary/accent/background/text), palette, fonts split by role, logo, social profiles, a 0-1 confidence score, and signals explaining where th
extract_design_tokens	Full token system with usage counts; format: css or tailwind for paste-ready output, dtcg for a W3C Design Tokens file (Style Dictionary / Figma variables)
extract_fonts	Every font file and family the site loads, with weights, formats, and file URLs
extract_videos	Video files, og:video, and player embeds (YouTube, Vimeo, Wistia, Loom), tagged by source
extract_audio	Audio files, og:audio, and podcast enclosures, tagged by source
extract_lottie	Lottie animation JSON files declared in the page
extract_svgs	Inline SVG code (sanitized, paste-ready) plus external SVG file URLs
extract_assets	Every image URL on a page, tagged by source, with alt text
Prompt	Arguments
clone_section	url, section?, framework?
brand_kit	url
design_tokens	url, format?

How to install the Miromiro MCP Server

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

From the project documentation. Replace placeholders and example paths before connecting.

Configuration

Variable	Description	Required
MIROMIRO_API_KEY	Declared in the maintainer’s client configuration.	Check documentation

Example prompts to try

“Use Miromiro to extract code.”
“Use Miromiro to extract brand.”
“Use Miromiro to extract design tokens.”

Frequently asked questions

Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code. Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.