canonical: https://jentic.com/apis/miromiro.app/miromiro

# Miromiro App MiroMiro Design Extraction API

The MiroMiro Design Extraction API turns a live website URL into design data you can build with. Its code operation resolves the page's real CSS cascade and returns a section such as the hero, pricing, or footer as a self-contained Tailwind, HTML and CSS, React, or Vue component with the tokens it uses. Other operations return the brand identity (color roles, palette, fonts, logos, and social profiles with a confidence score), the full design-token system as JSON, CSS custom properties, a Tailwind theme, or DTCG, and every image, SVG, font, video, audio file, and Lottie animation the page declares. Results are cached for 24 hours, and a render option runs the page's JavaScript in a real browser for client-rendered sites.

## For AI agents

Extract a live website's sections as Tailwind, HTML, React, or Vue components, plus its brand identity, design tokens, fonts, images, SVGs, videos, audio, and Lottie animations with MiroMiro. Authenticated with a Bearer key.

## Scope

Does not crawl whole sites, extract page text for LLMs, or host the assets it finds. Use for turning a single page URL into component code, brand identity, design tokens, and asset lists only.

## Capabilities

- Extract a page section such as hero, pricing, or footer as a Tailwind, HTML, JSX, or Vue component
- Return a site's brand identity: color roles, palette, primary fonts, logos, og-image, and social profiles
- Export the full design-token system as JSON, CSS custom properties, a Tailwind theme, or DTCG
- List every @font-face file a site loads with family, weight, style, and Google Fonts links
- Collect a page's images, inline and external SVGs, videos, audio files, and Lottie animations
- Render client-side JavaScript sites in a real browser and capture a viewport or full-page screenshot

## Use cases

### Agent UI Building Through Jentic

A coding agent asked to build a page in the style of a reference site pulls the hero or pricing section from that URL as a ready-made Tailwind or React component, along with the tokens it uses, then adapts it in your codebase. Through Jentic the agent finds the code operation by intent and calls it with url, section, and framework, using the stored key without seeing it.

Example prompt: Extract the pricing section of 'stripe.com' with framework 'jsx' and name 'PricingTable', and return the component code

### Brand Kits from a Domain

Sales, onboarding, and white-label tools personalise their UI by pulling a customer's brand from their website: named primary, accent, background, and text colors, the palette, fonts by role, logos, and social links. The confidence score shows how much the site declared versus what was inferred, which is the value to gate on for bulk runs.

Example prompt: Get the brand for 'linear.app' and return the primary and accent colors, the heading font, and the confidence score

### Design-Token Audits and Migrations

Design-system teams export a site's tokens, including colors, font sizes, spacing, border radii, shadows, gradients, and breakpoints with usage counts, as DTCG or CSS custom properties to compare against their own system or seed a migration. Font and SVG extraction fill in the assets the tokens refer to.

Example prompt: Extract design tokens from 'vercel.com' in format 'dtcg' and list the fonts the site loads

## Key endpoints

| Method | Path | Description |
| --- | --- | --- |
| GET | `/code` | Extract a page section as a component |
| GET | `/brand` | Brand identity: colors, fonts, logo, socials |
| GET | `/extract` | The full design-token system of a page |
| GET | `/fonts` | The typography a site loads |
| GET | `/svg` | Inline and external SVGs |
| GET | `/images` | Every image a page declares |

## Key resources

- **Code** — Page sections returned as Tailwind, HTML and CSS, JSX, or Vue components
- **Brand** — Color roles, palette, fonts, logos, and socials with a confidence score
- **Design Tokens** — Every token group with usage data, in JSON, CSS, Tailwind, or DTCG
- **Assets** — Images, SVGs, fonts, videos, audio, and Lottie animations declared on a page

## AI readiness

This API is usable in Jentic One now. Its AI-readiness score against Jentic's framework shows where it stands today and where improvements would make it even easier for agents to use.

- **Score:** 69 / 100
- **Maturity:** AI-Aware
- **Dimensions:**
  - Foundational Compliance: 99 / 100
  - Developer Experience & Jentic Compatibility: 69 / 100
  - AI-Readiness & Agent Experience: 52 / 100
  - Agent Usability: 94 / 100
  - Security: 60 / 100
  - AI Discoverability: 63 / 100
- **View full report:** https://jentic.com/apis/miromiro.app/miromiro/scorecard
- **How the score is calculated:** https://docs.jentic.com/reference/api-readiness-framework/overview/
- **More about the dimensions:** https://docs.jentic.com/reference/api-readiness-framework/specification/#dimensional-model-overview

### Score it yourself

Every API in the directory is allowlisted, so you can re-score it with no key required.

- **Score your own API:** https://jentic.com/scorecard.md
- **Scoring CLI agent skill:** https://github.com/jentic/jentic-api-scorecard/blob/main/skills/jentic-api-scorecard/SKILL.md

```sh
npx @jentic/api-scorecard-cli score <openapi-url>
```

## Why Jentic

- **Setup:** Wiring MiroMiro by hand means setting the Bearer header, deciding per call when render=true is worth its extra credits, and trimming large responses with the fields parameter. Through Jentic you install once, import MiroMiro from the API Directory, store the key once, and your agent calls it.
- **Permission scoping:** MiroMiro takes the target page as a url query parameter on fixed paths, so rules bound which operations your agent may call, not which sites it extracts from. You choose the operations it may call, so credit-heavy ones like code or brand extraction are not included unless you add them.
- **Credential handling:** Your MiroMiro key is stored once, encrypted, by your own Jentic One instance and injected at execution time. It never enters the agent's prompt, logs, or context.
- **Discovery method:** Agents search Jentic by intent such as 'turn a website section into code' or 'get a site's brand colors', and Jentic returns the matching MiroMiro operation with its input schema so the agent calls the right endpoint without reading the reference docs.

## Related APIs

- **Brandfetch** — Brand logos, colors, and fonts by domain
- **Microlink** — Metadata, screenshots, and previews from any URL
- **Figma REST API** — Read and comment on Figma design files

## FAQ

### What authentication does the MiroMiro Design Extraction API use?

The MiroMiro Design Extraction API authenticates with a key sent as `Authorization: Bearer mm_live_...` per its OpenAPI spec, declared globally for every operation. Through Jentic the key is stored once, encrypted, by your own Jentic One instance and injected at call time, so it never enters the agent's prompt or logs.

### Which frameworks can the MiroMiro code operation output?

The framework parameter accepts tailwind (the default), html, jsx, or vue. Pick a section by name such as hero, header, footer, pricing, features, testimonials, faq, or cta, or pass a CSS selector; omit both and the hero is auto-detected, with the response listing every other extractable section.

### Can I limit what my agent is allowed to do with the MiroMiro API?

Yes. For example, write a rule that allows only the brand and fonts operations, so the agent can pull brand colors and typography but not run the higher-cost code extraction, and every call it makes is logged.

### What are the rate limits for the MiroMiro Design Extraction API?

The OpenAPI spec meters usage in credits rather than stating a request rate: for example brand costs 15 credits, fonts 5, images and SVGs 1 each, and render=true adds 5, with cache hits and failed calls free. A free key includes 300 credits a month; see https://miromiro.app/api/docs for current limits.

### How do I extract a website section with MiroMiro through Jentic?

Search Jentic for the intent 'turn a website section into code', which returns the MiroMiro code operation on /code with its input schema; the agent passes url, section or selector, and framework, adding render=true for client-rendered sites. To run it on your own infrastructure, install Jentic One from its GitHub repo.

### Is there a MiroMiro MCP server?

You don't need an MCP server to give your agent the MiroMiro API. Jentic connects it directly from the API Directory: import it, store your key once, and your agent calls the code, brand, token, and asset operations. Operations are discovered on demand, so no extra tool definitions are loaded into the agent's context.