gmpetrov

Showcase: Codex films screen recordings of any site or desktop app through an open-source MCP server (Screenplay) I open-sourced Screenplay, an MCP server + CLI that lets Codex make Screen Studio-style screen recordings: smoothed cursor, zooms that follow the action, click effects, captions, optional voice-over. Screenplay has no AI inside and needs no API key: Codex writes the scenario, Screenplay plays, films and edits it. Setup with Codex npx agent-screenplay init downloads Chromium once and appends this to ~/.codex/config.toml: [mcp_servers.screenplay] command = "npx" args = ["-y", "agent-screenplay", "mcp"] # Filming and editing a video takes longer than the default tool timeout. tool_timeout_sec = 900 The tool_timeout_sec matters: a take plus the edit runs longer than Codex's default tool timeout. What Codex does with it The server exposes four tools: - screenplay_guide: how to write a good scenario (what to zoom on, how long to hold a shot, when a callout helps) - screenplay_check: plays the steps fast without filming, and lists visible targets when one fails, so Codex fixes selectors before the real take - screenplay_record: films and edits, returns the MP4 and a storyboard image of the take - screenplay_render: re-edits the last take (style, zoom, text, voice) without filming again So the loop is: Codex explores the site → writes the JSON scenario → check → record → reads the storyboard → fixes the shots that are off → render. Targets are written the way people see them (text=…, role=button[name='…'], label=…), so Codex doesn't need CSS selectors. Web runs in headless Chromium (Playwright), so it works in Codex cloud-style containers with no screen. Desktop apps (macOS, Windows, Linux) use the same scenario format through the OS accessibility APIs. Then just ask: "Make a 30-second screen recording of yoursite.com". Repo (MIT): gmpetrov/agent-screenplay

Screenplay: screen recordings with Screen Studio-style editing, in Node (CDP screencast + @napi-rs/canvas + ffmpeg) I open-sourced a Node CLI + MCP server that films websites and desktop apps and edits the result like Screen Studio. A coding agent (Claude Code, Codex, Cursor…) writes a short JSON scenario, and Screenplay plays it, films it and edits it. Some of the Node side, in case it's useful to someone: - Capture: Playwright drives headless Chromium, and frames come from the Chrome DevTools Protocol (Page.startScreencast) rather than Playwright's video recorder, so each frame has a timestamp I can line up with the actions. - Editing: every output frame is composed on @napi-rs/canvas: gradient background, rounded window with shadow, a cursor drawn from the recorded positions (smoothed), click ripples, zoom that follows the action, captions. - Encoding: raw RGBA frames are piped to ffmpeg-static through stdin (-f rawvideo … pipe:0). No system ffmpeg, no native build step on install. - Desktop apps: the same scenario format is played through the OS accessibility APIs (agent-desktop), and the window is filmed with ffmpeg. - Interface: a commander CLI (check, record, render) and an MCP server on stdio, so any agent can call it. Try it: npx agent-screenplay init Repo (MIT, TypeScript): gmpetrov/agent-screenplay Happy to go deeper on any part.

I built an open-source tool that lets your coding agent film screen recordings I like Screen Studio-style videos: a smooth cursor, zooms that follow the action, a nice gradient behind the window. Making them by hand means recording, re-recording, then editing. So I built Screenplay, an open-source tool that lets your coding agent do it. Repo (MIT): gmpetrov/agent-screenplay !Storyboard of a Screenplay recording How it works You ask your agent (Claude Code, Codex, Cursor or any MCP client) for a video: /screenplay Make a 30-second walkthrough of https://yoursite.com 1. The agent opens the site, explores it, and writes a short JSON scenario: open this page, click this button, type that, hold here, zoom there. 2. Screenplay runs check, which plays the steps fast without filming, so broken selectors show up before the real take. 3. record plays the scenario in headless Chromium (Playwright), films it, then edits it: smoothed cursor, automatic zooms, click ripples, callouts, spotlight, captions and an optional voice-over. 4. The agent looks at the storyboard image of the take and fixes the scenario if a shot is off. Re-editing the look doesn't need a new take: render. Desktop apps work too (macOS, Windows, Linux): the same kind of scenario is played through the OS accessibility APIs, and the window is filmed with ffmpeg. A scenario Targets are named the way people see them (text=…, role=button[name='…'], label=…), so the agent doesn't need CSS selectors: { "url": "https://app.example.com/inbox", "style": { "background": "dawn" }, "steps": [ { "click": "text=Camille Laurent", "say": "When the AI agent gets stuck, the conversation lands in your inbox." }, { "callout": "role=button[name='Take over']", "text": "Take over from the AI agent" }, { "click": "role=button[name='Take over']", "say": "One click, and the conversation is yours." }, { "type": "Hi Camille, I'm on it.", "into": "placeholder=Write a reply…" }, { "click": "role=button[name='Send']" } ] } Design choices - No AI inside, no API key. Your agent does the thinking; Screenplay only plays, films and edits. It's a CLI plus an MCP server. - Headless first. Coding agents often run in containers without a screen, and they still need to film. - Own renderer. Frames are drawn with @napi-rs/canvas and encoded with ffmpeg (both ship with the package). I didn't want a rendering library whose licence makes companies pay, in an MIT tool. - Voice-over with Cartesia or ElevenLabs, or with your own audio files (from any TTS, local models included). The video waits for each sentence, so the voice sets the pace. Try it npx agent-screenplay init init downloads Chromium once, adds the MCP server to Claude Code, Codex and Cursor, and installs the guide that teaches the agent to write good scenarios. Restart your agent, then ask for a video. It's brand new, so I'd love feedback, especially on the scenario format and the default look. Issues and stars are very welcome: gmpetrov/agent-screenplay Written with an AI agent and published at my request; every fact comes from the repo.

Screenplay: beautiful screen recordings of any website or desktop app, scripted by your AI coding agent (TypeScript, MIT) Ask Claude Code, Codex or Cursor for a video of any site or desktop app. The agent writes a short JSON scenario, and Screenplay plays it with Playwright, films it and edits it: smoothed cursor, zooms that follow the action, click effects, captions, optional voice-over. No AI inside, no API key. Install with `npx agent-screenplay init`.

I made Claude Code film screen recordings: it writes the scenario, an open-source tool plays it and edits it Screen Studio-style I wanted polished screen recordings (smooth cursor, zooms on the action, captions) without recording and editing them by hand. So I built Screenplay and let Claude Code do the directing. What it does You type /screenplay Make a 30-second walkthrough of https://yoursite.com. Claude Code opens the site, explores it, and writes a short JSON scenario: open this page, click this button, type that, linger here. Screenplay plays the scenario in headless Chromium (Playwright), films it, then edits the video with a smoothed cursor, zooms that follow the action, click ripples, callouts, captions and an optional voice-over. You get an MP4 and a storyboard image of the take. Desktop apps work too (Mac, Windows, Linux), from the same kind of scenario. How Claude Code is used - npx agent-screenplay init registers an MCP server and installs a /screenplay skill with a guide on writing good scenarios (what to zoom on, how long to hold a shot, when a callout helps). - Claude runs check first, which plays the steps fast without filming, so broken selectors show up before the real take. - After filming, Claude reads the storyboard, spots shots that are off and fixes the scenario. - Screenplay itself has no AI and needs no API key. Claude Code also wrote most of its code. What I learned - check really clicks through your app, so if the demo creates a record, it creates it every time. Film a test copy of your app and reset it before each take. - I looked at Remotion for the editing, but its licence makes companies above 3 people pay, which doesn't fit an MIT tool. So Screenplay draws the frames itself and encodes them with ffmpeg. - It has to run headless: Claude Code often works in containers without a screen, and it still needs to film. - On macOS the Dock can't be read through the accessibility APIs, so desktop scenarios can't click it. The menu bar works fine. Open source (MIT): gmpetrov/agent-screenplay Happy to answer questions about how it works.

gmpetrov/agent-screenplay Awesome tech under the hood ❤️ @vercel agent-desktop @playwrightweb

I built an open-source tool that lets Claude Code make Screen Studio-quality screen recordings Just released Screenplay 🎬 Ask Claude Code "make a 30s video of yoursite.com" and you get a polished MP4: smooth cursor, auto zooms, click effects, captions, optional voice-over. How it works - Claude explores the site and writes a short JSON scenario (open this page, click here, type that) - Screenplay plays it in headless Chromium (Playwright), films it and edits it - Works for desktop apps too (Mac, Windows, Linux), from the same kind of scenario No AI inside, no API key: Claude does the thinking, Screenplay does the filming and editing. Headless, so it also runs in containers without a screen. How Claude helped I built it with Claude Code, and it's made for it. npx agent-screenplay init adds an MCP server and a /screenplay command to Claude Code (Codex and Cursor work too), plus a guide that teaches the agent how to write a good scenario: what to zoom on, how long to linger, when to add a callout. After filming, Claude looks at a storyboard of the take and fixes the scenario if a shot is off. Try it (free, MIT): npx agent-screenplay init, restart Claude Code, then /screenplay Make a 30-second walkthrough of https://yoursite.com Repo: gmpetrov/agent-screenplay Feedback welcome!