Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code. That is what the miromiro mcp server brings to an AI assistant: the same capability, reachable through the Model Context Protocol rather than a separate app or dashboard.
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.
The server publishes 9 tools. What each one is for:
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 UIextract_brand — Named color roles (primary/accent/background/text), palette, fonts split by role, logo, social profiles, and a 0-1 confidence scoreextract_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 / Figmaextract_fonts — Every font file and family the site loads, with weights, formats, and file URLsextract_videos — Video files, og:video, and player embeds (YouTube, Vimeo, Wistia, Loom), tagged by sourceextract_audio — Audio files, og:audio, and podcast enclosures, tagged by sourceextract_lottie — Lottie animation JSON files declared in the pageextract_svgs — Inline SVG code (sanitized, paste-ready) plus external SVG file URLsextract_assets — Every image URL on a page, tagged by source, with alt textConfiguration is passed through the environment: MIROMIRO_API_KEY. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
Because this one is hosted, setup is mostly authentication — you point your client at the endpoint and approve access. Nothing runs on your machine, so there is no runtime to keep patched.
This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Miromiro's toolset — extract_code, extract_brand, extract_design_tokens and 6 more — is a fair guide to whether it matches your workflow. It is maintained by app.miromiro; worth a glance at recent repository activity before you build anything load-bearing on it.
We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.
| Tool | What it does |
|---|---|
| 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, and a 0-1 confidence score |
| 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 |
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 (300 credits/month, no card).
- **Claude (web or desktop):** Settings → Connectors → Add custom connector → paste the URL. Or use the [one-click install](https://miromiro.app/api/mcp).
- **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](https://miromiro.app/api/dashboard), then:
**Cursor** (`~/.cursor/mcp.json`) / **Windsurf** (Settings → MCP):Configuration as documented by the project. Restart the client after saving.
| Variable | Description | Required |
|---|---|---|
| MIROMIRO_API_KEY | Credential the server authenticates with. | Yes |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.