PageToVid Studio (VS Code)

One folder, one production seat. The extension connects the project you have open to its PageToVid site and to Claude Code, and from then on the editor is where the videos are directed:

the recorder can log in to your product, so screencasts show the app and not the marketing page;
Claude Code drives PageToVid through its MCP server — videos, recurring shows, versioned formats, connections, previews and proofs — from slash commands the pack installs in this folder;
the panel is the studio: the site's counts, the login's expiry, the shows and their episodes (with sources and integrity), the capture plan and what has been recorded, the public channel and its RSS feed.

This extension never captures anything itself. Screencasts are recorded by PageToVid's cloud recorder, or by the PageToVid browser extension when you replay flows in your own browser.

Setup, once

Install (see below).
Command Palette → “PageToVid: Connect (sign in)”. Your browser opens PageToVid's connect page; approve, and a key comes back to the editor over a vscode:// callback — nothing to copy. (No handshake? “PageToVid: Set API key” with a cp_live_… key from pagetovid.com/account.)
PageToVid: Select site — one folder maps to one site (asked right after you connect).
PageToVid: Install studio pack — writes, in this folder:
- .mcp.json with the pagetovid MCP server. The key is not in the file: it says ${PAGETOVID_API_KEY}, and the extension injects that variable into every terminal VS Code opens. Start claude from an integrated terminal (or use the Claude Code extension) and approve the project server once.
- five slash commands in .claude/commands/ (below) and .pagetovid/STUDIO.md, the guide.
PageToVid: Connect a login for screencasts — only if your product sits behind a sign-in (Scale plan and up; the server answers with the plan it needs otherwise). Three ways: a Playwright storage state file (npx playwright codegen --save-storage=auth.json https://app.yoursite.com, or a test's context.storageState()), a test account's e-mail and password (PageToVid signs in once and keeps only the cookies; the password is never stored), or your own browser session through the browser extension. The session is bound to that origin, expires within three days, and every render of the origin films logged in — from Claude, the API or the web app.

In Claude Code

Command	Does
`/pagetovid-studio`	Checks the whole seat — credits, site, login, plan, shows, feed — and says what is missing. Free.
`/pagetovid-capture-plan`	Reads the codebase and writes the flows worth recording (`.pagetovid/capture-plan.json`); the panel publishes them, the browser extension records them, each step becomes a scene.
`/pagetovid-show weekly changelog`	A recurring show from what this repo publishes: finds the feed or data source, creates the format (validated free), the show, and previews the first run. You confirm it in the panel.
`/pagetovid-format <name> <change>`	Authors or revises a format — for an animation, a programme with beats, resolvers, computed values and the integrity gate — and previews a real episode before writing a new version.
`/pagetovid-howto <feature>`	How-to videos from the docs, filmed on the product: plans the tasks, checks each page with `inspect_page`, writes the briefs, and asks before every render.
`/pagetovid-assets`	Finds the repo's logos and product images and tells you which to bank with “PageToVid: Send brand assets”.

Every render costs 40 credits and every command previews before spending; nothing renders without a person saying so.

The panel

Studio — site counts and credits · recorder login (with hours left, “Connect a login” / “Forget”) · Claude Code pack state (“Install”) · the public channel and its RSS feed (“Copy feed”) · brand assets (“Send images”).

Shows — every show of the site with its state (held / running / paused), kind, source (feed, query, watchlist, by hand), cadence and period, format version, credits today, episode count; Preview first run on a held show shows what it would make and lets you confirm; Run now, Pause, Resume. Recent episodes carry their source count and integrity result.

Capture plan — one section per idea, its flows and their steps with the seconds the film should hold on each; “✓ recorded” once the browser extension has banked the flow.

The status bar (bottom left) shows what is missing and fixes it in one click.

Commands

Command	Does
PageToVid: Connect (sign in) / Set API key / Disconnect	The key, in VS Code's secret storage.
PageToVid: Select site	Maps this folder to one site (stored per folder).
PageToVid: Install studio pack	`.mcp.json`, slash commands, the guide, the env var.
PageToVid: Connect a login for screencasts / Forget the recorder's login	The capture session of the site.
PageToVid: Send brand assets	Picks PNG/JPEG/WebP files and banks them tagged `brand`.
PageToVid: Generate capture plan (Claude Code)	Hands the plan task to Claude Code.
PageToVid: Copy the channel feed URL / Open the public channel	`/videos/<site>/feed.xml`, `/videos/<site>`.
PageToVid: Open the studio guide / Open site on pagetovid.com	Shortcuts.

Settings

Setting	Default	Meaning
`pagetovid.baseUrl`	`https://pagetovid.com`	Server base URL (also the MCP server's host in `.mcp.json`).
`pagetovid.domain`	(pick on select)	The one site this folder belongs to — per workspace folder, never global.
`pagetovid.output`	`.pagetovid`	Folder for the plan, its provenance and the guide.
`pagetovid.handoffTarget`	`ask`	Where the plan prompt goes: a new Claude Code conversation, the open one, or ask.

Install

A. Try it instantly — open this folder in VS Code and press F5.

B. Package and install:

npm run build:vsix                                  # → public/pagetovid-capture.vsix
code --install-extension public/pagetovid-capture.vsix

Requires the Claude Code extension or the claude CLI for the slash commands; without them the pack still writes the files and “Generate capture plan” still writes its task file.

Privacy

The extension reads the project to write prompts, and calls the PageToVid API over HTTPS with your key. It writes .mcp.json without the key. A storage state you pick is read once and sent once; a test password is sent once and never stored anywhere on this machine. It never executes workspace code and never records anything itself.

Tests

node vscode-extension/smoke-test.cjs      # activation, commands, the pack, the plan prompt
npx tsx scripts/flow-roundtrip-test.mts   # plan → publish → record, end to end
npx tsx scripts/session-state-test.mts    # a storage state keeps only the site's cookies