Add the server
Paste the two lines into ~/.codex/config.toml. The Codex command line and the IDE extension share this file.
Two lines of config and Codex can read any live website while it codes. It works from the real component, tokens and assets, not a description of them.
Setup checked October 2026
Sign in once. No API key to copy, nothing to install, and 300 free credits a month.
[mcp_servers.miromiro]
url = "https://miromiro.app/mcp"Or paste this into Codex and let it do the setup
Add the MiroMiro MCP server for me. Append this to ~/.codex/config.toml: [mcp_servers.miromiro] url = "https://miromiro.app/mcp" Then tell me to run codex mcp login miromiro to sign in, and list the MiroMiro tools once I have.
Paste the two lines into ~/.codex/config.toml. The Codex command line and the IDE extension share this file.
Run codex mcp login miromiro. Codex opens the MiroMiro sign-in in your browser. A free account includes 300 credits a month, no card.
Run codex mcp list, or type /mcp inside Codex. MiroMiro should be there with its tools.
Name a website and what you want from it. Codex calls the right tool on its own and works with what comes back.
Three things people ask for most. Pick one to watch it happen.
Four requests to start from. Copy one, swap in the site you care about.
Rebuild
“Make the hero in src/components/Hero.tsx match the one on linear.app. Keep my copy.”
extract_code25 creditsTokens
“Extract the design tokens of our live site and list where tailwind.config.ts differs.”
extract_design_tokens10 creditsBrand
“Read acme.com’s brand and write it into our theme file as CSS variables.”
extract_brand15 creditsAssets
“Find the Lottie animation on their landing page and add it to public/animations.”
extract_lottie3 creditsA screenshot holds pixels, not values. Same request, two results.
From a screenshot
With MiroMiro connected
You never name them. Codex picks the right one from what you ask.
MCP is the standard way to give an AI agent new tools. MiroMiro’s server gives Codex seven 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. Codex discovers the tools when it connects, and there is nothing to keep up to date on your side.
More about the MCP serverextract_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
The sign-in suits almost everyone. The others are there when you need a key.
Sign-in Recommended
Paste the two lines into config.toml, then run codex mcp login miromiro to sign in through the browser.
No key
Your own machine
API key
Add bearer_token_env_var = "MIROMIRO_API_KEY" under the URL and set that environment variable to your key.
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
No. Both come from OpenAI and both use the same MiroMiro server and account, but they are set up in different places and suit different work.
Codex
What it is
A coding agent that works in your repository
A chat app, on the web and desktop
How MiroMiro connects
Two lines in ~/.codex/config.toml
A plugin added in Settings
What you get back
Files written into your project
An answer in the chat: code, a board, a file to save
Best for
Building UI that matches a reference
Looking a site up, brand boards, one-off sections
Whatever a visitor without an account can open. No pages behind a login, no localhost.
Hero, header, footer, pricing, features, testimonials, FAQ or CTA. Every result lists the page’s other sections.
Read as HTML and CSS first. When a page needs its scripts, it is re-read in a real browser automatically.
A site with a dark variant returns its light version by default. Ask for the dark one and you get that.
Results are kept for 24 hours. Asking again for the same page in that time spends nothing.
A site that blocks the request or times out costs no credits. You pay for results only.
Not well on its own: from a screenshot or the page text it estimates the colors, fonts and spacing. With MiroMiro connected, Codex 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.
Yes. MiroMiro is a design MCP server that works in Codex. Figma’s MCP reads Figma files; this one reads any live website and returns its code, design tokens, brand colors, fonts and assets.
No. ChatGPT adds MiroMiro as a plugin in its settings; Codex reads it from config.toml and signs in with codex mcp login. Both use the same server URL and the same account.
Seven: section to code (including Elementor and Shopify files), brand, design tokens, fonts, images, SVG icons and Lottie animations.
Run codex mcp list. If MiroMiro is missing, check that the table in config.toml is named [mcp_servers.miromiro]. If it is listed but not signed in, run codex mcp login miromiro. 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.
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.
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.
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.
Codex 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.
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.
Same server, same account. Only the place you paste the URL changes.