I was starting to play with Playwright's MCP server for taking screenshots and whatnot and had a thought that I could try to automate taking screenshots for my PR descriptions. This is a fairly common workflow I do manually for UI related changes.
After a few minutes, I had the Playwright MCP taking the screenshots as desired, but then what? How do I get it to the PR descriptions? Turns out the gh CLI doesn't seem to have a way to do this... so I spent some tokens and spun up an s3-mcp package on NPM that allows me to upload screenshots (or other files) to an S3 compatible bucket (I use Cloudflare R2).
After adding the MCP servers for Playwright + my @afomera/s3-mcp server, I was able to restart Claude Code and had the functionality I wished up in my hands.
Give it a try!
Setup the MCP by following the README
https://github.com/afomera/s3-mcp
Prompt away
I've been prompting my PR creation with a script like:
Use the Playwright MCP on the RUNNING SERVER PROCESS (via Conductor's MCP tools, find the running web process port) to browse + navigate to the affected pages (if present), take screenshots in light / dark mode if the app supports it and then use the s3-mcp to upload them for PR review.
Keep a good name for the files like [date]-[sha]-[pagename].png Put them in a pr-screenshots folder and under a repo name folder, ie afomera-dev if the repo name is afomera.dev
When the images are uploaded the PR should display any uploaded assets as Images (if they're images from Playwright) or link to other non-image file types (like zip or pdfs)
Lastly, cleanup any temporary assets once done so the working tree is clean
Anyway, hope you find this useful, let me know if there's any suggestions!
Andrea