Cursor1
Click Add to Cursor
Cursor opens and asks to install the MiroMiro server. Or paste the config into ~/.cursor/mcp.json yourself.
MCP server for AI agents
Copy any website’s design with Cursor
One click and Cursor can read any live website from inside your editor. Point it at a reference and it builds with the real component, tokens and assets.
- One-click install
- Sign-in or API key
- 300 free credits a month
Setup checked October 2026
How do I connect MiroMiro to Cursor?
Sign in once. No API key to copy, nothing to install, and 300 free credits a month.
1Connectabout two minutes
Add MiroMiro to Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"miromiro": { "url": "https://miromiro.app/mcp" }
}
}Or paste this into Cursor and let it do the setup
Add the MiroMiro MCP server for me. Add this entry to "mcpServers" in ~/.cursor/mcp.json, keeping what is already there: "miromiro": { "url": "https://miromiro.app/mcp" } Then tell me to switch it on under MCP in Cursor’s settings and sign in.
- 1 Click Add to Cursor
- 2 Check it is on
- 3 Sign in once
- 4 Ask in plain language
2Ask MiroMiro connected
Then just ask Cursor
2
Check it is on
MiroMiro appears under MCP in Cursor’s settings with its tools listed.
3
Sign in once
Your agent opens a MiroMiro sign-in the first time it connects. A free account includes 300 credits a month, no card.
4
Ask in plain language
Name a website and what you want from it. Cursor calls the right tool on its own and works with what comes back.
What it does
Ask Cursor for a website. It comes back with the real thing.
Three things people ask for most. Pick one to watch it happen.
Prompts
What can I ask Cursor for?
Four requests to start from. Copy one, swap in the site you care about.
Rebuild
Match a reference
“Make the hero in src/components/Hero.tsx match the one on linear.app. Keep my copy.”
extract_code25 creditsTokens
Check for design drift
“Extract the design tokens of our live site and list where tailwind.config.ts differs.”
extract_design_tokens10 creditsBrand
Theme from a URL
“Read acme.com’s brand and write it into our theme file as CSS variables.”
extract_brand15 creditsAssets
Bring the assets over
“Find the Lottie animation on their landing page and add it to public/animations.”
extract_lottie3 creditsWhy connect it
Without it, Cursor guesses
A screenshot holds pixels, not values. Same request, two results.
From a screenshot
- Brand color
- #3b82f6 estimated
- Font
- a serif, roughly estimated
- Heading
- 48px estimated
With MiroMiro connected
- Brand color
- #5e6ad2 from the page
- Font
- Inter Variable from the page
- Heading
- 56px from the page
Included
Nine tools Cursor can call
You never name them. Cursor picks the right one from what you ask.
What is the MiroMiro MCP server?
MCP is the standard way to give an AI agent new tools. MiroMiro’s server gives Cursor nine of them, each one reading a live website and returning its real values: the code of a section, the brand, the design tokens, the files.
It is one URL. Cursor discovers the tools when it connects, and there is nothing to keep up to date on your side.
More about the MCP server- Name
- MiroMiro
- URL
- https://miromiro.app/mcp
- Type
- Remote MCP server (Streamable HTTP)
- Sign-in
- OAuth, found automatically. API keys also work.
- Tools
- Nine, discovered on connect
extract_code25 credits
A section as code, or an Elementor / Shopify file
extract_brand15 credits
Color roles, palette, fonts and logo
extract_design_tokens10 credits
Every color, size, spacing and shadow
extract_fonts5 credits
Font families and their files
extract_lottie3 credits
Lottie animation files
extract_assets1 credit
Every image on the page
extract_svgs1 credit
SVG icons as paste-ready code
extract_videos1 credit
Videos the page declares
extract_audio1 credit
Audio files the page declares
Options
Which way should I connect Cursor?
The sign-in suits almost everyone. The others are there when you need a key.
WayHowAPI keyBest for
Sign-in Recommended
Click Add to Cursor, or paste the config. The bare URL signs you in through the browser.
No key
Your own machine
API key
Add a "headers" entry with Authorization: Bearer mm_live_YOUR_KEY next to the URL.
Key needed
Build machines and shared team setups
Local npm package
Run miromiro-mcp as a local process, with the key in an environment variable.
Key needed
Setups that only allow local MCP servers
REST API
Call the same nine tools as GET endpoints from your own code.
Key needed
Scripts, backends and CI, with no agent involved
Good to know
What it reads, and where it stops
Public URLs
Any public page
Whatever a visitor without an account can open. No pages behind a login, no localhost.
8 named sections
Sections by name
Hero, header, footer, pricing, features, testimonials, FAQ or CTA. Every result lists the page’s other sections.
No extra cost
JavaScript sites
Read as HTML and CSS first. When a page needs its scripts, it is re-read in a real browser automatically.
Both themes
Light and dark
A site with a dark variant returns its light version by default. Ask for the dark one and you get that.
0 credits
Repeats are free
Results are kept for 24 hours. Asking again for the same page in that time spends nothing.
0 credits
Failures are free
A site that blocks the request or times out costs no credits. You pay for results only.
FAQ
Questions about MiroMiro in Cursor
Can Cursor clone a website?
Not well on its own: from a screenshot or the page text it estimates the colors, fonts and spacing. With MiroMiro connected, Cursor reads the live page’s real CSS and rebuilds one section at a time as code, with the true values. It is a section you own and restyle, not a pixel copy of a whole site, and behavior such as menus and carousels is not carried over.
Is there a design MCP server for Cursor?
Yes. MiroMiro is a design MCP server that works in Cursor. Figma’s MCP reads Figma files; this one reads any live website and returns its code, design tokens, brand colors, fonts and assets.
Does it work in agent mode?
Yes. In agent mode Cursor decides when to call MiroMiro: say “match the hero on linear.app” and it fetches the real section before it writes code.
Can I keep the key out of the config?
Yes. The bare URL signs you in through the browser, so the config holds no key. If you prefer a key, send it as an Authorization: Bearer header. If Cursor still opens the sign-in, put the key in the URL as ?access_key= instead.
Cursor does not show the MiroMiro tools. What should I check?
Open Cursor’s settings, go to MCP and check that MiroMiro is switched on and lists its tools. If the sign-in window never opened, remove MiroMiro and add it again, then start a new conversation: most clients only load their tools when one begins.
Does it work on sites built with JavaScript?
Yes. MiroMiro reads the page’s HTML and CSS first, which is enough for most sites. When a page only draws itself in the browser, MiroMiro re-reads it in a real browser that runs the page’s scripts, automatically and at no extra cost. Your agent can also ask for the browser up front for 5 extra credits, on any plan.
Which formats can it return?
A section comes back as Tailwind, HTML and CSS, React, Vue, an Elementor template or a Shopify section. Design tokens come back as JSON, CSS variables, a Tailwind config or a W3C design tokens file.
What does it cost?
Connecting is free, and a free account includes 300 credits every month with no card. Each tool call spends credits: 1 for images or SVG icons, 15 for a brand kit, 25 for a section as code. Repeat calls within 24 hours and failed calls are free.
What happens when I run out of credits?
Cursor tells you the monthly credits are used up and the calls stop until they reset, or until you add credits or a plan on the pricing page. Nothing is charged on a free account, ever.
Can it read pages behind a login?
No. It reads public pages the way a visitor without an account would see them. Pages that need a sign-in, and addresses on your own machine such as localhost, are out of reach.
Using a different agent?
Same server, same account. Only the place you paste the URL changes.
