Screen Recording to Code

Capture a screen recording of a website or app in action and have the AI build a functional prototype for you.

IMPORTANT: Since this is an experimental feature and each LLM call is expensive (a few dollars), I would highly recommend setting up usage limits on your Anthropic account to avoid excess charges.

Examples

Google

google.in-app-good-1-compressed.mp4

Multi-step form

tally.in-app-good.mp4

ChatGPT

chatgpt-low.mp4

Setup

• Follow the Getting Started instructions on the README
• Add the env var ANTHROPIC_API_KEY to backend/.env with your API key from Anthropic (screen recording to code uses the Claude 3 Opus model)
• You can record a video with the browser-based screen recorder or drag/drop a recorded video

Tips for taking videos

• We extract 20 frames from your video so linger over each feature for a second or two.
• Doesn't work for long videos (recommend keeping videos to 30s or under)