mcpField
P
phoenix-pr-screenshot

phoenix-pr-screenshot

github.com/arize-ai开发12.0k41 次安装今天更新
代码仓库

关于 phoenix-pr-screenshot

Phoenix PR Screenshot 是用于截取 Phoenix 界面并将图片附加到拉取请求的技能。它指导前端构建、本地启动、截图、上传和清理，供贡献者以视觉方式记录功能。

主要功能

  1. 01构建 Phoenix 前端
  2. 02启动本地 Phoenix 服务
  3. 03截取并检查界面截图
  4. 04将媒体附加到 GitHub PR
  5. 05清理服务和浏览器会话

适用场景

  1. 01在拉取请求中记录功能
  2. 02展示交互前后的界面状态
  3. 03以 GIF 或视频呈现动态界面状态

安装

复制下面的命令，在终端中运行。

$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 后端。务必使用全新的工作目录，以避免 worktree 中的数据库迁移冲突：

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

要点：

  • 使用 PHOENIX_PORT（而非 --port）设置端口 — CLI 不接受端口标志
  • 使用临时的 PHOENIX_WORKING_DIR，以免与可能已应用较新迁移的现有数据库冲突
  • 等待服务就绪：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 仅允许一个媒体项目，因此需要展示多个状态时，优先使用单个 GIF 或视频，而非一组静态图片。

步骤 5：清理
# Kill the Phoenix server
kill <PID>

关闭为截取屏幕截图而创建的浏览器会话。

移除屏幕截图

按照步骤 4 将正文读取到文件中，移除说明文字和图片引用，然后使用 gh pr edit <PR_NUMBER> --body-file body.md 应用修改。

评论

支持 Markdown