mcpField
P
phoenix-pr-screenshot

phoenix-pr-screenshot

github.com/arize-ai開発12.0k41 回インストール今日更新
リポジトリ

phoenix-pr-screenshot について

Phoenix PR Screenshotは、Phoenixの画面を撮影し、プルリクエストに添付するスキルです。フロントエンドのビルドから起動、撮影、アップロード、後片付けまで案内し、機能を視覚的に記録するコントリビューター向けです。

主な機能

  1. 01Phoenixフロントエンドのビルド
  2. 02ローカルPhoenixサーバーの起動
  3. 03画面の撮影と確認
  4. 04GitHub PRへのメディア添付
  5. 05サーバーとブラウザーの終了

活用シーン

  1. 01プルリクエストで機能を記録
  2. 02操作前後の画面状態を表示
  3. 03GIFまたは動画で動的な画面状態を添付

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/arize-ai/phoenix --skill phoenix-pr-screenshot

インストール後、Claude Code で/phoenix-pr-screenshotを入力して読み込まれたか確認します。

詳細

Phoenix PR のスクリーンショット

プルリクエスト内の機能を視覚的に記録するため、Phoenix UI のスクリーンショットを撮影します。このスキルでは、ビルド、起動、スクリーンショットの撮影、アップロード、PR への添付までの一連のワークフローを扱います。

前提条件

  • ローカルの Phoenix UI を操作し、スクリーンショットを保存できるブラウザーツール
  • gh CLI 2.102 以降（--attach 用）。Arize-ai/phoenix リポジトリで認証済みであること
  • Phoenix のビルドと実行に使用できる pnpm と uv

ワークフロー

ステップ 1：フロントエンドをビルドする

Phoenix バックエンドは、ビルド済みのフロントエンドを src/phoenix/server/static/ から配信します。js/app/ ディレクトリからビルドしてください。

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

これにより、React アプリがコンパイルされ、静的アセットが Python サーバーの静的ファイル用ディレクトリにコピーされます。この手順を行わないと、/playground のようなページのルートは 404 を返します。

ステップ 2：Phoenix を起動する

機能に必要な環境変数を設定して、Phoenix バックエンドを起動します。ワークツリー内での DB 移行の競合を避けるため、必ず新しい作業ディレクトリを使用してください。

PHOENIX_PORT=6007 PHOENIX_WORKING_DIR=/tmp/phoenix-screenshot-demo <OTHER_ENV_VARS> uv run phoenix serve &

重要な点：

  • ポートの設定には --port ではなく PHOENIX_PORT を使用してください。CLI はポートフラグを受け付けません。
  • 新しい PHOENIX_WORKING_DIR を一時的に使用してください。新しい移行が適用されている可能性がある既存の DB との競合を避けられます。
  • サーバーの準備が整うまで待ちます。sleep 10 && curl -s -o /dev/null -w "%{http_code}" http://localhost:6007/playground を実行すると、200 が返るはずです。
  • 失敗した場合は /tmp/phoenix-*.log を確認してください。よくある原因は、移行エラー（新しい作業ディレクトリを使用してください）またはポートの競合です。
ステップ 3：スクリーンショットを撮影する

利用可能なブラウザーツールで http://localhost:6007/playground（または該当する機能ページ）を開き、機能が分かるように UI を操作して、スクリーンショットをローカルに保存します。

  • 操作や撮影を行う前に、対象の UI 要素が表示され、操作可能になっていることを確認してください。
  • ページ遷移や DOM の変更後は、次に操作する要素を選ぶ前に、ページを再度確認してください。
  • 必要に応じて、複数のスクリーンショットを撮影してください（変更前／変更後、ドロップダウンを開いた状態など）。
  • 一時的な状態やアニメーション状態を撮影する場合は、その状態を表示させる操作中に、数分の一秒間隔で連続撮影し、その状態が写っているフレームを選んで GIF にまとめてください。
  • 保存したスクリーンショットを表示して意図した内容が撮影されていることを確認し、アップロード手順ではローカルパスを使用してください。
ステップ 4：PR に添付する

gh pr edit --attach は画像または動画を GitHub にアップロードし、本文内の ./file 参照をホストされた URL に書き換えます。ファイル名は <PR_NUMBER>-<descriptive-name>.png にしてください（例：11986-playground-loaded.png）。内容を失わないよう、まず現在の本文を読み取ります。

gh pr view <PR_NUMBER> --json body -q .body > body.md
# Insert the media under the What sentence, with a bold caption stating what to notice:
#   **<what to notice>**
#
#   ![<alt text>](./<PR_NUMBER>-<name>.png)
gh pr edit <PR_NUMBER> --body-file body.md --attach './<PR_NUMBER>-<name>.png#<alt text>'

ファイルがあるディレクトリから実行してください。そのディレクトリが Git チェックアウトではない場合は、-R Arize-ai/phoenix を指定します。phoenix-pr-description ではメディアを 1 つだけ指定できるため、状態を複数示す場合は、静止画を複数枚並べるよりも、1 つの GIF または動画を使用してください。

ステップ 5：クリーンアップ
# Kill the Phoenix server
kill <PID>

スクリーンショットの撮影に使用したブラウザーセッションを閉じてください。

スクリーンショットの削除

ステップ 4 と同じ方法で本文をファイルに読み込み、キャプションと画像参照を削除してから、gh pr edit <PR_NUMBER> --body-file body.md で適用します。

コメント

Markdown 対応