# miromiro [Health: Active]

**Category:** 🎯 Marketing  
**Repository:** https://github.com/SoraiaBarroso/miromiro-mcp  
**GitHub Stars:** 0  
**npm Downloads (last month):** 1176  
**Views:** 1  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/miromiro

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

## Tools
Capabilities this server exposes over MCP:

- **extract_code** — Use when the user asks to rebuild, clone, copy, port, restyle or 'make it look like' part of a real website, or wants a site's section as Tailwind, HTML+CSS, React (JSX) or Vue. Give it the URL and, when the user named a part of the page, section (hero, header, footer, pricing, features, testimonials, faq, cta) - never invent a CSS selector. With neither, it auto-detects the hero; every call also returns `sections`, each other extractable section with a label and a ready selector for a follow-up call. Returns a self-contained component with the page's real resolved styles (true colors, fonts, spacing, copy) plus the tokens and assets it uses, so you adapt real values instead of estimating from a screenshot. For jsx/vue, repeated structures collapse into a data array rendered with .map()/v-for; ::before/::after come back as real elements; @keyframes ship in the css field. The `theme` field says which theme the code actually is - sites with a prefers-color-scheme dark variant return the light branch unless you pass theme='dark'; say which you returned. Not for: whole-page scraping, page text, or sites that need a login. Reads static HTML/CSS by default; if the result is thin or carries a `hint`, call again with render=true (+5 credits).
- **extract_brand** — Use when the user wants a site's brand: its colors, fonts, logo, theme or social links - 'what colors does stripe use', 'match this brand', 'build something in the style of X'. Returns role colors (primary, accent, background, text) as hex with human-readable names, the wider palette, fonts by role, logo candidates, social profiles, dark/light theme, and a 0-1 confidence score with `signals` explaining where the colors came from: read signals.explanation and tell the user whether they were declared by the site ('css-var'/'theme-color') or inferred from usage frequency ('usage', a guess) - never present inferred colors as the official palette. Not for: markup or layout (use extract_code) or the full token list (use extract_design_tokens).
- **extract_design_tokens** — Use when the user wants a site's complete token system - every color, font family, size, weight, spacing value, radius, shadow, line height, gradient and breakpoint with usage counts - or a paste-ready :root block (format='css'), tailwind.config (format='tailwind') or W3C Design Tokens file (format='dtcg', for Style Dictionary / Figma variables). Returns values and counts only, not layout or which element uses what: if the user asked to rebuild or clone a section, use extract_code, which returns the markup with the values in place. A site shipping light and dark themes returns the union of both (see colorSchemes) - pick colors by role, not by frequency, and use extract_code with theme=dark for one theme on its own. Not for: a short brand summary (use extract_brand).
- **extract_assets** — Use when the user wants the images from a page - photos, illustrations, backgrounds, favicon, social image - as resolved URLs tagged by source (img, srcset, picture, CSS background, favicon, og). Not for: icons and vector logos (use extract_svgs) or fonts (use extract_fonts). If images are mounted by JavaScript, call again with render=true (+5 credits).
- **extract_svgs** — Use when the user wants a site's icons or vector logos: inline SVGs as paste-ready markup plus external .svg file URLs. Not for: raster images (use extract_assets). If icons are mounted by JavaScript, call again with render=true (+5 credits).
- **extract_fonts** — Use when the user asks which fonts a site uses or wants to match its typography: every @font-face file with family/weight/style/format, Google Fonts links and preloads, grouped per family in `families` (pass fields='families' for just that). On a type-foundry site the families served are demo cuts (subset, features stripped), flagged demo:true with a note - pass that on, they are not the usable typeface. Not for: colors (use extract_brand) or code (use extract_code).
- **extract_lottie** — Use when the user wants a site's Lottie or animation JSON files. Most Lotties are injected at runtime, so pass render=true (+5 credits) when the static call finds none.
- **extract_videos** — Use when the user wants the videos on a page: <video>/<source> files, og:video, YouTube/Vimeo/Wistia/Loom embeds and direct video links, each tagged by source with a poster when declared. `source: "embed"` is a player page, not a downloadable file. Most players mount with JavaScript: if the result is thin or empty, call again with render=true (+5 credits).
- **extract_audio** — Use when the user wants the audio files on a page: <audio>/<source> files, og:audio, podcast enclosures and download links, each tagged by source. If a JavaScript player mounts the audio at runtime, call again with render=true (+5 credits).

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

**Requires environment variables:** `MIROMIRO_API_KEY` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## 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. 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`:

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

Obtain a key from the MiroMiro API dashboard.

## 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.

_Full upstream README: https://allmcps.com/mcp/miromiro/readme_