DEV Community: smallhandsome

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

smallhandsome — Thu, 18 Jun 2026 13:09:44 +0000

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

Give AI Agents Eyes: ShotAPI MCP Server for Web Screenshots

smallhandsome — Thu, 11 Jun 2026 08:45:53 +0000

Why This Matters

When you're working with an AI coding agent, you often need to:

Verify deployments — "Does the landing page look right?"
Debug UI issues — "Why is the layout broken on mobile?"
Capture visual data — "What does this dashboard chart show?"
Test responsive designs — "How does this look at 1280px vs 768px?"

Your agent can fetch the HTML, but it can't render it. ShotAPI fills that gap.

One Command to Connect

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

# Cursor → Settings → MCP → Add server
{
  "mcpServers": {
    "shotapi": {
      "type": "streamable-http",
      "url": "https://aiphotoshop.mynatapp.cc/mcp"
    }
  }
}

No Python, no Playwright, no Docker. It's a remote MCP server — just connect and start screenshoting.

3 MCP Tools

Tool	What it does	Example prompt
`screenshot`	Capture a webpage screenshot	"Screenshot github.com"
`render`	Render HTML string to an image	"Render this HTML to an image"
`health`	Check service status	"Is ShotAPI alive?"

REST API (No MCP Required)

# Screenshot
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://news.ycombinator.com" -o shot.png

# Render HTML
curl -s -X POST "https://aiphotoshop.mynatapp.cc/v1/render" \
  -H "Content-Type: application/json" \
  -d '{"html":"<h1>Hello ShotAPI</h1>","width":800,"height":600}' \
  -o render.png

Free Tier vs Paid

Feature	Free (10+10/mo)	Paid ($4.90/mo)
Screenshot+Render	10 each/month	5,000+/month
Formats	PNG/JPEG	PNG/JPEG/WebP
Full-page screenshots	❌	✅
CSS selector capture	❌	✅
Custom viewport sizes	❌	✅
Auth	IP-based	API Key

Key Features

Zero install — Remote streamable-http MCP, no local dependencies
Built-in caching — Same URL returns instantly on repeat requests
Ad blocking — block_ads=true strips ads automatically
China direct — No VPN needed, domestic tunnel for Chinese users
Official MCP Registry — Listed at registry.modelcontextprotocol.io

Try It Now

Head to ShotAPI Docs and click "Screenshot it" — see it work before you even configure MCP.

GitHub: smallhandsome/shotapi-mcp-server
Docs: aiphotoshop.mynatapp.cc/en/docs
Pricing: aiphotoshop.mynatapp.cc/en/pricing

Give Your AI Agent Eyes: Building a Visual MCP Server for Web Screenshots

smallhandsome — Tue, 09 Jun 2026 08:07:16 +0000

Launch Announcement: ShotAPI MCP Server is launching on Product Hunt on Wednesday June 10! Come support us!

Give Your AI Agent Eyes: Building a Visual MCP Server for Web Screenshots

Why AI Agents Need to See the Web

MCP (Model Context Protocol) agents can fetch and parse web content, but they're blind to how it looks. A broken layout, a misaligned element, a CSS rendering bug — these are visual problems that text alone can't diagnose.

That's why I built ShotAPI — an MCP server that gives Claude, Cursor, and other AI agents screenshot and HTML rendering capabilities via a single remote connection.

No Python, no Playwright, no local install. One command:

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

Three Tools, One Connection

ShotAPI exposes three MCP tools through streamable-http (no stdio, no local setup):

screenshot_one_liner(url) — Quick screenshot of any URL. One parameter, one result.
screenshot(url, selector?, fullpage?, viewport?, format?) — Full control: CSS selectors, viewport sizing, full-page captures, PNG/JPEG/WebP output.
render(html) — Render any HTML/CSS to an image. Write code, see the result, revise. This closes the visual feedback loop.

Practical Use Cases

1. Visual Bug Detection

Tell your agent to check a webpage, and it can see the problem:

> Take a screenshot of https://myapp.com/dashboard and check if the sidebar overlaps the main content

The agent gets an actual image — not just the DOM text — and can identify layout issues, missing images, or broken responsive designs.

2. Design Review Automation

> Compare screenshots of https://mysite.com before and after the CSS change

The agent captures both states visually and describes the differences — something text-based tools can't do.

3. HTML Prototyping with `render`

The render tool is where it gets interesting. Your agent can:

> Write a landing page hero section with Tailwind CSS, render it, and show me how it looks

The agent writes HTML -> renders it -> sees the visual result -> identifies issues -> revises -> renders again. A real visual feedback loop, all within the conversation.

# Quick test from your terminal
curl -s "https://aiphotoshop.mynatapp.cc/v1/render"   -X POST   -H "Content-Type: application/json"   -d '{"html": "<h1 style="color:#4f46e5;font-family:sans-serif">ShotAPI Works!</h1>"}'   -o rendered.png

4. Batch Monitoring

Take periodic screenshots of production sites to catch visual regressions:

import httpx

sites = ["https://myap---
title: "How I Built ShotAPI: An MCP Server That Gives AI Agents Visual Context"
published: false
description: "A practical guide to building and deploying an MCP server for screenshot and HTML rendering, with real Claude integration examples"
tags: mcp, ai, screenshot, claude, tutorial
cover_image: https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com/smallhandsome/shotapi-mcp-server
---

## The Problem: AI Agents Are Blind

When you're using Claude Code or Cursor to build web applications, there's a fundamental gap: **the AI can't see what it's building**. It writes HTML and CSS, but it has no way to verify the visual output. It can't tell if the layout is broken, if the colors look right, or if the responsive design actually works.

This isn just a minor inconvenience. It leads to:
- Iterative "check it and tell me what you see" loops that waste time
- Deployments that look fine in code but broken in production
- No way for AI agents to autonomously verify UI changes

## The Solution: ShotAPI MCP Server

[ShotAPI](https://aiphotoshop.mynatapp.cc/docs) is an MCP (Model Context Protocol) server that provides two tools:

1. **`screenshot`** — Captures a full-page screenshot of any URL
2. **`render`** — Renders raw HTML/CSS and returns the visual result

It works as a remote MCP server via streamable-http transport. No browser install needed on your machine.

### Connect in One Command

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


Or for Cursor:

json
{
"mcpServers": {
"shotapi": {
"url": "https://aiphotoshop.mynatapp.cc/mcp",
"transport": "streamable-http"
}
}
}


Free tier: 100 screenshots + 100 renders per month, no signup needed.

## Real Use Cases

### 1. Claude Verifies Its Own Code

plaintext
Human: Build a landing page with a hero section, testimonials, and pricing grid.

Claude: [writes HTML/CSS code]

Claude: Let me verify this looks correct. I'll use the render tool to check.

[Claude calls ShotAPI render tool with the HTML it just wrote]

Claude: I can see the hero section is working, but the pricing grid is overlapping on mobile. Let me fix the responsive breakpoints.


### 2. Deployment Verification

plaintext
Human: I just deployed my app to production. Check if it looks right.

Claude: [calls ShotAPI screenshot tool on https://yourapp.com]

Claude: The page loaded successfully. I notice the footer text is cut off — looks like a CSS overflow issue. Also the background image didn't load (404).


### 3. Competitor/Reference Site Analysis

plaintext
Human: I want my site to look like stripe.com. What layout patterns do they use?

Claude: [calls ShotAPI screenshot tool on https://stripe.com]

Claude: Stripe uses a dark hero with gradient text, centered nav with minimal items, and a card-based feature grid. The hero has a large heading with animated gradient, and below it is a product screenshot.


### 4. Automated UI Regression Testing

In CI/CD pipelines, you can use the `/v1/screenshot` REST API to capture screenshots before and after changes:

bash

Before deploy

curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://staging.myapp.com" -o before.png

After deploy

curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://staging.myapp.com" -o after.png

Compare

If visual regression detected, block the deploy


## Technical Architecture

ShotAPI is built with:
- **FastAPI** for the HTTP API and MCP server endpoints
- **Playwright** (Chromium) for headless browser rendering
- **Streamable-HTTP** MCP transport (no SSE, no WebSocket — simple POST-based)
- **NATAPP tunnel** for Chinese network accessibility

The MCP server follows the official MCP specification. It registers two tools with proper input schemas:

python

Tool definition in MCP server

tools = [
{
"name": "screenshot",
"description": "Capture a screenshot of a webpage",
"inputSchema": {
"type": "object",
"properties": {
"url": {"type": "string", "description": "URL to screenshot"},
"width": {"type": "integer", "description": "Viewport width (default 1280)"},
"full_page": {"type": "boolean", "description": "Capture full page (default true)"},
},
"required": ["url"]
}
},
{
"name": "render",
"description": "Render HTML/CSS and return the visual result",
"inputSchema": {
"type": "object",
"properties": {
"html": {"type": "string", "description": "HTML content to render"},
"css": {"type": "string", "description": "Optional CSS to apply"},
},
"required": ["html"]
}
}
]


## REST API (for non-MCP usage)

If you're not using Claude/Cursor but still want screenshots:

bash

Screenshot any URL (free, no API key needed)

curl "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com"

Render HTML

curl -X POST "https://aiphotoshop.mynatapp.cc/v1/render" -H "Content-Type: application/json" -d '{"html": "

Hello World

"}'


Response is a PNG image (or JSON with base64 data).

## What's Next

ShotAPI is listed in the [official MCP Registry](https://registry.modelcontextprotocol.io) and [awesome-mcp-servers](https://github.com/punkpeye/awesome-mcp-servers). The free tier gives 100+100 calls/month with no signup.

If you're building AI agent workflows that need visual context, give it a try:

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


[GitHub Repo](https://github.com/smallhandsome/shotapi-mcp-server) | [Docs](https://aiphotoshop.mynatapp.cc/docs) | [MCP Registry](https://registry.modelcontextprotocol.io)
p.com", "https://docs.myapp.com", "https://admin.myapp.com"]
for site in sites:
    resp = httpx.post("https://aiphotoshop.mynatapp.cc/v1/screenshot",
                      json={"url": site, "fullpage": True},
                      headers={"Authorization": "Bearer YOUR_KEY"})
    with open(f"{site.split('//')[1].replace('.','_')}.png", "wb") as f:
        f.write(resp.content)

shell

Free Tier — No Signup Required

ShotAPI has a free tier that works without any API key:

30 screenshots + 30 renders per month per IP address
All 3 MCP tools available
Streamable-http remote connection (no VPN needed from China)

Just add the MCP connection and start using it. No registration, no email, no keys.

Getting Started

For Claude Code / Claude Desktop

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

For Cursor

Add to your Cursor MCP config:

{
  "mcpServers": {
    "shotapi": {
      "url": "https://aiphotoshop.mynatapp.cc/mcp",
      "transport": "streamable-http"
    }
  }
}

Direct API (no MCP)

# Free screenshot (IP-based, no key)
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://news.ycombinator.com" -o hn.png

# With API key (dedicated quota)
curl -s "https://aiphotoshop.mynatapp.cc/v1/screenshot?url=https://github.com&selector=.Header"   -H "Authorization: Bearer YOUR_KEY"   -o header.png

Paid Tiers

Tier	Price	Calls/Month	Features
Starter	$4.90/mo	5,000+5,000	API Key, full params
Pro	$9.90/mo	20,000+20,000	Full params, usage tracking
Free	$0	30+30	IP-based, no signup

Chinese users can pay via WeChat/Alipay on Afdian with instant activation.

What's Next

I'm actively working on:

PDF export support
Video/animation capture
Batch screenshot API
Webhook notifications for monitoring

Try it now — just add the MCP connection and ask your agent to take a screenshot. No signup, no install, no waiting.

Docs: https://aiphotoshop.mynatapp.cc/en/docs
Smithery: https://smithery.ai/server/@ljs/shotapi
GitHub: https://github.com/smallhandsome/shotapi-mcp-server

ShotAPI is an open MCP server for web screenshots and HTML rendering. Free tier available with no registration required.

ShotAPI: An MCP Server for AI Agent Screenshots and HTML Rendering

smallhandsome — Sat, 06 Jun 2026 04:04:57 +0000

We just launched on Product Hunt! Check it out and support us: https://www.producthunt.com/posts/shotapi

If you're building AI-powered applications and need visual capabilities, ShotAPI is an MCP server that gives your AI agents the ability to capture screenshots and render HTML to images.

What is ShotAPI?

ShotAPI is an MCP (Model Context Protocol) server built with FastAPI + Playwright that provides:

Screenshot capture of any URL
HTML rendering to PNG/JPEG images
MCP compatibility with Claude, Cursor, and any MCP client
streamable-http transport for remote access

How It Works

# Via MCP protocol (Claude, Cursor, etc.)
# The server exposes two main tools:

1. screenshot(url) -> captures a screenshot of any URL
2. render_html(html_content) -> renders HTML string to an image

The server runs at https://aiphotoshop.mynatapp.cc/mcp and supports the standard MCP streamable-http transport.

Pricing

Free tier: 100 calls/month
Starter: $4.90/month (5,000 calls)
Pro: $9.90/month (20,000 calls)

Getting Started

Add the MCP endpoint to your Claude/Cursor config
Your AI agent can now capture screenshots and render HTML
Check the docs at https://aiphotoshop.mynatapp.cc/docs

ShotAPI - Let AI Agents See the Web: Screenshot and Render MCP Server

smallhandsome — Fri, 05 Jun 2026 16:27:40 +0000

The web is visual — but most AI agents can only read text. What if your AI assistant could actually see a webpage, capture a screenshot, or render HTML to an image?

That's exactly what ShotAPI does. It's an MCP (Model Context Protocol) server that gives AI agents like Claude, Cursor, and Copilot the ability to take screenshots of any URL and render HTML/CSS to images.

What is ShotAPI?

ShotAPI is a screenshot and render API built as an MCP Server. It runs on FastAPI + Playwright, offering two core tools:

screenshot — Capture any webpage as a PNG/JPEG image
render — Convert HTML/CSS markup into a rendered image

How AI Agents Use ShotAPI

Via the MCP protocol, any MCP-compatible AI client can connect to ShotAPI and use these tools natively:

Claude Desktop — Add ShotAPI as an MCP server, and Claude can see any webpage you mention
Cursor/Windsurf — AI coding assistants can screenshot sites for design reference
Custom agents — Any agent using the MCP SDK can integrate visual web capabilities

Two Transport Modes

ShotAPI supports both MCP transport modes:

stdio — For local Claude Desktop integration (JSON-RPC over stdin/stdout)
streamable-http — For remote/Cursor integration (HTTP at /mcp endpoint)

The streamable-http mode means you can host ShotAPI remotely and let multiple agents connect — no local installation needed.

Quick Start: Connect as MCP Server

For Claude Desktop, add this to your MCP config:

{
  "mcpServers": {
    "shotapi": {
      "url": "https://aiphotoshop.mynatapp.cc/mcp",
      "transport": "streamable-http"
    }
  }
}

For Cursor/Windsurf, the same config works in their MCP settings.

Free Tier + Paid Plans

ShotAPI offers a generous free tier:

30 screenshots + 30 renders per month (IP-based, no signup needed)
No API key required for free usage

Paid plans for heavier usage:

Starter — 5,000 calls/month
Pro — 20,000 calls/month

API Endpoints

GET /v1/screenshot?url=https://example.com&width=1280&height=720&format=png
GET /v1/render?html=<h1>Hello</h1>&width=800&height=600&format=png

Both endpoints return image data directly.

Get Started

Visit ShotAPI website to try it free
Check the API docs for integration details
Connect as MCP server in your AI client config

ShotAPI is open and ready — give your AI agent eyes on the web!

DEV Community: smallhandsome

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

The Problem: AI Agents Can't See the Web

One-Line Setup

Tutorial: Automated UI Change Detection

Step 1: Connect ShotAPI

Step 2: Create a Monitoring Prompt

Step 3: Let Your AI Agent Do the Work

Tutorial: Design Code → Visual Preview

Step 1: Write Your HTML/CSS

Step 2: Ask Your Agent to Render It

Step 3: Iterate

Free Tier

Why ShotAPI vs Puppeteer MCP?

Give AI Agents Eyes: ShotAPI MCP Server for Web Screenshots

Why This Matters

One Command to Connect

3 MCP Tools

REST API (No MCP Required)

Free Tier vs Paid

Key Features

Try It Now

Give Your AI Agent Eyes: Building a Visual MCP Server for Web Screenshots

Give Your AI Agent Eyes: Building a Visual MCP Server for Web Screenshots

Why AI Agents Need to See the Web

Three Tools, One Connection

Practical Use Cases

1. Visual Bug Detection

2. Design Review Automation

3. HTML Prototyping with render

4. Batch Monitoring

Before deploy

After deploy

Compare

If visual regression detected, block the deploy

Tool definition in MCP server

Screenshot any URL (free, no API key needed)

Render HTML

Hello World

Free Tier — No Signup Required

Getting Started

For Claude Code / Claude Desktop

For Cursor

Direct API (no MCP)

Paid Tiers

What's Next

ShotAPI: An MCP Server for AI Agent Screenshots and HTML Rendering

What is ShotAPI?

How It Works

Pricing

Getting Started

Links

ShotAPI - Let AI Agents See the Web: Screenshot and Render MCP Server

What is ShotAPI?

How AI Agents Use ShotAPI

Two Transport Modes

Quick Start: Connect as MCP Server

Free Tier + Paid Plans

API Endpoints

Get Started

3. HTML Prototyping with `render`