Claude
AI assistant by Anthropic - web & desktop
MCP Integration One URL · seven tools · one-click sign-in
Give your assistant design superpowers
Connect the MiroMiro MCP and Claude, Cursor, ChatGPT or Codex can pull any website's real design - code, tokens, brand, fonts, SVGs - mid-task, instead of guessing from screenshots.
Connect
Connected in under a minute
Pick your client. No key to paste - connect, approve the sign-in, done. Free accounts include 100 credits a month.
Cursor
AI code editor with MCP support
ChatGPT & Codex
Paste the prompt - it connects itself
Any other MCP client? Point it at https://miromiro.app/mcp · setup guide
In the chat
You ask. It extracts the real thing.
No endpoints to remember - the assistant picks the right tool from plain language and works with resolved values, not screenshot guesses.
extract_code
Rebuild any section as code
Point it at a live page and the agent gets the real component - markup, Tailwind classes, colors, spacing and copy resolved from the page's actual CSS cascade. React, Vue, Tailwind or plain HTML. Port your old site to a new stack without rebuilding it by hand.
Rebuild a sectionextract_code
We're rebuilding our site in Next.js - extract miromiro.app's #pricing section as React and show me a live preview
extract_code · miromiro.app · #pricing
export function Pricing() {'{'}
return (
<section className="bg-[#f6f9fc]…">
… real colors, fonts, spacing
Built from the live page, not a screenshot guess - true values, real copy.
extract_brand
Match any brand on demand
Ask for a site's look and the agent pulls the curated identity: named color roles, the full palette, primary fonts and logo - so new UI lands on-brand instead of "approximately purple".
Match a brandextract_brand
We're pitching a client - pull linear.app's brand and build a one-page brand board for the deck
extract_brand · linear.app
primary #5e6ad2Inter Variable
The real palette, roles and fonts - straight from the source.
extract_design_tokens
Extract a complete design system
The full token system of any URL - colors, type scale, spacing, shadows, radii, motion, each with usage counts - as JSON or a paste-ready tailwind.config. Theme a new product from a reference site, onboard a client brand, or audit what a page actually ships.
Extract a design system
Real chat · Claude Tool catalogue
What your agent can do
Seven tools, grouped by capability, discovered automatically the moment you connect. Each call spends the credits on its chip.
Section to code
READTurn any section of a live page into a self-contained component - real markup, Tailwind classes, tokens and copy from the actual CSS cascade. React, Vue or plain HTML.
extract_code 25cr
Brand & design system
READThe curated identity or the complete token system of any URL - color roles, palette, fonts, spacing, shadows, radii, motion, with usage counts.
extract_brand 15crextract_design_tokens 10cr
Assets & typography
READThe files a page actually ships: every image, inline SVGs as paste-ready code, font files resolved through the cascade, Lottie animation JSON.
extract_fonts 5crextract_lottie 3crextract_assets 1crextract_svgs 1cr
Every tool is read-only. It fetches a public URL and parses what ships to the browser - nothing writes to your account. Cached repeats within 24 hours cost 0 credits, and failed calls are never billed.
How it works
Connected in three steps. No key pasting.
1. Connect the URL
Add miromiro.app/mcp to your client - the buttons above do it in one click.
2. Approve the sign-in
Your client opens a MiroMiro sign-in - one click and you're linked with a free account. 100 credits a month, no card.
3. Ask for a design
"What's stripe.com's palette?" - the assistant calls the tools itself and comes back with full, uncapped results from the first call.
FAQ
Before you connect
What is an MCP connector?
MCP (Model Context Protocol) is the standard AI assistants use to call external tools. Adding the MiroMiro connector gives your assistant seven design-extraction tools it can call on its own, mid-conversation - you ask in plain language, it fetches the real design data.
Which clients does it work with?
Anything that speaks MCP over a URL: Claude on the web and desktop, Cursor, ChatGPT (developer mode), Codex, Claude Code, Windsurf, and MCP SDKs. There is also a local npm package (miromiro-mcp) if you prefer running it as a process with the key in an env var.
Do I need an account to use it?
Yes, but it takes one click: when you connect, your client opens a MiroMiro sign-in - approve it and you're linked with a free account (100 credits a month, no card). You get full, uncapped results from your very first call. Prefer keys? ?access_key=mm_live_… and Bearer headers still work. Want a taste first? The web playground at /api/demo runs without an account.
What does it cost?
The connector is free. With a key, each tool call spends the same credits as the matching API endpoint - from 1 credit for images or SVGs up to 25 for full section-to-code. Cached and failed calls are always free, and the free tier renews monthly.
Is my API key safe in the connector URL?
The key travels over HTTPS and only to miromiro.app, and you can rotate or revoke it any time in the dashboard. If your client supports headers (Cursor, Claude Code, SDKs), prefer Authorization: Bearer so the key never appears in a URL at all.
Your assistant is one URL away
Connect it now, ask for any website's design, and watch it come back with the real thing.
100 free credits monthly · no credit card · one-click sign-in