---
title: ToolRouter — Agent Use Case Guide
description: Step-by-step guide for completing a task with a specific AI agent using ToolRouter.
url: https://toolrouter.com/tools/web-screenshot/use-cases/monitor-visual-changes/claude
---
# How to Monitor Visual Changes with Claude

Claude makes visual change monitoring a conversational process in your terminal. Capture a baseline, deploy changes, then ask Claude to capture and compare. Claude identifies visual differences and discusses their significance, answering follow-up questions like "is that layout shift intentional?" or "does the mobile version have the same issue?" in a natural dialogue.

## Setup

claude mcp add toolrouter -- npx -y toolrouter-mcp

## Steps

1. Connect ToolRouter: claude mcp add toolrouter -- npx -y toolrouter-mcp
2. Ask Claude: "Capture a screenshot of our homepage for our visual baseline"
3. After changes are deployed, ask: "Capture a new screenshot and compare it with the baseline"
4. Claude identifies visual differences between the two captures
5. Ask Claude to flag any unintended changes that need investigation

## Example Prompt

```
Capture our homepage now and compare it to last week's screenshot. Did anything change visually that we did not intend?
```

## Tips

- Set up regular screenshot captures as part of your deployment verification
- Ask Claude to focus on specific page sections for more targeted monitoring
- Claude can compare screenshots across different viewport sizes
