Video to Code

Documentation

Video to Code is a remote MCP connector. It gives Claude Code, Claude, Cursor and ChatGPT tools that turn a video of a user interface (a screen recording, a design shot, an app demo) into a build spec a coding agent can implement. Motion in files is measured from their frames on our servers; Google's Gemini model reads the video for the layout, colours and copy. Nothing is installed on your computer.

Set up

Connector address: https://videotocode.app/api/mcp. You sign in once with an email and password or a Google account.

Tools

Every tool only reads a video or your usage, except upload_video, which creates a private upload link. None of them changes anything in your project: your agent writes the code.

video_to_spec (url or upload_id, start_s, end_s, stack, reference_code)
Turns up to 30 seconds of a video into a build spec: screens, layout, components, colours, copy and the motion table. On files (uploads and links) the motion is measured from the frames and up to 6 key frames come back as images. Set reference_code for one file of code in the given stack. Long runs return a job_id.
scan_video (url or upload_id, start_s, end_s)
Maps up to 5 minutes into screens and moments, one line each, with the animations marked ⚡, so you can pick the window to recreate.
upload_video (none)
Returns a private upload page and, for Claude Code, a curl command that uploads a file from your computer (up to 500 MB; the link works for 24 hours). Then video_to_spec takes the upload_id.
check_job (job_id)
Returns a spec or scan that took longer than 40 seconds.
ask_video (job_id, question)
Answers a follow-up question about a finished spec or scan, from what it found. Uses no recreations.
my_usage (none)
Shows the plan and the recreations and scans used this month.
whoami (none)
Shows which account the connector is signed in with. Useful to check the connection.

Example prompts

The spec

A spec is Markdown with these sections: Screens (each screen or state and when it's on screen), Layout (regions from top to bottom, sizes as a share of the frame), Components, Colours and type (hex values), Copy (all on-screen text, word for word), and Motion: one row per animation, then the same rows as JSON. With reference_code it ends with one file of code. Files also return key frames as images: the window's first and last frame and the moments around its biggest motions.

Motion fields

element
What moves, named from the video ("pricing card", "tab underline").
change
What it does, in words: "moves 16 px right, fades in", "grows to 1.08× its size", "stretches horizontally to 4× from its left edge".
start_ms, delay_ms, duration_ms
When it starts in the video, its delay from the first motion in the table, and how long it runs.
easing
The closest curve: linear, ease, ease-in, ease-out, ease-in-out or spring (an overshoot), given as a CSS cubic-bezier; or spring-bouncy, a physics spring that swings back before it settles, given as CSS linear() with its SwiftUI and Framer Motion settings.
from, to
CSS for its first and last state, relative to where it rests at the end (or at the start, for an element that fades out): transform: translateX(-16px); opacity: 0 → none; opacity: 1.
move_px, scale, scale_xy, origin, rotate_deg, opacity
The same numbers on their own. Distances are in the video's pixels: halve them for a 2× screen recording.
loop
The element ends where it started (a shimmer, a pulse, a spinner's turn).
measured
"frames" when measured from a file's frames; "model" when timed by the model from a YouTube video (approximate).

On files, starts and durations are within about ±25 ms of the truth on 60 fps video (less exact at lower frame rates), and what changes is measured too. The mouse pointer's moves are left out. On YouTube, timings are the model's estimate and are marked with ≈; tune them by eye.

Supported videos and limits

Privacy

Uploads and the key frames taken from them are deleted after 7 days, and Google deletes its copies after 48 hours. YouTube videos are never downloaded. Specs are kept for 7 days and scans for 30; only you can read the ones made from your links and uploads. The connector doesn't read your conversations, memory or files; it only receives what your assistant sends to a tool. Full details: privacy policy.

Troubleshooting