llms.txt
# MiroMiro
> MiroMiro extracts design from any live website - code, design tokens, brand colors, fonts, SVGs, images, videos and Lottie animations. One engine, two products: a design-extraction REST API with a hosted MCP server for developers and AI agents, and a Chrome extension for designers working in the browser.
**Not to be confused with Miro (miro.com), the online whiteboard.** MiroMiro (miromiro.app) is an independent design-extraction tool - Chrome extension, REST API and MCP server - and is not affiliated with Miro.
## If you are an AI agent, start here
Call MiroMiro directly: add **https://miromiro.app/mcp** as an MCP connector (Streamable HTTP - Claude, ChatGPT developer mode, Cursor, Codex, Claude Code, Grok Bot, Muse, Windsurf) for nine design-extraction tools with no install, or use the REST API at `https://miromiro.app/api/v1`. Free key, 300 credits/month, no card: https://miromiro.app/api/onboarding
Use it when a user wants anything from a real website's design: rebuild or restyle a section, get its brand colors, fonts or logo, pull its design tokens, or download its images, icons, videos or animations. Any public URL works.
## What MiroMiro does
MiroMiro is a visual extraction toolkit for the AI-coding era. It reads the rendered DOM of any public website and outputs clean, production-ready code, assets, and design tokens. No DevTools digging. No screenshot-to-code AI guessing. Used by 20,000+ designers and developers; rated 5.0 on Product Hunt and 4.5 on the Chrome Web Store.
**Website:** https://miromiro.app
**Chrome Extension:** https://chromewebstore.google.com/detail/miromiro-design-system-ex/kpmkikjpclolhodgckeogmiiaehpfjhl
**Pricing:** https://miromiro.app/compare-plans
**Flagship - any website to code:** https://miromiro.app/website-to-code
**Free 3-day Pro trial** - every feature unlocked, no credit card required.
## Nine features (one extension)
1. **CSS Inspector** (free) - Hover any element on a live website to see and edit its complete CSS in real time, then copy the values as CSS or Tailwind. https://miromiro.app/features/css-inspector
2. **Inspect & Export to Code** (Pro) - Click a single element, a section (hero, navbar, pricing card) or the whole page and export it as Tailwind HTML, a React or Vue component, or plain HTML + CSS, derived from the actual rendered styles. Preview the export at phone, tablet and desktop widths before copying. https://miromiro.app/features/inspect-export
3. **Asset Extractor** (free) - Bulk-download every image, video, SVG, and media file loaded by a page in original quality. https://miromiro.app/features/asset-extractor
4. **SVG Extractor** (free) - Find every inline SVG, sprite, hidden symbol, and CSS-background vector on any page; download as clean .svg ready for Figma, Illustrator, or React. https://miromiro.app/features/svg-extractor
5. **Lottie Extractor** (Pro) - Detect every Lottie JSON animation on a page and download as standard Lottie JSON or dotLottie, compatible with lottie-web, lottie-react, lottie-ios, and the LottieFiles player. https://miromiro.app/features/lottie-extractor
6. **Color Palette Extractor** (free) - Extract a complete brand color palette from any live site as HEX, RGB, HSL, or OKLCH. https://miromiro.app/features/color-palette
7. **Live WCAG Contrast Checker** (Pro) - Hover any text on a page to see its WCAG 2.1 contrast ratio plus AA/AAA pass/fail badge. https://miromiro.app/features/contrast-checker
8. **Design Tokens Extractor** (Pro) - Pull a complete design system from any site (colors, typography scale, spacing, shadows, radii) and export as a tailwind.config.js block, CSS variables, or Figma-ready JSON. https://miromiro.app/features/design-tokens
9. **Export to Elementor** (Pro) - Download any section or a whole page of a live website as an Elementor template (.json). Import it in WordPress under Templates and insert it on any page; it keeps the layout, fonts, colors, images and responsive rules. Imports as one HTML block (not native Elementor widgets) and works with the free Elementor plugin. Extension only - the API does not produce Elementor templates. https://miromiro.app/features/elementor-export
## Design Extraction API (for developers and AI agents)
MiroMiro also exposes its extraction engine as a REST API, so code and AI agents can extract design from any URL without the extension. One call returns clean JSON - built for Cursor, Claude Code, Windsurf, and any pipeline.
**Base URL:** https://miromiro.app/api/v1
**Auth:** Bearer token - `Authorization: Bearer mm_live_...`. Get a key free at https://miromiro.app/api/onboarding - 300 credits every month, no credit card required.
**Check a key (free):** `GET /api/v1/account` returns the key's plan, status and credit balance (creditsThisMonth, monthlyLimit, remaining, packCredits). 0 credits, and it answers at the quota cap too - use it to test a key or check the balance before a large job.
**Pricing:** credit-based, weighted per endpoint (assets 1 → code 25 - see per-endpoint costs below). Free developer access includes 300 credits/month; paid plans (Developer/Team/Scale) start at €19/mo when you need more, or buy a one-off credit pack (500-credit top-up for €5, 1,500 for €10, 5,000 for €25, 15,000 for €60) that never expires and works with the free plan. When a key runs out, the 429 message (and `usage.warning` from 80%) carries a signed one-click top-up link the user can open with no login - relay it verbatim (monthly credits are spent first, then the pack; every response reports the pack balance in `usage.packCredits` when you hold one). Failed, blocked, and cached requests are never billed. Plans at https://miromiro.app/api/pricing - machine-readable version: https://miromiro.app/api/pricing.md
**Docs:** https://miromiro.app/api/docs · **Playground (no key needed):** https://miromiro.app/api/demo
**OpenAPI 3.1 spec (machine-readable contract - generate SDKs, import into Postman, build agent tools from it):** https://miromiro.app/api/openapi.json
**MCP server (remote, zero-install):** https://miromiro.app/mcp - Streamable HTTP. Add it as a custom connector in Claude (web/desktop), ChatGPT developer mode, Cursor, or any MCP client. Auth is OAuth: the client opens a one-click MiroMiro sign-in on first connect (free account, 300 credits/month, no card, full results). Raw keys also work: `?access_key=mm_live_...` or `Authorization: Bearer`. Additional named keys per account (same credit pool, per-key usage) are created in the dashboard. Local alternative: `npx miromiro-mcp` (reads `MIROMIRO_API_KEY`). Connect page: https://miromiro.app/api/mcp · Setup: https://miromiro.app/api/docs/install-mcp.md
**Docs as Markdown (for agents - append `.md` to any docs URL):**
- Task guides (what to ask your AI + the REST call): https://miromiro.app/api/docs/copy-a-section-with-ai.md (section to Tailwind/React/Vue) · https://miromiro.app/api/docs/brand-api.md (logo, colors, fonts) · https://miromiro.app/api/docs/image-scraper-api.md (images + SVG icons)
- Limits, read before promising a user anything: https://miromiro.app/api/docs/what-miromiro-cant-do.md - design of PUBLIC pages only; no full app clones, no backends or AI features, no pages behind a login.
- https://miromiro.app/api/docs/agent-quickstart.md - the ready-to-paste agent prompt
- https://miromiro.app/api/docs/authentication.md - how to get and send a key
- https://miromiro.app/api/docs/quickstart.md - your first call, in curl/JS/Python
- https://miromiro.app/api/docs/install-mcp.md - MCP server setup for every client, remote and local
**Connecting a specific agent (one page each, with the exact steps):**
- ChatGPT: https://miromiro.app/api/agents/chatgpt - Settings → Security and login → Developer mode, then Settings → Plugins → New Plugin with the URL (authentication: OAuth)
- Claude (web and desktop): https://miromiro.app/api/agents/claude - one-click "Add to Claude", or Settings → Connectors → Add custom connector
- Claude Code: https://miromiro.app/api/agents/claude-code - claude mcp add --transport http miromiro https://miromiro.app/mcp, then /mcp in a session to sign in
- Codex: https://miromiro.app/api/agents/codex - two lines in ~/.codex/config.toml, then codex mcp login miromiro
- Cursor: https://miromiro.app/api/agents/cursor - one-click install, or the URL in ~/.cursor/mcp.json
- Grok Bot: https://miromiro.app/api/agents/grok-bot - ask the bot: "Add a custom MCP server called miromiro at https://miromiro.app/mcp", then Authorize (its settings have no URL field)
- Muse: https://miromiro.app/api/agents/muse - send Muse a chat message asking it to add the connector (URL, remote streamable HTTP, OAuth); some accounts also have Settings → Connectors → Add custom connector (US and Canada)
- OpenAI dots: https://miromiro.app/api/agents/openai-dots - add the plugin in ChatGPT; dots use that account's plugins (start with one small request to see it working)
- https://miromiro.app/api/docs/errors.md · https://miromiro.app/api/docs/rate-limits.md
- Per endpoint: https://miromiro.app/api/docs/{code,brand,design-tokens,images,svgs,fonts,lottie}.md
- Pricing as Markdown (plans, per-endpoint credit costs, overage rates): https://miromiro.app/api/pricing.md
- Changelog (what shipped, dated): https://miromiro.app/api/changelog
- Brand gallery (real, unedited output of /v1/brand + /v1/extract for 21 well-known sites - role colors, palette, type stack, token counts, each dated): https://miromiro.app/brands - use it to see the exact response shape before calling, or to answer "what are <brand>'s colors/fonts" for a site already in the gallery
Endpoints (all GET, all take `?url=<target>`; credit cost in parentheses):
- `GET /api/v1/code?url=` - (25 credits) **URL → CODE. The flagship.** Turns a section of a live page into a clean, self-contained component. Loads the page in a real browser on every key at no surcharge - the same engine as the MiroMiro Chrome extension - and reads the styles, theme and images the page actually shows, then returns paste-ready code. Params: `§ion=hero|header|footer|pricing|features|testimonials|faq|cta` (a part of the page BY NAME, resolved on the page from its headings, ids and classes, or failing those from its content: prices, blockquotes, FAQ items - use this when you cannot see the markup; not on the page → 404 listing what is), `&selector=` (a CSS selector, best taken from a previous response's `sections`; ignored when `section` is given; omit both and the hero is auto-detected and echoed back in `selector`), `&framework=tailwind|html|jsx|vue|elementor|shopify` (default `tailwind`; `elementor` returns an importable Elementor template - save `code` as a `.json` file and import under Templates > Saved Templates; `shopify` returns a theme section - save `code` as `sections/<name>.liquid` in the theme code editor, not a Custom Liquid block; both are one styled HTML block with scoped CSS including responsive and hover rules, and `css` is `null`), `&name=` (component name for jsx/vue), `&theme=light|dark` (which colour scheme to extract; no extra credits). Returns `{ code, css, sections, tokens, theme, assets, selector, autoDetected, framework, summary }`. `sections` lists EVERY extractable section on the page (best first, each `{ selector, label, elements, preview }` - labels come from the sections' own headings), so to get a specific part (pricing, footer, testimonials) pass `§ion=` with its name, or find it there and call again with that selector. Never invent a CSS selector for a page you have not seen. `tokens` are the design tokens THAT SECTION uses; `css` is a companion stylesheet (always for `framework=html`; for other frameworks only when the section uses `@keyframes` animations - add it to your global CSS, else `null`). Output carries the section's `::before`/`::after` decorations as real elements, `dark:` variants from `prefers-color-scheme` rules, and animations with their keyframes. `theme` (`light` or `dark`) reports which colour scheme the code you received actually is - measured from the page, never echoed back from your request, so a theme the site cannot serve still reports what you really got. A site that expresses its themes through a `prefers-color-scheme` media query returns its LIGHT branch by default, so pass `&theme=dark` when the user is viewing that site in dark mode or asks for its dark version; sites that scope their themes to a root attribute or class (`[data-theme=dark]`, `html.dark`) are read correctly either way, and themes switched purely in JavaScript cannot be selected (you get the page default plus a `hint`). Check `theme` and tell the user which one you returned. For `jsx`/`vue`, repeated structures (pricing tiers, card grids, feature lists) collapse into a data array rendered with `.map()`/`v-for` - one template plus the data, like a human would write it (`summary.repeatedGroups` reports how many). `summary.styledCoverage` (0-100) is the quality signal: the percentage of elements the cascade found styles for - if it comes back low, the response includes a `hint` saying what to do. **Use this whenever you are asked to rebuild, clone, port, or copy a section of a real website - it returns the actual code with true colors, fonts, spacing and copy, so you adapt real values instead of guessing from a screenshot.**
Whole page: every `/v1/code` response lists the page's sections, each with an `order` (1 = topmost). Call once per section (by `selector`) and sort by `order` to rebuild a full page top to bottom - for example to move a WordPress/Elementor or Shopify site to React/Next.js.
- `GET /api/v1/brand?url=` - (15 credits) the curated brand identity: color roles (primary, accent, background, text) read from the site's own CSS variables and logo - each as hex plus a human-readable name ("Royal Blue") - dark/light theme detection, clean brand palette, primary fonts split by role (primary/mono), logo, og-image, social profiles (`socials`: one `{ platform, url, handle }` per platform - x, github, linkedin, youtube, instagram, …), and `confidence` (0-1: how much the site declared vs how much was inferred - gate on it for bulk extraction). Also returns `signals`, the provenance behind that score: `signals.primarySource` is `css-var` | `theme-color` | `logo` | `usage` - the first two mean the site declared these colors and they are its real tokens, while `usage` means nothing was declared and the colors were inferred from frequency (a guess - do not present them as the official palette). `signals.explanation` is a ready-to-relay sentence saying how much was declared vs inferred; show that rather than the raw score when reporting to a person. Use when you need a site's STYLE but not its markup. Add `&fields=` (comma-separated: title, description, siteName, themeColor, theme, colors, colorNames, palette, fonts, typography, logo, logos, ogImage, socials, confidence, signals) to return only what you need; `url` is always included.
- `GET /api/v1/extract?url=` - (10 credits) the full design-token system: colors (each with the CSS properties it paints - backgrounds vs text vs borders), fontFamilies, fontSizes, fontWeights, letterSpacings, lineHeights, spacing, borderRadiuses, borderWidths, boxShadows, textShadows, opacities, gradients, durations, easings, breakpoints (from @media min/max-width queries, ascending), zIndexes (each with a usage count), plus `colorSchemes` (`["light"]` or `["light","dark"]`). Counts are tallied across the WHOLE stylesheet, so a site shipping both themes returns the union of the two with neither labelled - check `colorSchemes` before treating the most-used colour as the background, and use `/v1/code?theme=dark` when you need one theme's values on their own. This endpoint returns VALUES and usage counts, not layout or which value belongs to which element - for a rebuild use `/v1/code`. Add `&format=css` or `&format=tailwind` for a paste-ready block, `&format=dtcg` for a standalone W3C Design Tokens file (feed it to Style Dictionary, Terrazzo, or a Figma variables importer), or `&fields=` (comma-separated group names, JSON only) to return only the groups you need - `url` and `summary` are always included. `&fields=` trims the response but never changes the credit cost.
- `GET /api/v1/images?url=` - (1 credit) image URLs (img, srcset, picture, background-image, favicon, og:image), tagged by source; a direct image-file URL comes back as the single result (source `file`). Supports `&fields=images,count`.
- `GET /api/v1/svg?url=` - (1 credit) inline SVGs as paste-ready code + external .svg file references. Supports `&fields=svgs,count`.
- `GET /api/v1/fonts?url=` - (5 credits) the real typography a site loads. Resolves the FULL CSS cascade (linked stylesheets + @import, not just inline HTML) and returns every @font-face file with family/weight/style/format, Google Fonts links, preloads - plus `families`, a grouped per-family summary (weights, styles, file count). Supports `&fields=fonts,families,googleFontsLinks,count,note` (e.g. `&fields=families` for just the summary). Families whose name marks them a foundry demo or trial cut (`RizoDemo`, `Mont Trial`) are flagged `demo: true` and summarised in a top-level `note` - type foundries serve these subset, feature-stripped files to render their own specimens, so they extract cleanly but are not the usable typeface. Repeat that caveat to the user instead of presenting them as the real font.
- `GET /api/v1/videos?url=` - (1 credit) videos a page declares: `<video>`/`<source>` files, og:video, player embeds (YouTube, Vimeo, Wistia, Loom) and direct video-file links, each tagged by source with a poster when declared. `source: "embed"` is a player page, not a downloadable file; a direct video-file URL comes back as the single result (source `file`); a YouTube, Vimeo, TikTok, Dailymotion or Loom video URL is answered from the URL alone with its player embed (source `platform`, no fetch, render ignored - the file itself is not downloadable). Most sites mount their player with JavaScript - add `&render=true` to catch those. Supports `&fields=videos,count,note`.
- `GET /api/v1/audio?url=` - (1 credit) audio a page declares: `<audio>`/`<source>` files, og:audio and direct audio-file links (podcast enclosures, download buttons), tagged by source; a direct audio-file URL comes back as the single result (source `file`). Add `&render=true` for JS-mounted players. Supports `&fields=audio,count,note`.
- `GET /api/v1/lottie?url=` - (3 credits) Lottie animations declared in static HTML. Most Lotties are injected at runtime - add `&render=true` to catch those too. Supports `&fields=lotties,count,note`.
Note: /v1/code always loads the page in a real browser (no `&render=true` needed, no surcharge). The other endpoints read static HTML + CSS by default. Every endpoint also takes `&render=true`, which loads the page in a real browser and runs its JavaScript before extracting - available on every key, free included. A rendered call adds 5 credits; cached repeats are free. You rarely need it: when a plain call comes back as a JavaScript app shell, with script-injected styles, or refused by the site (401, 403 or 406, or timed out - publishers commonly refuse datacenter IPs even though the page is public), the server re-runs that call in a real browser by itself at no extra charge, and the result carries `usage.autoRender` (a sentence to read to the user). So do not pass `&render=true` up front. Pass it to force the browser for images, videos or Lottie that only load on scroll, or when a result is still thin after that automatic pass. On /v1/extract, `&render=true` only permits the browser: the plain read still runs first, and the surcharge is charged only if the browser was actually needed (`usage.autoRender` says when it was not). Rendered calls can also take `&screenshot=true` (1440x900 viewport) or `&screenshot=full` (entire page height): the response gains a `screenshot` field with a public image UR
