smallhandsome

Posted on Jun 18

How to Build an Automated UI Monitoring Pipeline with MCP and ShotAPI

#mcp #ai #automation #screenshot

The Problem: AI Agents Can't See the Web

AI coding assistants like Claude and Cursor are incredibly powerful for writing and debugging code. But they have one fundamental limitation — they can only process text. When you ask "does my landing page look right?", they can't actually see it.

That's where ShotAPI MCP Server comes in. It gives your AI agent the ability to:

Screenshot any webpage — QA testing, compliance monitoring, competitor tracking
Render HTML/CSS visually — write design code, see the result, iterate instantly
Do it all without installing anything — remote streamable-http mode, zero local resource usage

One-Line Setup

claude mcp add --transport streamable-http shotapi https://aiphotoshop.mynatapp.cc/mcp

For Cursor, add the same URL in Settings → MCP Servers.

Tutorial: Automated UI Change Detection

Here's a practical pipeline you can set up today:

Step 1: Connect ShotAPI

Add the MCP server to your Claude Code or Cursor setup using the command above.

Step 2: Create a Monitoring Prompt

Every day at 9am, screenshot these pages and compare with yesterday's screenshots:
- https://my-app.com/ (homepage)
- https://my-app.com/pricing (pricing page)
- https://competitor.com/ (competitor homepage)

Report any visual differences you notice.

Step 3: Let Your AI Agent Do the Work

Your AI agent will:

Call ShotAPI's screenshot_one_liner tool for each URL
Compare the images pixel-by-pixel or describe differences
Send you a summary report

No Puppeteer installation. No browser resource usage. Just one MCP command.

Tutorial: Design Code → Visual Preview

Step 1: Write Your HTML/CSS

<div style="
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  border-radius: 16px;
  color: white;
  font-family: system-ui;
">
  <h2>Premium Plan</h2>
  <p style="font-size: 48px; font-weight: bold;">$29/month</p>
  <ul>
    <li>5,000 screenshots + 5,000 renders</li>
    <li>Priority processing</li>
    <li>API Key authentication</li>
  </ul>
</div>

Step 2: Ask Your Agent to Render It

Please render this HTML/CSS code as an image using ShotAPI

Step 3: Iterate

See the result → adjust the CSS → render again → repeat until it looks perfect.

Free Tier

100 screenshots + 100 renders per month, IP-based, no signup required.

Need more? Paid plans start at ¥29/month (5,000 calls) via Afdian.

Why ShotAPI vs Puppeteer MCP?

	ShotAPI	Puppeteer MCP
Setup	Zero install, remote	Install Chromium locally
Resources	No local browser	~1GB+ for Chrome
Features	Screenshot + Render	Screenshot only
China access	Direct (natapp tunnel)	Needs proxy
Free tier	100+100/month	Unlimited but heavy

Docs: https://aiphotoshop.mynatapp.cc/docs
MCP Command: claude mcp add --transport streamable-http shotapi https://aiphotoshop.mynatapp.cc/mcp

DEV Community