gmpetrov

⭐ Screenplay ⭐ gmpetrov/agent-screenplay 1. 코딩 에이전트한테 말 한마디 하면 웹사이트나 데스크톱 앱 화면 녹화 영상을 만들어주는 오픈소스 도구가 나옴 2. Screenplay 자체에는 AI도 모델 키도 없음. 생각은 내 에이전트가 하고 Screenplay는 촬영과 편집만 함 3. 에이전트가 사이트를 둘러보고 짧은 시나리오를 쓰면 브라우저에서 그대로 재생하며 촬영함. Screen Studio처럼 부드러운 커서, 행동을 따라가는 자동 확대, 클릭 효과, 말풍선, 자막, 제목 카드까지 넣어줌 4. 클로드 코드에서 /screenplay 30초짜리 제품 소개 영상 만들어줘 처럼 말하면 끝. Codex·Cursor 같은 MCP 지원 에이전트도 가능. 기본 1920×1080, 최대 4K, GIF도 뽑을 수 있고 목소리 해설은 Cartesia·ElevenLabs나 내 음성 파일로 넣음 5. MIT 무료, 공개 하루 만에 스타 44개. Node 20 이상 필요. 맥 데스크톱 앱 촬영은 화면 기록·손쉬운 사용 권한 필요, 리눅스는 X11만 지원. 클릭·전송이 실제로 실행하니 데모 계정에서 쓰기 설치: npx agent-screenplay init 제품 소개 영상이나 사용법 영상을 자주 만들어야 하는 사람한테 좋을 듯 ━━━━━━━━━━ 🇺🇸 1. An open-source tool that turns one sentence to your coding agent into a screen recording of any website or desktop app 2. Screenplay itself has no AI and needs no model key. Your agent does the thinking, Screenplay just films and edits 3. The agent explores the site and writes a short scenario, then Screenplay plays it in a browser and films it. Like Screen Studio: smooth cursor, auto zoom that follows the action, click effects, callouts, captions, and title cards 4. In Claude Code, type /screenplay and say something like "make a 30-second walkthrough". Works with Codex, Cursor, and other MCP agents too. 1920×1080 by default, up to 4K, GIF export, and voice-over via Cartesia, ElevenLabs, or your own audio files 5. Free under MIT, 44 stars one day after release. Requires Node 20+. Filming desktop apps on Mac needs Screen Recording and Accessibility permissions; Linux needs X11. Clicks and sends really happen, so use a demo account Install: npx agent-screenplay init Looks great for anyone who regularly makes product demos or how-to videos. #AI #ClaudeCode #AIAgents #MCP #OpenSource

Hi mods, could you review Screenplay for an intro post on r/vibecoding? It's an open-source tool that lets Claude Code, Codex or Cursor film any website or app and edit the video with a smooth cursor, zooms and captions: gmpetrov/agent-screenplay t.co

Show HN: Agent-screenplay – Create beautiful screen recordings with one prompt

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!