Prototype

Turn a self-contained interactive prototype YOU generate into an editable MockFlow IdeaBoard component, and get back the board URL.

Updated 16 Sep 20261 min read

Send "type": "prototype".

Turn a self-contained interactive prototype YOU generate into an editable MockFlow IdeaBoard component, and get back the board URL.

Also available as the MCP tool render_prototypelite. The same payload works through either surface.

Fields

data

htmlstringrequired

Complete self-contained interactive prototype as a single HTML document. Multiple screens as <section data-screen="id"> elements (mark the entry with data-screen-start); navigation via data-nav="targetId" (and data-nav="back"). Inline CSS/JS only; no external network or backend calls.

deviceTypeenum<string>

Device frame the prototype is presented in AND the viewport you MUST design every screen for. Match the user's stated device (a "mobile app" → "mobile"). Defaults to "mobile". Design widths: mobile ~390px, tablet ~820px, desktop ~1280px. One of mobile, tablet or desktop.

viewportWidthnumber

Exact viewport width in px you laid the screens out for. The frame is sized to it precisely instead of the nearest deviceType preset, so ANY device works: watch ~200, phone 390, foldable 512, tablet 820, laptop 1280, desktop 1440, TV 1920, kiosk portrait 1080. When converting existing wireframes, pass THEIR width.

viewportHeightnumber

Exact viewport height in px of that device (e.g. 844 for a 390px phone, 1080 for a 1920px TV). This is the DEVICE screen height, NOT the length of your content — a screen scrolls inside its viewport. Omit and a height suiting viewportWidth is used.

titlestring

Short prototype title shown on the frame's header (e.g. "Habit Tracker"). Falls back to the HTML <title> tag when omitted.

Example

{
  "type": "prototype",
  "data": {
    "html": "string",
    "deviceType": "mobile",
    "viewportWidth": 0,
    "viewportHeight": 0,
    "title": "Q4 Launch Planning"
  }
}

Was this page helpful?