{
  "markdown": "# miromiro-mcp\n\n[![npm version](https://img.shields.io/npm/v/miromiro-mcp)](https://www.npmjs.com/package/miromiro-mcp)\n[![MIT license](https://img.shields.io/badge/license-MIT-blue)](./LICENSE)\n\nMCP server for the [MiroMiro](https://miromiro.app/api) 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.\n\nWorks with Claude (web, desktop, Claude Code), ChatGPT, Cursor, Windsurf, Codex, and any MCP client.\n\n## Claude Code plugin\n\nInstall as a plugin to get the tools plus three skills that teach Claude when to reach for\neach one (`clone-section`, `match-brand`, `extract-assets`):\n\n```bash\nclaude plugin marketplace add anthropics/claude-plugins-community\nclaude plugin install miromiro@claude-community\n```\n\nThe plugin uses the remote server, so there is nothing to install and no key to paste - on\nfirst use it opens a one-click MiroMiro sign-in that links a free account (300 credits/month,\nno card).\n\n## Quick start: remote server (nothing to install)\n\nA hosted server lives at:\n\n```\nhttps://miromiro.app/mcp\n```\n\nPaste 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).\n\n- **Claude (web or desktop):** Settings → Connectors → Add custom connector → paste the URL. Or use the [one-click install](https://miromiro.app/api/mcp).\n- **ChatGPT:** Settings → Security and login → enable Developer mode, then add the URL as a connector (authentication: OAuth).\n- **Cursor (remote):** add `{ \"mcpServers\": { \"miromiro\": { \"url\": \"https://miromiro.app/mcp\" } } }` to `~/.cursor/mcp.json`.\n- **Raw API key instead of OAuth:** append `?access_key=mm_live_...` to the URL, or send it as an `Authorization: Bearer` header.\n\n## Local server (npm)\n\nPrefer 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:\n\n**Cursor** (`~/.cursor/mcp.json`) / **Windsurf** (Settings → MCP):\n\n```json\n{\n  \"mcpServers\": {\n    \"miromiro\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"miromiro-mcp\"],\n      \"env\": { \"MIROMIRO_API_KEY\": \"mm_live_your_key\" }\n    }\n  }\n}\n```\n\n**Claude Code** (run in your terminal, not inside a `claude` session):\n\n```bash\nclaude mcp add miromiro -s user \\\n  --env MIROMIRO_API_KEY=mm_live_your_key \\\n  -- npx -y miromiro-mcp\n```\n\n## Tools\n\n| Tool | What it returns | Credits |\n|---|---|---|\n| `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 | 25 |\n| `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 the colors came from (declared tokens vs inferred) | 15 |\n| `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) | 10 |\n| `extract_fonts` | Every font file and family the site loads, with weights, formats, and file URLs | 5 |\n| `extract_videos` | Video files, `og:video`, and player embeds (YouTube, Vimeo, Wistia, Loom), tagged by source | 1 |\n| `extract_audio` | Audio files, `og:audio`, and podcast enclosures, tagged by source | 1 |\n| `extract_lottie` | Lottie animation JSON files declared in the page | 3 |\n| `extract_svgs` | Inline SVG code (sanitized, paste-ready) plus external SVG file URLs | 1 |\n| `extract_assets` | Every image URL on a page, tagged by source, with alt text | 1 |\n\nAll tools are read-only and retry-safe. Identical calls within 24 hours are served from cache for free, and failed calls are never billed.\n\n### Asking for a part of the page by name\n\n`extract_code` takes `section` - one of `hero`, `header`, `footer`, `pricing`, `features`, `testimonials`, `faq`, `cta` - so the agent never has to invent a CSS selector for a page it cannot see. Every result also lists the page's other `sections` with ready selectors for follow-up calls. A selector or section that matches nothing falls back to the hero with a `note` saying what the page does have, instead of a dead-end 404.\n\n### Prompts (slash commands)\n\nThe server exposes three MCP prompts, which clients surface before the first call - Claude Code as `/mcp__miromiro__clone_section`, `/mcp__miromiro__brand_kit` and `/mcp__miromiro__design_tokens`, VS Code as `/miromiro.<name>`, Cursor in its prompt menu:\n\n| Prompt | Arguments | What it does |\n|---|---|---|\n| `clone_section` | `url`, `section?`, `framework?` | Rebuild a section of a live site as paste-ready code, with its real values, and list the other sections |\n| `brand_kit` | `url` | The brand colors, fonts, logo and socials, explained (declared vs inferred) |\n| `design_tokens` | `url`, `format?` | The complete token system as CSS, Tailwind, DTCG or JSON, with a short summary |\n\n### Controlling output size (remote server)\n\nRemote results are trimmed by default so a big page cannot flood the chat context, and every trimmed response says exactly what was dropped. Two optional arguments loosen it per call:\n\n- `response_format: 'concise' | 'detailed'` - the one-word knob: `concise` keeps lists to 10 entries for a chat answer, `detailed` returns everything the tool has\n- `limit` (up to 200) - raise the item cap: \"give me 80 SVGs, not 20\"\n- `full_output: true` - complete long strings, like entire inline SVG markup\n\nGenerated code is never trimmed. Results stop at roughly 20k tokens (25k for `extract_code`) so they fit the tool-result cap of Claude Code, Claude Desktop and Cursor, and the `truncation_note` says how many tokens were cut and which argument brings them back.\n\nThe REST API and this local npm server always return everything untrimmed, so `limit` and\n`full_output` apply to the remote server only. Every tool on both servers accepts\n`render: true` (paid API plans and credit packs only - a free account gets `402 render_requires_plan` and nothing runs), plus two more shared arguments:\n\n- `fresh: true` - skip the 24-hour cache and re-extract the live page (charged normally); use when the site just changed\n- `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 it to the user to verify an extraction. Pass `'full'` instead of `true` for the entire page height.\n\n## Examples\n\n> \"Rebuild stripe.com's pricing section in React\"\n\nThe agent calls `extract_code` with the URL, gets the section's real markup, colors, fonts, and spacing, and adapts actual values instead of guessing.\n\nExtraction returns a page's light styles by default, so a site you know as dark comes back light unless you ask otherwise:\n\n> \"Rebuild linear.app's pricing card in its dark theme\"\n\nThe agent passes `theme: \"dark\"` and the page's `prefers-color-scheme: dark` rules and custom properties become the component itself. Every result also carries a `theme` field saying which one you actually got. Sites that switch themes with a JavaScript class toggle cannot be selected this way - you get the page default plus a hint saying so.\n\n> \"Build a dashboard in the style of linear.app\"\n\nThe agent calls `extract_brand` and `extract_design_tokens`, gets Linear's real colors, fonts, and spacing scale, and builds to match.\n\n> \"What fonts does apple.com use?\"\n\nThe agent calls `extract_fonts` and returns every family with its font file URLs and weights.\n\n## Notes\n\n- The API reads static HTML and resolves the full CSS cascade by default, so a fully client-rendered app may return little for images, video, audio and Lottie (tokens, fonts, brand, and code come from CSS and are unaffected). Pass `render: true` on any remote-server tool to run the page in a real browser first so its JavaScript executes (+5 credits). Rendering is included in the paid API plans and credit packs, not in the free account: a free account gets `402 render_requires_plan` before anything runs or is charged.\n- Every result carries `usage` with the credits left this month. If the account holds a credit pack (one-off credits that never expire, bought at https://miromiro.app/api/pricing), `usage.packCredits` is the pack balance left; packs are drawn after the monthly credits, so a free account with a pack keeps working past its 300 credits.\n- Respect the sites you extract from: check their terms before reusing assets commercially.\n\n## Links\n\n[API docs](https://miromiro.app/api/docs) · [Playground (no account)](https://miromiro.app/api/demo) · [Pricing](https://miromiro.app/api/pricing) · [Changelog](https://miromiro.app/api/changelog) · [Connect page](https://miromiro.app/api/mcp)\n\nMIT © [MiroMiro](https://miromiro.app)\n",
  "bytes": 8958,
  "sha": "9a55c34703ac2f5c1c743c44f1d5ef5dd45e1ff4a4226fb0a8bd7780d0ce24dd",
  "repo_slug": "soraiabarroso/miromiro-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_app_miromiro_miromiro_aa1c93b5/readme"
}