Miromiro MCP server
{
"mcpServers": {
"miromiro": {
"command": "npx",
"args": [
"-y",
"miromiro-mcp@latest"
],
"env": {
"MIROMIRO_API_KEY": "<miromiro_api_key>"
}
}
}
}{
"mcpServers": {
"miromiro": {
"command": "npx",
"args": [
"-y",
"miromiro-mcp@latest"
],
"env": {
"MIROMIRO_API_KEY": "<miromiro_api_key>"
}
}
}
}{
"mcpServers": {
"miromiro": {
"command": "npx",
"args": [
"-y",
"miromiro-mcp@latest"
],
"env": {
"MIROMIRO_API_KEY": "<miromiro_api_key>"
}
}
}
}{
"servers": {
"miromiro": {
"command": "npx",
"args": [
"-y",
"miromiro-mcp@latest"
],
"env": {
"MIROMIRO_API_KEY": "${input:miromiro_api_key}"
}
}
},
"inputs": [
{
"id": "miromiro_api_key",
"type": "promptString",
"description": "Miromiro api key",
"password": true
}
]
}{
"mcpServers": {
"miromiro": {
"command": "npx",
"args": [
"-y",
"miromiro-mcp@latest"
],
"env": {
"MIROMIRO_API_KEY": "<miromiro_api_key>"
}
}
}
}file .mcp.json (in your project root)file claude_desktop_config.jsonfile ~/.cursor/mcp.jsonfile .vscode/mcp.jsonfile ~/.codeium/windsurf/mcp_config.jsoninstall npx -y miromiro-mcpversion 0.3.1
What it does
MiroMiro is an MCP server that extracts design information from live websites, including brand colors, fonts, design tokens, SVGs, Lottie animations, and component code. It is for developers and AI agents that need to work with real design values from existing websites instead of guessing from screenshots.
- Extract a section of a live webpage as paste-ready component code with its actual design tokens in Tailwind, HTML+CSS, JSX or Vue.
- Retrieve a website's complete brand information including primary and accent colors, font families, logo, and social profiles with confidence scores.
- Get a design token system in CSS, Tailwind, or W3C DTCG format ready to use in your own project.
Tools this server exposes
| Tool | Does |
|---|---|
| extract_code | Returns a section of a live page as paste-ready component code (Tailwind, HTML+CSS, JSX or Vue) plus the design tokens it uses. |
| extract_brand | Returns named color roles, palette, fonts split by role, logo, social profiles, and confidence scores with signals explaining color sources. |
| extract_design_tokens | Returns the full token system with usage counts in CSS, Tailwind, DTCG, or JSON format. |
| extract_fonts | Returns every font file and family loaded by the site, with weights, formats, and URLs. |
| extract_lottie | Returns Lottie animation JSON files declared in the page. |
| extract_svgs | Returns inline SVG code (sanitized and paste-ready) plus external SVG file URLs. |
| extract_assets | Returns every image URL on a page, tagged by source, with alt text. |
| extract_videos | Returns video files, og:video meta tags, and player embeds (YouTube, Vimeo, Wistia, Loom), tagged by source. |
| extract_audio | Returns audio files, og:audio meta tags, and podcast enclosures, tagged by source. |
Before you enable it
An MCP server runs with whatever access you give it. Start with a development account rather than production, and check which tools the server exposes before you let an agent call them unattended.