Skip to content

Screenshot Automation Guide

Jump to bottom
Henry edited this page Jan 20, 2026 · 1 revision

Screenshot Automation Guide

Purpose: Automated screenshot capture for MCP Memory Service Dashboard documentation Method: Claude Code + Chrome Extension GIF Creator Last Updated: January 2026 (v9.3.0)

🎯 Overview

This guide documents how to automatically capture high-quality screenshots of the MCP Memory Service Dashboard using Claude Code's Chrome browser automation capabilities.

Why This Approach?

Method Pros Cons
Manual Screenshots Full control Time-consuming, inconsistent
DevTools Capture High quality Viewport affected by DevTools panel
GIF Creator (1-frame) Consistent, automated, clean Requires Claude Code

The GIF Creator with single-frame export produces clean, consistent screenshots without DevTools interference.

🚀 Quick Start

Prerequisites

  1. Claude Code with Chrome extension connected
  2. Dashboard running at https://localhost:8000/
  3. Browser tab open to the dashboard

Automated Screenshot Workflow

For each tab:
1. Click on tab button → navigates to tab
2. Start GIF recording
3. Click anywhere on page (captures frame)
4. Stop recording
5. Export as single-frame GIF

📸 Step-by-Step Automation

1. Get Tab Context

First, ensure Chrome is connected and get the navigation refs:

# Get available tabs
tabs_context_mcp(createIfEmpty: true)

# Read navigation to get tab button refs
read_page(tabId: <TAB_ID>, ref_id: "ref_2", depth: 3)

Expected output:

navigation [ref_2]
 button "Dashboard" [ref_31]
 button "Search" [ref_32]
 button "Browse" [ref_33]
 button "Documents" [ref_34]
 button "Manage" [ref_35]
 button "Analytics" [ref_36]
 button "Quality" [ref_37]
 button "API Docs" [ref_38]

2. Capture Single Tab Screenshot

For each tab, execute this sequence:

// Step 1: Navigate to tab
computer(action: "left_click", ref: "ref_37", tabId: TAB_ID)  // e.g., Quality tab

// Step 2: Start recording
gif_creator(action: "start_recording", tabId: TAB_ID)

// Step 3: Capture frame (click anywhere neutral)
computer(action: "left_click", coordinate: [600, 300], tabId: TAB_ID)

// Step 4: Stop recording
gif_creator(action: "stop_recording", tabId: TAB_ID)
// Output: "Captured 1 frame"

// Step 5: Export as GIF
gif_creator(
  action: "export",
  tabId: TAB_ID,
  download: true,
  filename: "13-quality.gif"
)
// Output: "Downloaded '13-quality.gif' (112KB)"

3. Full Tab Automation Sequence

Execute for all 8 tabs:

Tab Ref Filename Expected Size
Dashboard ref_31 01-dashboard.gif ~130KB
Search ref_32 02-search.gif ~90KB
Browse ref_33 03-browse.gif ~240KB
Documents ref_34 04-documents.gif ~100KB
Manage ref_35 05-manage.gif ~110KB
Analytics ref_36 06-analytics.gif ~120KB
Quality ref_37 13-quality.gif ~110KB
API Docs ref_38 07-api-docs.gif ~150KB

🎬 Creating Animated Tour GIF

For an animated tour through all tabs:

// Start recording
gif_creator(action: "start_recording", tabId: TAB_ID)

// Navigate through each tab (each click = 1 frame)
computer(action: "left_click", ref: "ref_31", tabId: TAB_ID)  // Dashboard
computer(action: "screenshot", tabId: TAB_ID)

computer(action: "left_click", ref: "ref_32", tabId: TAB_ID)  // Search
computer(action: "screenshot", tabId: TAB_ID)

// ... repeat for all tabs ...

// Stop and export
gif_creator(action: "stop_recording", tabId: TAB_ID)
gif_creator(
  action: "export",
  tabId: TAB_ID,
  download: true,
  filename: "mcp-memory-dashboard-v9.3.0-tour.gif",
  options: {"frameDelay": 1500, "quality": 10}
)

Note: The GIF creator captures frames on left_click and navigate actions, NOT on screenshot actions.

📁 Post-Processing

Copy to Wiki Repository

# Navigate to wiki images directory
cd ~/Documents/GitHub/mcp-memory-service.wiki/images/dashboard

# Copy all downloaded GIFs
cp ~/Downloads/*.gif .

# Optional: Convert GIFs to PNGs for smaller file size
# Requires ImageMagick
for f in *.gif; do
  convert "$f" "${f%.gif}.png"
  rm "$f"
done

# Commit changes
git add .
git commit -m "Update dashboard screenshots to v9.3.0"
git push

File Naming Convention

images/dashboard/
├── 01-dashboard.png          # Main dashboard view
├── 02-search.png             # Search tab
├── 03-browse.png             # Browse/Tags view
├── 04-documents.png          # Document ingestion
├── 05-manage.png             # Bulk operations
├── 06-analytics.png          # Analytics/metrics
├── 07-api-docs.png           # API documentation
├── 08-add-memory-modal.png   # Add memory dialog
├── 09-settings-modal.png     # Settings dialog
├── 10-dark-mode-dashboard.png # Dark theme
├── 11-dark-mode-search.png   # Dark theme search
├── 12-analytics-complete.png # Full analytics view
├── 13-quality.png            # Quality analytics (NEW v9.0)
└── mcp-memory-dashboard-v9.3.0-tour.gif  # Animated tour

🔧 Troubleshooting

"Captured 0 frames"

Cause: screenshot action doesn't capture frames, only left_click and navigate do.

Solution: Use a neutral click on the page instead of screenshot:

computer(action: "left_click", coordinate: [600, 300], tabId: TAB_ID)

Element refs not found

Cause: Page state changed, refs are stale.

Solution: Re-read the page to get fresh refs:

read_page(tabId: TAB_ID, depth: 1)
read_page(tabId: TAB_ID, ref_id: "ref_2", depth: 3)  // Navigation

Chrome extension disconnected

Cause: Extension timeout or browser restart.

Solution:

  1. Check Chrome extension icon is logged in
  2. Call tabs_context_mcp(createIfEmpty: true) to reconnect
  3. If still failing, restart Chrome completely

Wrong viewport size

Cause: Browser window resized or DevTools open.

Solution:

// Resize window to standard dimensions
resize_window(tabId: TAB_ID, width: 1280, height: 720)

📋 Complete Example Session

User: "Create new dashboard screenshots for v9.3.0"

Claude:
1. tabs_context_mcp(createIfEmpty: true)
   → Tab ID: 238270

2. read_page(tabId: 238270, ref_id: "ref_2", depth: 3)
   → Get nav refs: ref_31 (Dashboard) ... ref_38 (API Docs)

3. For Quality tab (ref_37):
   - computer(action: "left_click", ref: "ref_37", tabId: 238270)
   - gif_creator(action: "start_recording", tabId: 238270)
   - computer(action: "left_click", coordinate: [600, 300], tabId: 238270)
   - gif_creator(action: "stop_recording", tabId: 238270)
   - gif_creator(action: "export", download: true, filename: "13-quality.gif")
   → Downloaded "13-quality.gif" (112KB)

4. Repeat for all tabs...

5. User copies files:
   cp ~/Downloads/*.gif ~/Documents/GitHub/mcp-memory-service.wiki/images/dashboard/
   git add . && git commit -m "v9.3.0 screenshots" && git push

🔄 Version History

Version Date Changes
9.3.0 Jan 2026 Added Quality tab, updated all screenshots
8.9.0 Oct 2025 Initial screenshot set

📚 Related Documentation

Clone this wiki locally