MCP server for AI agents

Copy any website’s design with Codex

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.

  • Two lines of config
  • Sign-in or API key
  • 300 free credits a month

Setup checked October 2026

How do I connect MiroMiro to Codex?

Sign in once. No API key to copy, nothing to install, and 300 free credits a month.

1Connectabout two minutes

Add MiroMiro to Codex

~/.codex/config.toml
[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.

  1. 1 Add the server
  2. 2 Sign in once
  3. 3 Check it connected
  4. 4 Ask in plain language
2Ask MiroMiro connected

Then just ask Codex

1

Add the server

Paste the two lines into ~/.codex/config.toml. The Codex command line and the IDE extension share this file.

2

Sign in once

Run codex mcp login miromiro. Codex opens the MiroMiro sign-in in your browser. A free account includes 300 credits a month, no card.

3

Check it connected

Run codex mcp list, or type /mcp inside Codex. MiroMiro should be there with its tools.

4

Ask in plain language

Name a website and what you want from it. Codex calls the right tool on its own and works with what comes back.

What it does

Ask Codex 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 Codex 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 credits

Tokens

Check for design drift

“Extract the design tokens of our live site and list where tailwind.config.ts differs.”

extract_design_tokens10 credits

Brand

Theme from a URL

“Read acme.com’s brand and write it into our theme file as CSS variables.”

extract_brand15 credits

Assets

Bring the assets over

“Find the Lottie animation on their landing page and add it to public/animations.”

extract_lottie3 credits
Why connect it

Without it, Codex 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

Seven tools Codex can call

You never name them. Codex 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 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 server
Name
MiroMiro
URL
https://miromiro.app/mcp
Type
Remote MCP server (Streamable HTTP)
Sign-in
OAuth, found automatically. API keys also work.
Tools
Seven, 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

Options

Which way should I connect Codex?

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

Compared

Is Codex the same as ChatGPT?

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

ChatGPT

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

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 Codex

Can Codex 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, 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.

Is there a design MCP server for Codex?

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.

Is it the same setup as ChatGPT?

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.

Which tools does Codex get?

Seven: section to code (including Elementor and Shopify files), brand, design tokens, fonts, images, SVG icons and Lottie animations.

Codex does not show the MiroMiro tools. What should I check?

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.

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?

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.

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.

Connected in two minutes

300 free credits every month. No credit card.

Connect Codex for $0