Turn a video of a UI into a spec your coding agent can build.
Video to Code is a connector for Claude Code, Claude and Cursor. Share a screen recording, a design shot or an app demo, and it returns the layout, colours and copy, and every animation measured from the frames: when it starts, how long it runs, which way it moves and its easing.
claude mcp add --transport http video-to-code https://videotocode.app/api/mcpFree for 10 recreations and 10 scans a month. No install, no API key. Setup for Cursor and ChatGPT
| # | Change | Delay | Duration | Easing | From |
|---|---|---|---|---|---|
| 1 | moves 16 px right, fades in | 0 ms | 239 ms | ease-out | translateX(-16px); opacity: 0 |
| 2 | moves 16 px right, fades in | 64 ms | 235 ms | ease-out | translateX(-16px); opacity: 0 |
| 3 | moves 15 px right, fades in | 127 ms | 233 ms | ease-out | translateX(-15px); opacity: 0 |
| 4 | moves 15 px right, fades in | 191 ms | 229 ms | ease-out | translateX(-15px); opacity: 0 |
| 5 | moves 14 px right, fades in | 258 ms | 223 ms | ease-out | translateX(-14px); opacity: 0 |
Video models guess the timing. This measures it.
A model that watches a video sees a few frames a second, so a 240 ms ease-out is a blur between two of them. We gave Google's Gemini 10 test animations with known timings: the best model put 6 of them within ±100 ms.
Video to Code reads every frame of a file instead. On the same 10 animations at 60 fps every start and end was within 21 ms. On 22 test clips it named what changes in all 30 animations (moves, scales, turns, fades or changes colour), and measured every move to within 15%.
How it works
- 1
Share the video
In Claude Code, ask for an upload and your agent sends the recording with one curl command. Or share a link to a video file, a Drive or Dropbox link, or a YouTube video.
- 2
It measures the motion
Every frame of up to 30 seconds is compared with the one before: when each element starts and stops moving, which way it goes and how far, whether it scales or fades, and the closest easing curve.
- 3
Your agent builds it
The spec comes back with the layout, colours, copy, the motion table and key frames as images, plus reference code if you ask. Your agent fits it to your project's own components.
What comes back
A Markdown spec with the screens, layout, components, colours, copy and a motion table, the same rows as JSON, and key frames as images so your agent sees the exact colours. Scans map up to 5 minutes into screens and moments first, so you can pick the part worth building.
YouTube videos are never downloaded, so their motion can't be measured: Gemini times it from the link and those rows are marked approximate.
The spec format and motion fields## Layout
Screen 1, 0.00–1.38 s: a list of 5 rows, 62% of the width,
centred; rows 10% of the height, 6% apart.
## Components
List row: white, 2 px border #cbd5e1, 8 px radius,
text left-aligned with 16 px padding.
## Colours and type
Background #f1f5f9; row text #334155, 4% of the height, 500.
## Motion
| # | Element | Change | Delay | Duration | Easing |
|---|---------|-----------------------------|-------|----------|----------|
| 1 | Row 1 | moves 16 px right, fades in | 0 ms | 239 ms | ease-out |
| 2 | Row 2 | moves 16 px right, fades in | 64 ms | 235 ms | ease-out |Set it up
Every app uses the same address. You sign in once with your email or Google account.
Claude Code
Run this in your terminal, then type /mcp in Claude Code and sign in. Uploads work from the terminal, so your agent can send a recording from your disk.
claude mcp add --transport http video-to-code https://videotocode.app/api/mcpClaude (web, desktop and mobile)
Use the button, or go to Customize → Connectors → Add custom connector and paste the address. Free plans can add one custom connector; paid plans can add more.
https://videotocode.app/api/mcpCursor and other MCP apps
Add this server to your MCP settings (mcp.json). Your app opens a browser window to sign in.
{"mcpServers":{"video-to-code":{"url":"https://videotocode.app/api/mcp"}}}ChatGPT
Custom connectors need developer mode, on ChatGPT Business, Enterprise and Edu workspaces and on Pro. Add a custom MCP server and paste the address.
https://videotocode.app/api/mcpFree to start
10 recreations and 10 scans a month for free. Pro is $8 a month, or $60 a year, for 80 of each.
Questions
- Can't Claude just watch the video?
- Claude can't open a video on its own, and video models that can see one sample it at a few frames a second, so they guess an animation's timing. On 10 test animations with known timings, the best Gemini model put 6 within ±100 ms. Video to Code measures motion from every frame of a file instead: on the same 10 at 60 fps, every start and end was within 21 ms.
- What can I share?
- A screen recording or any video file on your computer (up to 500 MB, through a private upload link; in Claude Code it's one curl command), a direct link to a video file, a public Google Drive or Dropbox link, or a public YouTube video. One recreation covers up to 30 seconds; to find the part you want in a longer video, scan up to 5 minutes at a time first.
- Is YouTube as accurate as a file?
- No. YouTube videos are never downloaded (YouTube's terms), so we can't measure their frames: Gemini reads the video through its link and times the motion itself, typically to within a few hundred milliseconds. Those rows are marked approximate. For exact timing, record the screen or download a video you have the rights to and upload it.
- Which stacks can it write code for?
- The spec works with any stack. Ask for reference code and it writes one file in React + Tailwind (the default), SwiftUI, HTML and CSS, Vue, Flutter or Jetpack Compose. It's a reference: your agent adapts it to your project's own components.
- What counts as a recreation?
- Each video_to_spec call on up to 30 seconds of video is one recreation, and each scan of up to 5 minutes is one scan. Follow-up questions about a spec are free, and a run that fails doesn't count. The free plan includes 10 recreations and 10 scans a month; Pro includes 80 of each.
- Are distances in CSS pixels?
- They're in the video's own pixels. A screen recording on a 2× display is twice the CSS size, so halve them there. Layout sizes in the spec are given as a share of the frame, which doesn't depend on the display.
- Do you keep my videos?
- Uploads and the key frames taken from them are deleted after 7 days. Google's copy, used to read the layout, is deleted after 48 hours. YouTube videos are never downloaded. Specs are kept for 7 days and scans for 30 days, and only you can read the ones from your links and uploads.