# Prototype

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

Source: https://mockflow.com/developers/reference/item-types/prototype

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

- `html` (string, required): 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.
- `deviceType` (enum<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`.
- `viewportWidth` (number): 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.
- `viewportHeight` (number): 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.
- `title` (string): Short prototype title shown on the frame's header (e.g. "Habit Tracker"). Falls back to the HTML <title> tag when omitted.

## Example

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