DEV Community

Custodia-Admin
Custodia-Admin

Posted on

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

#mcp #github #githubcopilot #automation

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

GitHub Copilot CLI just went GA with MCP (Model Context Protocol) support. This means your command-line AI agents can now take screenshots and record videos natively—without installing Chromium or managing infrastructure.

PageBolt's MCP server integrates seamlessly with Copilot CLI. Your agents can now:

  1. Screenshot any URL — capture the current state of a website
  2. Record browser workflows — automate demos, tests, and documentation
  3. Do it all from the terminal — no UI, pure CLI

Let's set it up.

Install PageBolt MCP in GitHub Copilot CLI

GitHub Copilot CLI reads MCP servers from a config file. Here's how to add PageBolt:

Step 1: Create ~/.copilot/mcp-servers.json:

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

Step 2: Get your API key at pagebolt.dev

Step 3: Restart Copilot CLI

That's it. Copilot CLI now has native access to PageBolt's screenshot and video tools.

Using PageBolt in Copilot CLI

Open your terminal and invoke Copilot CLI:

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

Copilot will:

  1. Call PageBolt's screenshot tool automatically
  2. Download the image
  3. Analyze it
  4. Report back with what it found

No configuration needed. It just works.

Real Example: Copilot Agent Testing a Deployment 

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

What happens:

  1. Copilot calls PageBolt screenshot
  2. Gets image of the dashboard
  3. Analyzes it for correctness
  4. Reports: "Dashboard is live. All metrics visible. Status: OK"

No manual QA needed. Your AI agent verified the deployment automatically.

Recording Demo Videos with Copilot CLI

Use PageBolt's record_video endpoint to automate demo generation:

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"
Enter fullscreen mode Exit fullscreen mode

What happens:

  1. Copilot defines the workflow steps
  2. Calls PageBolt's record_video endpoint
  3. Gets back a professional MP4 with narration
  4. Saves it to your outputs directory

Demo videos without hiring a videographer.

Real Config Example: Copilot CLI with PageBolt

Here's a complete ~/.copilot/mcp-servers.json:

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

Copilot CLI will automatically discover and use both servers.

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"
Enter fullscreen mode Exit fullscreen mode

2. Visual Regression Testing

copilot "Compare the current homepage screenshot to the baseline. Report any visual differences."
Enter fullscreen mode Exit fullscreen mode

3. Documentation Automation

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

4. QA Automation

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

5. Monitoring

copilot "Every hour, screenshot our status page and alert if anything looks broken"
Enter fullscreen mode Exit fullscreen mode

Why This Matters

Before MCP, AI agents in the terminal were limited:

  • They could write code, but not see what it produced
  • They could automate tests, but not verify them visually
  • They were stuck in text-only mode

With PageBolt MCP + Copilot CLI, agents are fully empowered:

  • Screenshot any URL instantly
  • Record videos of workflows
  • Verify deployments automatically
  • Generate demos on demand
  • All from the terminal

Getting Started

  1. Install PageBolt MCP in your Copilot CLI config
  2. Ask Copilot CLI to take a screenshot
  3. Ask it to record a demo video
  4. Watch your agent work

Your terminal just became your demo studio.

Pricing

PageBolt MCP uses the same API:

  • Free tier: 100 requests/month
  • Paid: From $29/month (500 requests)
  • No setup fees, no infrastructure costs

PageBolt is the MCP server for web automation. Use it with GitHub Copilot CLI, Claude Desktop, Cursor, or any IDE that supports MCP.

Top comments (0)