DEV Community

Alex Serebriakov
Alex Serebriakov

Posted on

How to Give Your AI Agent Eyes on the Web with MCP (Screenshot + Scraping)

#agents #mcp #tutorial #webscraping

Your AI agent is powerful. It can write code, analyze documents, brainstorm ideas. But there's one thing it can't do: see the web.

Right now, if you ask Claude to "take a screenshot of my competitor's pricing page" or "extract all product names from this e-commerce site," it has no way to do it. You get a polite "I'm not able to browse the web in real-time."

Model Context Protocol (MCP) changes that. With MCP, you can give Claude, Cursor, and any AI agent native tools to capture screenshots, scrape pages, generate PDFs, and extract structured data. No more context window waste on pasting HTML. No more "I can't do that."

In this tutorial, I'll show you how to set this up in 5 minutes using SnapAPI's MCP server.

What is MCP? (The USB for AI)

Model Context Protocol is Anthropic's open standard for connecting AI models to external tools and data sources. Think of it as the USB of AI agents—a universal plug that works with Claude, Claude Desktop, Cursor, VS Code (Copilot), and other clients.

When you add an MCP server, your AI agent gains new capabilities. Instead of being limited to text and knowledge cutoff, it can:

  • Execute functions in real time
  • Access APIs and databases
  • Run shell commands
  • Call web services
  • Return structured data

MCP servers are lightweight Node.js scripts that expose tools to the client. Your AI can call these tools naturally, in conversation, without you writing API code.

What Can SnapAPI's MCP Server Do?

SnapAPI's MCP server (snapapi-mcp) exposes 9 core tools for web capture and analysis:

Tool Purpose
ping Test connectivity to the SnapAPI service
screenshot Capture any URL as PNG, JPEG, or WebP (full page or viewport)
scrape Extract raw HTML or plain text from any page
extract Pull structured data using CSS selectors (e.g., product prices, links)
pdf Generate a PDF from any URL
video Record a scrolling video of a page (MP4)
analyze AI-powered page analysis (bring your own OpenAI key or use serverless)
get_usage Check your current API usage and remaining quota
list_devices List 30+ device emulation presets (iPhone, Android, tablets, desktops)

All tools work with device emulation, custom headers, ad blocking, cookie blocking, and stealth mode. The free tier gives you 200 requests/month.

Setup: 5 Minutes to Web Vision

Step 1: Get Your API Key

  1. Go to snapapi.pics
  2. Sign up for free (email required, 200 requests/month included)
  3. Verify your email
  4. Copy your API key from the dashboard (starts with sk_live_)

Step 2: Configure Your MCP Client

Pick your client below and follow the instructions.

Claude Desktop

Edit ~/.config/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_YOUR_KEY_HERE"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Restart Claude Desktop. The SnapAPI tools will appear in the tool picker.

Claude Code 

claude mcp add snapapi -- npx -y snapapi-mcp
Enter fullscreen mode Exit fullscreen mode

Then set the environment variable:

export SNAPAPI_API_KEY="sk_live_YOUR_KEY_HERE"
Enter fullscreen mode Exit fullscreen mode

Cursor

In Cursor Settings → MCP, add this JSON:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_YOUR_KEY_HERE"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Reload the window. Tools are ready.

Real-World Examples: What You Can Ask Now

Once MCP is configured, your AI agent gains these superpowers. Here are real prompts you can use:

1. Screenshot a Competitor's Page 

Take a screenshot of https://news.ycombinator.com and describe the top 5 stories.
Enter fullscreen mode Exit fullscreen mode

Claude will use the screenshot tool, capture the page as a PNG, and analyze it.

2. Extract Structured Data 

Scrape https://www.example.com/products and extract all product names, prices,
and "Buy Now" links. Return as JSON.
Enter fullscreen mode Exit fullscreen mode

Claude uses extract with CSS selectors to pull live data. No HTML copy-paste needed.

3. Generate a PDF 

Create a PDF of https://invoice.example.com/12345 and save it to my downloads.
Enter fullscreen mode Exit fullscreen mode

The pdf tool converts any URL to a PDF in seconds.

4. Record a Demo Video 

Record a scrolling video of https://my-landing-page.com from top to bottom.
Enter fullscreen mode Exit fullscreen mode

The video tool creates an MP4 showing the entire page flow. Great for testing, demos, or content.

5. Monitor a Price Change 

Check the price of https://example.com/product-123 and let me know if it's changed
from $49.99.
Enter fullscreen mode Exit fullscreen mode

Claude can run this daily, extract the price, and alert you. No selenium. No headless browser code.

6. Mobile Screenshot 

Take a screenshot of https://my-app.com using the iPhone 15 device preset.
Enter fullscreen mode Exit fullscreen mode

The list_devices tool shows all presets. Claude picks iPhone 15 automatically.

7. Analyze a Page with AI 

Analyze https://competitor.com/pricing and tell me what their value proposition is
and how it compares to ours.
Enter fullscreen mode Exit fullscreen mode

The analyze tool uses Claude/OpenAI to understand page content. Bring your own key.

Pro Tips for Production Use

Device Emulation for Mobile Testing

Before taking a screenshot, ask Claude to list available devices:

List all available device emulation presets and pick the iPhone 15.
Enter fullscreen mode Exit fullscreen mode

Claude sees presets like iPhone 15 Pro, Galaxy S24, iPad Pro, and can target any of them.

Ad & Cookie Blocking

Pass blockAds: true and blockCookies: true in tool parameters to get cleaner captures:

Take a screenshot of https://news-site.com with ad blocking and cookie banners removed.
Enter fullscreen mode Exit fullscreen mode

Stealth Mode for Anti-Bot Sites

Some sites detect Playwright. Stealth mode adds headless camouflage:

Scrape https://site-with-bot-detection.com with stealth mode enabled.
Enter fullscreen mode Exit fullscreen mode

Caching for Speed

The MCP server caches responses for 15 minutes. Repeated calls to the same URL return instantly.

Pricing: Free Tier to Enterprise

Free: 200 requests/month — perfect for testing and personal projects.

Starter ($19/mo): 5,000 requests/month — small teams and prototypes.

Pro ($79/mo): 50,000 requests/month — production apps.

Business ($299/mo): 500,000 requests/month — high-volume services.

All tiers include the full feature set: device emulation, ad blocking, video recording, PDF generation, and AI analysis.

Troubleshooting

"Tool not found" error

Make sure your MCP config has the correct syntax. Check for typos in SNAPAPI_API_KEY.

"Invalid API key"

Generate a new key at snapapi.pics/dashboard. Old keys might have expired.

"Quota exceeded"

You've used all your monthly requests. Upgrade your plan or wait for the month to reset.

Tool calls are slow

First call to a URL takes 3-5 seconds (browser startup). Cached calls are instant.

Next Steps

The Big Picture

AI agents used to be blind. They could read text, analyze documents, write code—but they couldn't see the web. MCP changes that fundamental constraint.

This is v3.2.0 of snapapi-mcp. The protocol keeps evolving, and we're adding new tools based on feedback from Claude users, Cursor developers, and AI teams.

Try it now. Give your agent eyes. See what it can do.

Questions? Open an issue on GitHub or email hello@snapapi.pics. Happy building.

Top comments (0)