Video to Web

Record any screen, extract UI frames, and let AI redesign them into clean, responsive HTML — all in one workflow.

What it does

1. Record — Capture any screen, window, or tab directly in the browser
2. Extract — Automatically pull key frames with smart duplicate detection
3. Analyze — AI reads your UI and generates a complete, self-contained HTML page

Features

• Select from free vision models on OpenRouter, or toggle to use Claude CLI locally
• Real-time streaming output as the AI generates your page
• Live preview + full HTML source with one-click copy and download
• Step navigation — go back and re-select frames or switch models without starting over

Stack

Next.js 16 · React 19 · Tailwind CSS 4 · TypeScript · OpenRouter SDK · Claude Code CLI

Getting Started

Prerequisites

• Node.js 20.9+
• An OpenRouter API key (for free vision models)
• Claude Code CLI (optional, for Claude mode)

Setup

git clone https://github.com/anthropics/video-to-web.git
cd video-to-web
npm install

Create a .env file:

OPENROUTER_KEY=your-openrouter-api-key

Run

npm run dev

Open http://localhost:3000 in your browser.

How it works

Screen Recording → Frame Extraction → Model Selection → AI Analysis → HTML Output
                   (canvas sampling,    (OpenRouter or     (streaming     (preview,
                    dedup detection)      Claude CLI)        response)      copy, download)

License

MIT