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 - 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. tailwind (default) · html · jsx · vue

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. 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. You rarely have to guess: when a static extraction comes back thin because the page is client-rendered, the response includes a top-level hint field telling you to retry with render=true. 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.

cssCompanion stylesheet. Always populated for framework=html; for other frameworks only when the section uses @keyframes animations.

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.

codestringThe generated component, ready to paste.

cssstring | nullThe companion stylesheet. Always set for framework=html; for the other frameworks it is set only when the section uses @keyframes animations (add it to your global CSS), null otherwise.

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, or its styles are injected by JavaScript. Says what to do about it: on a static call, usually retry with render=true; 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.

Example request

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

← PreviousInstall MCP Next →Brand