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

selectoroptionalThe section to extract, e.g. selector=%23hero or selector=.pricing-card. Omit it 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.

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

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

{
  "url":          "https://stripe.com",
  "selector":     "section.hero-section-container",
  "autoDetected": true,
  "sections": [
    { "selector": "section.hero-section-container", "label": "Financial infrastructure…", "elements": 343 },
    { "selector": "section.business-sizes-section", "label": "Powering businesses of all sizes.", "elements": 604 },
    …
  ],
  "framework":    "tailwind",
  "code":         "<section class=\"relative w-full\">\n  <h1 class=\"text-[#000000] …\">…</h1>\n</section>",
  "css":          null,
  "tokens": {
    "colors":       ["#000000", "#533afd"],
    "fontFamilies": ["sohne-var"],
    "fontSizes":    ["48px", "16px"],
    "spacing":      ["16px", "24px"],
    "radii":        ["8px"],
    "shadows":      ["0 2px 4px rgba(0,0,0,.1)"]
  },
  "theme":   "light",
  "assets":  { "images": ["https://…/hero.png"], "fonts": [] },
  "summary": { "elements": 42, "declarations": 310, "mappedToTailwind": 180, "arbitrary": 44, "styledCoverage": 97, "repeatedGroups": 1, "truncated": false },
  "usage":   { "creditsSpent": 25, "creditsThisMonth": 25, "monthlyLimit": 100, "remaining": 75, "cached": false }
}

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.

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 (usually: retry with render=true). 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.

Example request

curl "https://miromiro.app/api/v1/code?url=stripe.com&framework=jsx" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

# Client-rendered site (React, Next, SPA)? Add render=true to run its
# JavaScript in a real browser first (+5 credits):
curl "https://miromiro.app/api/v1/code?url=stripe.com&framework=jsx&render=true" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

← PreviousInstall MCP Next →Brand