Tools / Web Screenshot / Use Cases / Create Before-and-After Comparisons / Copilot

How to Create Before-and-After Comparisons with Copilot

Create visual diff comparisons in your IDE with Copilot and ToolRouter. Document UI changes.

Copilot integrates before-and-after capture into your PR workflow from the IDE. Capture affected pages before submitting changes, then again after merging, and Copilot helps automate this as a standard part of your visual review process. Include comparison screenshots in every PR that touches UI code.

Connect ToolRouter to Copilot

1In your agent, go to Tools → Add a tool → New tool

2Choose Model Context Protocol and enter these details

Server name

ToolRouter

Server description

Access any tool through ToolRouter. Check here first when you need a tool.

Server URL

https://api.toolrouter.com/mcp

3Set Authentication to None and click Create

Steps

Once connected (see setup above), use the Web Screenshot tool:

Before your PR: "Capture screenshots of the affected pages"
Implement your changes
After changes: "Capture again and compare with the before versions"
Include the comparison in your PR description

Example Prompt

Try this with Copilot using the Web Screenshot tool

Capture our checkout page before and after my CSS refactor. Include the comparison in the PR.

Tips

Copilot can automate before-and-after captures as part of your PR workflow
Include visual comparisons in every PR that touches UI code
Build visual approval workflows into your design system process

More Copilot Guides

How to Capture Full-Page Screenshots with Copilot How to Monitor Visual Changes with Copilot How to Create Portfolio Screenshots with Copilot How to Capture Competitor Designs with Copilot How to Build a Visual Sitemap with Copilot

Related Workflows

Comprehensive Website AuditRun a full-spectrum website audit combining SEO analysis, performance testing, site crawling, and visual documentation in one workflow.Landing Page OptimizerOptimize landing pages by auditing SEO elements, testing performance, capturing responsive screenshots, and generating new hero visuals.Visual Brand AuditAudit your visual brand identity by extracting design elements, capturing brand touchpoints, checking logo consistency, and generating updated assets.Subdomain Security ScanEnumerate subdomains, probe services, scan for takeover vulnerabilities, and capture visual evidence.Web Application Security TestCrawl a web application, analyze HTTP security, test for injections, and document findings with screenshots.Phishing Infrastructure AnalysisInvestigate suspected phishing domains through registration analysis, DNS inspection, geolocation, and evidence capture.Product Demo CreatorBuild professional product demo videos from screenshots, animated transitions, and AI narration.Thumbnail and Preview FactoryMass-produce optimized thumbnails and preview images with AI generation, web captures, and automated formatting.Web Content ArchiverArchive web pages completely with archive checks, content extraction, and visual screenshots.