clone-section

Rebuild a section from a live site

Use the extract_code tool. It resolves the page's real CSS cascade and returns a self-contained component with the site's true colors, fonts, spacing and copy, so you adapt real values instead of guessing from a screenshot.

Picking the section

Call extract_code with just the url first. It auto-detects the hero and — this is the part worth using — returns a sections array listing every extractable section on the page with a human-readable label and a ready-to-use selector.

When the user wants a specific part ("their pricing table", "the footer"), read sections from that first response, find the matching entry, and call again with its selector. Guessing a selector like .pricing wastes a call; the sections list already has the real one.

Choosing the framework

Match the user's project, don't default blindly:

• tailwind (default) — Tailwind utility classes in the markup
• jsx — a React component; pass name to set the component name. Repeated structures (tiers, cards, list items) come back as one template plus a const items = […] array rendered with .map() — use the data array, don't re-expand it.
• vue — a single-file component with <script setup>; name applies here too, and repeated structures collapse into a v-for the same way
• html — plain HTML plus a companion css string

For every framework, the css field may also carry the section's @keyframes — add those to the project's global stylesheet or the animations silently do nothing.

If the repo you are working in already uses one of these, use it without asking.

When a result comes back thin

The API reads static HTML and CSS by default, and the response tells you how it went: summary.styledCoverage (0-100) is the percentage of elements the CSS cascade resolved styles for, and when the page is client-rendered or styles itself at runtime the response includes a hint field saying what to do. When you see the hint (or coverage is low), call again with render: true — it runs the page in a real browser so its JavaScript executes first. It is slower and costs 5 extra credits, so treat it as the retry, not the default.