Let your coding agent see and edit your prototype.

A project ID authorizes reading and editing through both the browser and MCP. Share it only with trusted tools; never commit it to a code repository.

Choose how to connect

Find your project ID under “Project links and AI setup” in the editor. Public downloads contain no project credentials. The built-in AI needs no installation.

Read project documents

Use “Project brief” for background, audience, features, and business rules. Use “Design guidelines” for principles, design tokens, and project-wide design notes. Save them independently; both are shared across the project and do not change wireframe styling.

MCP exposes two resources: readme.md and design.md. These belong to the prototype project, not the code repository. Ask your agent to use resources/list to discover them and resources/read to read their returned resource URIs; list_pages also returns these resource links. Documents may be empty; resources always provide the latest saved text, independently of page versions.

Your client decides whether resources enter the agent's context automatically. A successful connection does not mean they were read. Explicitly ask the agent to read both documents first.

Read the complete prototype

Ask your coding agent to use list_pages to list pages, read both linked project documents, and then use get_prototype to read a page. Each call returns one native PNG plus complete page and component notes as separate text. Read both together; no pagination is needed.

Omit revision to read the latest saved draft. A revision selects an existing snapshot; image and notes always come from the same snapshot. The text's notes contains annotation numbers, component names, and complete notes. Match the numbers to the image.

Create and edit prototypes

Ask your agent to use list_components to discover the component types, purposes, counts, and default sizes. Then use get_page to read the page structure and revision, then edit_page to batch-add, update, remove, or reorder components. create_page can create a complete page with initial components. The server assigns component IDs and annotation numbers.

Supported types: text/button/input/rect/image/region/table/list/select/radio/checkbox/switch are the 12 intent components. rect is a block, and region is a feature region. Tables, lists, and selection controls are illustrative: use text for content and notes for rules, not editable cells, option arrays, or interaction state. Keep prototypes low-fidelity.

When creating a page, use canvas_type to choose phone (default, 48 × 104 units) or desktop (180 × 120 units). Type is fixed at creation. list_components returns canvases presets; use get_page returned by canvas.columns/rows. Coordinates use grid units, not pixels: each unit is 8px, positions allow half-units, and sizes use whole units. Writes save directly; a batch succeeds or fails together. On conflict, read again rather than automatically overwriting or retrying. After saving, use get_prototype to inspect the result.

Before editing, use get_readme or get_design to read the text and its document revision, then update_readme or update_design to save the full Markdown text, or an empty string to clear it. The documents have separate revision checks and are independent of page versions.

The browser syncs saved changes automatically. Typing, gestures, and unsaved drafts are protected; reload explicitly after a conflict. New pages update the directory without taking over the current page. MCP cannot create or delete projects, or delete entire pages.

For long pages, set height_multiplier to an integer from 1 to 5; width stays unchanged. Set it in create_page or change it with edit_page, optionally moving components in the same batch. Components must remain inside after shrinking. The canvas.rows returned by get_page is the actual boundary. Versions preserve and restore height.

Page folders

list_pages returns this project's folders, including empty folders, and each page's folder_id. Use create_folder(name)、rename_folder(folder_id, name)、delete_folder(folder_id) to manage single-level folders. Folder names are unique within a project; nesting is not supported.

create_page can take folder_id to choose a folder; use move_page(page_id, folder_id) to move a page; pass null for the project root. Deleting a folder moves its pages to the root without deleting them. Directory operations do not change page revisions or require base_revision or replace canvas drafts. Restoring a page version does not change its folder.

Save versions and understand changes

Autosave updates the live draft without creating a checkpoint. Use “Save version” in the browser, or let your agent call save_page_version(page_id, base_revision) to keep a checkpoint of the current page. Saving does not advance the page revision or render an image; saving the same revision again returns the same version.

Use list_page_versions(page_id, page?) to find versions, 20 per page. Pass next_page to continue. Pass version_id to get_page's compare_version_id to get the latest page and net changes since that version, including additions, removals, text, notes, layout, and layers. Understand the changes, then edit locally while preserving component IDs. Do not delete and rebuild the whole page.

Versions cover one page, independently of project documents. Agents read the live saved draft by default; no checkpoint is required for visibility. The browser's Versions list provides read-only historical previews. Pass a version's revision can be restored with get_prototype to inspect historical images and notes. Versions are retained until their page or project is deleted. Restore is supported; branches and merges are not.

Understand prototype annotations

Prototype images retain annotation numbers and dashed feature regions, without a notes sidebar. These marks are not part of the interface to implement. Use the accompanying page and component notes for behavior. Browser previews and PNG downloads also show only the page canvas.

Official Codex MCP documentation ↗

Official Claude Code MCP documentation ↗

Restore historical versions

For pages, use restore_page_version(page_id, version_id, base_revision). For documents, use list_document_versions(kind, page?) to list versions, get_document_version(kind, version_id) to read the text, and restore_document_version(kind, version_id, base_revision) to restore; kind to readme or design. Before restoring, read the current revision, not the historical revision. Restore creates a new revision and preserves history. On conflict, read again; never overwrite or retry automatically.