Automate Screenshots and Visual Checks with Claude Code
Point Claude at a URL, get a screenshot. Compare staging with production. Check if your OpenGraph tags are set up right. All without leaving your terminal or chat window.
The Apixies MCP server includes a screenshot tool that captures any webpage as PNG or JPEG, plus meta tag extraction and performance tools that are useful for visual QA workflows.
Setup
Already have the MCP server installed? You're good. If not, follow the Getting Started guide.
{
"mcpServers": {
"apixies": {
"command": "npx",
"args": ["-y", "@apixies/mcp-server"],
"env": {
"APIXIES_API_KEY": "apx_your_key_here"
}
}
}
}
Capture a Screenshot
The simplest use case. Just ask:
Take a screenshot of https://github.com
Claude calls the take_screenshot tool with the URL. The API captures the page at 1280x800 (default viewport) and returns a PNG. You can customize this:
Take a full-page screenshot of https://stripe.com/docs in JPEG
format at 1440px wide
Claude passes full_page: true, format: "jpeg", and width: 1440 to the tool.
Screenshot Parameters
| Parameter | Default | What it does |
|---|---|---|
url |
(required) | Page to capture |
width |
1280 | Viewport width in pixels (320-3840) |
height |
800 | Viewport height in pixels (200-2160) |
full_page |
false | Capture the entire scrollable page |
format |
png | Output format: png or jpeg |
quality |
80 | JPEG quality (1-100, only for JPEG) |
Meta Tag Validation
Before sharing a page on social media, check that the OpenGraph and Twitter Card tags are right:
Check the meta tags on https://mysite.com/blog/new-post.
Does it have og:title, og:description, og:image, and twitter:card?
Claude calls extract_meta_tags and reports what's there and what's missing. Common issues it'll catch:
- Missing
og:image(no preview image when shared on social) - Missing
og:description(platforms will auto-generate one, usually badly) - Missing
twitter:card(no rich preview on Twitter/X) - Title or description that's too long or too short
Staging vs Production Comparison
Deploying a new version? Compare what's live with what's on staging:
Check the meta tags for both https://mysite.com and
https://staging.mysite.com. Tell me if anything is different
between them.
Claude calls extract_meta_tags twice and diffs the results. Useful for catching things like staging URLs leaking into production meta tags, or a missing og:image that was present before.
You can also compare performance:
Compare the performance of https://mysite.com and
https://staging.mysite.com. Show TTFB and total load time
for both.
Claude calls check_performance for each URL and puts the numbers side by side. If staging is significantly slower, you know something changed.
Pre-Deploy QA Checklist
Before a launch, run a comprehensive check:
I'm about to deploy mysite.com. Run a visual QA check:
1. Check that all meta tags (og:title, og:description, og:image,
twitter:card) are present
2. Verify the SSL certificate is valid
3. Test the homepage performance (DNS, TTFB, total time)
4. Check that the homepage returns a 200 status code
Claude uses extract_meta_tags, check_ssl, check_performance, and check_link to work through the list. You get a pass/fail for each item.
Batch Meta Tag Audits
Got multiple pages to check? List them:
Check the OpenGraph meta tags for these pages:
- https://mysite.com/
- https://mysite.com/about
- https://mysite.com/pricing
- https://mysite.com/blog
Flag any page that's missing og:image or og:description.
Claude calls extract_meta_tags for each URL and reports the gaps. This is a quick way to audit your most important pages before a marketing push or SEO review.
Client Site Reports
If you manage sites for clients, you can generate a quick status report:
For these client sites, check SSL and performance:
- clienta.com
- clientb.com
- clientc.com
Show a summary table with SSL status, days until expiry,
security header grade, and TTFB for each.
Claude calls check_ssl, check_headers, and check_performance for each domain and formats it into a table. Way faster than running each check manually.
Mobile Viewport Screenshots
Test how pages look at different sizes:
Take screenshots of https://mysite.com at these viewport widths:
375px (iPhone), 768px (iPad), and 1440px (desktop)
Claude calls take_screenshot three times with different width values. You can compare the layouts to spot responsive design issues.
Tips
- Screenshots return image data. In Claude Code, Claude can save the image to disk. In Claude Desktop, the binary data is returned but won't render as an image in chat. Use Claude Code for screenshot workflows.
- Meta tag checks are fast. They only need to fetch the page HTML, so they're much quicker than screenshots.
- Performance numbers vary. The API server makes the request from its own location, so the TTFB you see is from the server, not from your local machine. It's still useful for comparison between pages or over time.
- Full-page screenshots take longer. The page has to scroll and stitch, so expect a few extra seconds compared to viewport-only screenshots.
Related Tools
- URL Screenshot Generator - Take screenshots in your browser
- Meta Tag Extractor - Check meta tags interactively
- Website Performance Analyzer - Test load times in your browser
- SSL Health Inspector - Check certificates interactively