1
Click Add to Claude
Claude opens its “add custom connector” window with the name and URL already filled in.
MCP server for AI agents
Copy any website’s design with Claude
One click adds MiroMiro as a connector, and Claude can read any live website: its code, colors, fonts, logos and assets. Ask for a brand board or a rebuilt section and it works from the real values.
- One-click connector
- Web and desktop app
- 300 free credits a month
Setup checked October 2026
How do I connect MiroMiro to Claude?
Sign in once. No API key to copy, nothing to install, and 300 free credits a month.
1Connectabout two minutes
Add MiroMiro to Claude
Connector URL
https://miromiro.app/mcp- 1 Click Add to Claude
- 2 Confirm the connector
- 3 Sign in once
- 4 Ask in plain language
2Ask MiroMiro connected
Then just ask Claude
2
Confirm the connector
Save it. MiroMiro now appears in your connectors list on the web and in the desktop app.
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. Claude calls the right tool on its own and works with what comes back.
What it does
Ask Claude 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 Claude for?
Four requests to start from. Copy one, swap in the site you care about.
Rebuild
Rebuild a section
“Rebuild the pricing section of stripe.com as a React component, and show me a preview.”
extract_code25 creditsBrand
Make a brand board
“Pull linear.app’s brand colors, fonts and logo and lay them out as a brand board.”
extract_brand15 creditsCompare
Compare two sites
“Compare the colors, type scale and corner radius of vercel.com and netlify.com in a table.”
extract_design_tokens10 creditsAssets
Collect the assets
“List every image and SVG icon on our old homepage, with a link to each file.”
extract_assets1 creditWhy connect it
Without it, Claude 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 Claude can call
You never name them. Claude 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 Claude 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. Claude 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 Claude?
The sign-in suits almost everyone. The others are there when you need a key.
WayHowAPI keyBest for
Sign-in Recommended
Click Add to Claude, or paste the URL as a custom connector. Claude opens the sign-in.
No key
Everyone using Claude on the web or desktop
REST API
Call the same nine tools as GET endpoints from your own code.
Key needed
Scripts, backends and CI, with no agent involved
Compared
Is Claude the same as Claude Code?
No. Both come from Anthropic and both use the same MiroMiro server and account, but a connector added in Claude does not appear in Claude Code. Each is set up once.
Claude
Claude Code What it is
A chat app, on the web and desktop
A coding agent in your terminal
How MiroMiro connects
A connector, added in one click
One claude mcp add command
What you get back
An answer in the chat, with a live preview
Files written into your project
Best for
Brand boards, previews, one-off sections
Building UI that matches a reference
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 Claude
Can Claude 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, Claude 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.
Does it work in the desktop app?
Yes. A connector added on claude.ai is available in the Claude desktop app too, on the same account.
Can Claude show me a preview of what it rebuilt?
Yes. Ask it to extract a section and show a live preview, and Claude renders the component it built from the real code.
Claude does not show the MiroMiro tools. What should I check?
Open the tools menu in the chat box and check that MiroMiro is switched on for this conversation. 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?
Claude 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.
