GET/v1/code25 credits

Code

Turn any section of a live website into a clean, self-contained component. Point it at a URL and a CSS selector and it resolves the page's real CSS cascade, then returns paste-ready code - Tailwind, plain HTML + CSS, React (JSX) or Vue, or a file to import into Elementor or Shopify - along with the design tokens that section actually uses. Omit the selector and it finds the hero for you.

Give a coding agent a real component to build from instead of a screenshot to guess at.
Rebuild a competitor's pricing section as Tailwind in one call, then restyle it.
Port a section you like into React or Vue without opening devtools.

Parameters

urlrequiredThe page to extract from. With or without protocol (https:// is assumed).

frameworkoptionalThe code you get back. tailwind returns markup with utility classes; html returns markup plus a companion stylesheet; jsx returns a React component; vue returns a single-file component. For jsx and vue, repeated structures (pricing tiers, testimonial cards, feature lists) are collapsed into a data array rendered with .map() / v-for - one template plus the data, the way a human would write it. elementor returns an importable Elementor template: save code as a .json file and import it in WordPress under Templates > Saved Templates > Import. shopify returns a theme section: save code as sections/your-name.liquid, then add it from the theme editor. Use the sections folder in the theme code editor, not a Custom Liquid block (that block is capped at 50 KB and cannot hold the schema). Both builder files hold the section as one styled HTML block (edited as code, not as native widgets or blocks), with its responsive and hover rules as real CSS, scoped to the block so the theme and the section cannot restyle each other. Elements that the source site fades in on scroll are emitted already visible, since its JavaScript does not come along. tailwind (default) · html · jsx · vue · elementor · shopify

sectionoptionalA part of the page by name, for callers that cannot see its markup (AI agents, mostly). MiroMiro finds the matching block on the page itself, from its ids, classes and headings, or failing those from what it contains (prices for pricing, blockquotes for testimonials, expandable items for faq, the last short block with a button for cta). Ignored when selector is given. A page with no such section returns 404 listing the sections it does have. hero · header · footer · pricing · features · testimonials · faq · cta

selectoroptionalThe section to extract, e.g. selector=%23hero or selector=.pricing-card - best taken from a previous response's sections list. Omit both selector and section and MiroMiro auto-detects the page's hero section and tells you which selector it used. A selector that matches nothing returns 404 with the sections that do exist; invalid selector syntax returns 400. any CSS selector

nameoptionalComponent name for the jsx target - the identifier in "export default function ...". Default: ExtractedSection. Ignored by tailwind, html and vue (a Vue SFC names itself by filename). Changing it never re-runs the extraction, so renaming a cached section costs 0 credits. a component name

themeoptionalWhich colour scheme to extract. By default the page's light styles are the component and its @media (prefers-color-scheme: dark) rules ride along as dark: variants. Pass theme=dark to flip that: the dark rules and custom properties become the component itself, so you get the site as people see it in dark mode. Works whether the site expresses its themes as @media (prefers-color-scheme) or as a root attribute or class its CSS is scoped to ([data-theme=dark], html.dark) - both are read from the stylesheet, so the values you get are the ones that theme really uses. Sites that switch themes purely in JavaScript cannot be selected this way: you get the page default plus a hint saying so. No extra credits. light (default) · dark

fieldsoptionalComma-separated list of fields to return (e.g. fields=code,tokens). Omit for the full object. url and summary are always included. Trims the response only - the credit cost is unchanged. see the fields table below

renderoptionalLoad the page in a real browser and run its JavaScript before extracting. Use for client-rendered sites (React, Next, SPAs) where the default static fetch returns little - runtime-injected images, styles, media and Lotties become visible. Slower (a real page load), and adds 5 credits to the call. Cache hits stay free. Available on every key, free included. You rarely need it: when a plain call comes back as a JavaScript app shell, with styles injected by scripts, or refused by the site (401, 403 or 406), the server re-runs that call in the browser by itself at no extra charge and usage.autoRender says so. Pass render=true to force the browser for assets that only load on scroll (lazy images, video, Lottie), for screenshot=true, or when a result is still thin after that automatic pass. On /v1/code and /v1/extract, render=true only permits the browser: the plain read still runs first, and the surcharge is charged only if the browser was actually needed (usage.autoRender says when it was not). true · false (default)

freshoptionalSkip the 24-hour cache and re-extract from the live page. Use it when you know the site just changed (a redeploy, a rebrand) and a cached copy would be stale. The call is charged normally - the extraction really runs - and the fresh result replaces the cached copy for the next caller. Off by default: identical repeat calls within 24 hours are served from cache at 0 credits. true · false (default)

screenshotoptionalRequires render=true. The same real browser that renders the page also captures a screenshot - true for the 1440x900 viewport, full for the entire page height. The response gains a screenshot field with a public image URL that stays live for 7 days. No extra credits beyond the render surcharge. Captured on fresh extractions - a cache hit returns the screenshot stored with the cached result (pass fresh=true to force a new one). true · full · false (default)

fields values

codeThe generated component source, ready to paste. For framework=elementor or shopify, the complete contents of the .json template or .liquid section file.

cssCompanion stylesheet. Always populated for framework=html; for tailwind, jsx and vue only when the section uses @keyframes animations; null for elementor and shopify, whose file contains its CSS.

sectionsEvery extractable section on the page, best first - each { selector, label, elements, preview }. List them, pick one, call again with its selector. Always returned, even when you passed your own selector.

tokensThe design tokens THIS SECTION uses: colors, fontFamilies, fontSizes, spacing, radii, shadows.

themeWhether the captured code reads light or dark, from the backgrounds the cascade resolved.

assetsImages and fonts the section references, as absolute URLs.

selectorThe selector actually used - echoes back the auto-detected one.

sectionThe named section that was resolved, when you asked for one.

autoDetectedtrue when MiroMiro picked the section because you did not pass a selector.

frameworkThe framework the code was generated for.

Build a request

GEThttps://miromiro.app/api/v1/v1/code?url=stripe.com

urlrequired

framework

section

selector

name

theme

fields

Nothing selected returns the full response.

render

fresh

screenshot

Options at their default are left out of the URL - the API assumes them. Auth isn't shown here: send your key as an Authorization: Bearer header (see the example below).

Response

Authorization: Bearer mm_live_…

Response fields

urlstringThe resolved URL that was extracted.

selectorstringThe CSS selector used. When autoDetected is true, this is the section MiroMiro chose - pass it back to get the same result.

sectionstringOnly when you passed section=: the name that was resolved (pricing, footer, ...). selector still tells you which element it landed on.

autoDetectedbooleantrue when no selector was supplied and MiroMiro picked the hero section itself.

sections[]arrayEvery extractable section on the page, best first: { selector, label, elements, hasHeading, preview }. Labels come from each section's own heading, so an agent (or a human) can pick by name and call again with that selector - no devtools needed.

frameworkstringOne of tailwind, html, jsx, vue, elementor, shopify.

codestringThe generated component, ready to paste. For framework=elementor it is the full template JSON (save as .json); for framework=shopify the full section file (save as .liquid).

cssstring | nullThe companion stylesheet. Always set for framework=html; for tailwind, jsx and vue it is set only when the section uses @keyframes animations (add it to your global CSS), null otherwise. Always null for elementor and shopify: their file carries its own CSS.

tokensobjectThe design tokens this section uses: colors, fontFamilies, fontSizes, spacing, radii, shadows.

themestringlight or dark: which one the code you just received actually is. Measured from the page - its declared root theme when it has one, otherwise the backgrounds the cascade resolved - and never echoed back from the theme parameter, so if you asked for a theme the site cannot serve this still tells you what you really got. A site that expresses its themes only through a prefers-color-scheme media query returns its light branch unless you pass theme=dark. Absent when the page declares no theme and the section has no readable background.

assets.images[]string[]Absolute URLs of every image the section references.

summary.elementsnumberHow many elements the component contains.

summary.mappedToTailwindnumberDeclarations expressed as a clean Tailwind utility.

summary.arbitrarynumberDeclarations kept as an arbitrary value (e.g. bg-[#0a2540]) because no named utility exists.

summary.styledCoveragenumberPercentage (0-100) of extracted elements the CSS cascade found styles for. A healthy extraction sits well above 50; a low number means the page styles itself at runtime - retry with render=true.

summary.repeatedGroupsnumberRepeated structures collapsed into a data array + loop. jsx/vue only - plain markup cannot express a loop, so tailwind and html stay fully expanded and report 0.

summary.truncatedbooleantrue when the section exceeded the 400-element cap and was cut short - pass a narrower selector.

hintstring?Only present when the extraction looks degraded - for example the page is a client-rendered app shell, its styles are injected by JavaScript, or none of its linked stylesheets could be fetched. Says what to do about it: on a static call, usually retry with render=true; when the stylesheets failed to load, retry the same call in a moment; on a render=true call, that the styles could not be resolved even in a browser, so do not retry. Absent on healthy extractions.

usageobjectMetering for this call: credits spent this month, your monthly cap (null = unlimited), credits remaining, what this call cost (0 on cache hits), and whether it was served from the 24-hour cache. packCredits appears only when you hold a credit pack: the never-expiring balance left after this call. From 80% of a hard quota, warning says how much is used and topUpUrl is a signed one-click link (valid 7 days, no login) that adds 500 credits for €5 to this account; the same link is in the 429 and 402 messages, so an agent can hand it to the user the moment credits run out. autoRender appears when the server re-ran this call in a real browser by itself (the plain read was a JavaScript app shell or the site refused it), at no extra charge: a ready-to-show sentence, and the sign that render=true is not needed for this page.

Example request

https://miromiro.app/api/v1/extract?url=stripe.com&access_key=mm_live_…

← PreviousInstall MCP Next →Brand