Use PageBolt with GitHub Copilot CLI: Automated screenshots and video demos via MCP

Source: Dev.to

Introduction

GitHub Copilot CLI now supports MCP (Model Context Protocol), allowing AI agents to capture screenshots and record videos directly from the terminal—no need to install Chromium or manage additional infrastructure. PageBolt provides an MCP server that integrates seamlessly with Copilot CLI, enabling:

• Screenshot any URL
• Record browser workflows for demos, tests, and documentation
• Operate entirely from the command line

Setup

Step 1: Create the MCP server configuration

Create the file ~/.copilot/mcp-servers.json with the following content:

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
  }
}

Step 2: Obtain an API key

Get your API key from pagebolt.dev.

Step 3: Restart Copilot CLI

After saving the configuration and adding your API key, restart Copilot CLI so it can load the new MCP server.

Using Copilot CLI with PageBolt

Take a screenshot

copilot "Take a screenshot of https://example.com and tell me what you see"

Copilot will:

1. Call PageBolt’s screenshot tool
2. Download the image
3. Analyze it
4. Report the findings

Verify a production dashboard

copilot "Check if our production dashboard is live at https://app.example.com. Take a screenshot and verify it loaded correctly."

Result: Copilot captures the dashboard, analyzes it for correctness, and returns a status such as “Dashboard is live. All metrics visible. Status: OK.”

Record a demo video

copilot "Record a video of our checkout flow starting at https://shop.example.com and ending at the order confirmation page. Save it to outputs/checkout-demo.mp4"

Copilot will:

1. Define the workflow steps
2. Call PageBolt’s record_video endpoint
3. Receive a professional MP4 (with optional narration)
4. Save it to outputs/checkout-demo.mp4

Full MCP Server Configuration Example

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "pk_live_abc123xyz"]
  },
  "filesystem": {
    "command": "node",
    "args": ["~/.copilot/tools/filesystem.js"]
  }
}

Copilot CLI will automatically discover and use both servers.

Common Use Cases

1. CI/CD Verification

copilot "After deploying to production, take a screenshot of https://app.example.com and verify the new feature is visible"

2. Visual Regression Testing

copilot "Compare the current homepage screenshot to the baseline. Report any visual differences."

3. Documentation Automation

copilot "Record videos of our top 5 features for the product docs. Save them to docs/videos/"

4. QA Automation

copilot "Test the entire signup flow. Take screenshots at each step and verify the happy path works."

5. Monitoring

copilot "Every hour, screenshot our status page and alert if anything looks broken"

Benefits Over Pre‑MCP Agents

• Visual feedback: Agents can now see the UI they generate or test.
• Automated verification: Visual checks are performed automatically.
• Full‑stack demos: Generate videos without a human videographer.
• Zero infrastructure: No need to manage browsers or headless services.

Pricing

• Free tier: 100 requests per month
• Paid plans: Starting at $29 / month for 500 requests (no setup fees, no infrastructure costs)

Compatibility

PageBolt’s MCP server works with any tool that supports MCP, including:

• GitHub Copilot CLI
• Claude Desktop
• Cursor
• Other IDEs with MCP integration

Your terminal can now serve as a complete demo studio—just configure PageBolt, issue a Copilot command, and let the AI handle screenshots, video recordings, and visual verification.