phoenix-pr-screenshot

name	phoenix-pr-screenshot
description	Screenshot a running Phoenix feature and attach images to a GitHub PR. Builds the frontend, starts Phoenix with env vars, uses agent-browser to capture screenshots, uploads to GCS, and updates the PR body.
user-invocable	true
metadata	{"internal":true}

Phoenix PR Screenshot

Capture screenshots of the Phoenix UI to visually document a feature in a pull request. This skill handles the end-to-end workflow: build, launch, screenshot, upload, and attach to PR.

Prerequisites

• agent-browser CLI installed and available
• gsutil authenticated with access to gs://arize-phoenix-assets/
• gh CLI authenticated with the Arize-ai/phoenix repo
• pnpm and uv available for building and running Phoenix

Workflow

Step 1: Build the frontend

The Phoenix backend serves the built frontend from src/phoenix/server/static/. Build it from the js/app/ directory:

cd <repo-root>/app
pnpm install   # only if node_modules is missing
pnpm run build

This compiles the React app and copies static assets into the Python server's static directory. Without this step, page routes like return 404.