Add browser session recording to GIF/MP4

[MathiasPaulenko]

Add browser session recording to GIF/MP4

Context

WaveXisMCP has wavexis_record (records interactions as YAML) and wavexis_video_record (records video as WebM). But there's no easy way to create a GIF or MP4 from a recorded session that's suitable for:

• README demos
• Bug reports with visual reproduction
• Documentation GIFs
• Social media sharing

What needs to happen

New tool wavexis_session_to_gif (or wavexis_record_to_gif) that:

1. Takes a recorded session (either live or from YAML)
2. Captures screenshots at each step (navigate, click, type, etc.)
3. Combines them into an animated GIF or MP4

Options

• format: "gif" | "mp4" (default: "gif")
• fps: frames per second (default: 2 for GIF, 10 for MP4)
• output_path: where to save the file
• highlight_clicks: draw a red circle at click coordinates (default: true)
• highlight_types: draw a box around typed text (default: true)
• wait_after_action: seconds to wait after each action before capturing (default: 0.5)

Implementation

Option A: Screenshot-based (simpler, no external deps)

1. During session recording, capture a screenshot after each action
2. Use Pillow (PIL.Image) to combine screenshots into a GIF
3. For MP4, use imageio or opencv-python

Option B: Video-based (better quality)

1. Use the existing wavexis_video_record to capture WebM
2. Convert to GIF using ffmpeg or moviepy
3. Higher quality but requires ffmpeg as a dependency

Recommendation: Start with Option A (screenshot-based) — no external deps beyond Pillow which is already common.

Example

# Record a session
wavexis_session_open(backend="cdp")
sid = "abc-123"

wavexis_navigate(session_id=sid, url="https://example.com")
wavexis_click(session_id=sid, selector="#login")
wavexis_type(session_id=sid, selector="#username", text="admin@example.com")
wavexis_click(session_id=sid, selector="#submit")

# Convert to GIF
wavexis_session_to_gif(session_id=sid, output_path="demo.gif", fps=2)
-> {"gif_path": "demo.gif", "frames": 4, "duration_seconds": 2.0}

Getting started

1. Read wavexis_mcp/tools/data.py to see how wavexis_record works
2. Read wavexis_mcp/tools/video.py to see how video recording works
3. Implement the screenshot-based approach first
4. Add Pillow to the data optional dependency group in pyproject.toml
5. Add tests
6. Update docs/tools/data.md

References

• Pillow GIF docs
• Our recording tool docs
• Our video tool docs