How to Use the PagePixels MCP in Claude

Q: How do I connect PagePixels to my Claude Desktop app?

Open your claudedesktopconfig.json file and add the PagePixels MCP Server to your configuration list. Provide your API key as an environment variable, restart the app, and the screenshot tools will appear next to the chat input.

Q: Does PagePixels support viewport adjustments within Claude Desktop?

Yes, you can direct your agent to use quicksnapwithoptions to specify custom widths and heights. This allows you to check mobile and desktop breakpoints right inside your chat interface.

Q: How do I list my saved templates?

You can run listscreenshotconfigs to retrieve all your stored setups. This lets your agent select the right configuration ID for your current testing run.

Run PagePixels MCP Server screenshot tasks directly inside Claude Desktop to render custom HTML or live URLs instantly.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers — Included with Plan

Connect PagePixels MCP to Claude Desktop

Create your Vinkius account to connect PagePixels to Claude Desktop — we handle the hosting, security, and runtime updates so you don't have to. No server setup required.

GDPR Included with Plan

Setup PagePixels with Claude Desktop

Ask AI about this MCP

ChatGPT

Claude

Perplexity Vinkius runs on Gemini

Gemini

Grok

Run quick captures from Claude Desktop

The `quick_snap` tool lets you grab any web page preview inside your chat session. You give your agent a URL, and it returns a clean image showing exactly how that page renders under normal conditions. For trickier layouts, the `quick_snap_with_options` tool gives you control over viewport dimensions and custom headers. Claude Desktop processes the returned image instantly, letting you inspect visual regressions without jumping to an external browser.

Build and manage persistent screenshot profiles

The `create_screenshot_config` tool saves your specific rendering parameters on the PagePixels platform so you don't have to define them repeatedly. Your agent reads these configurations using `get_screenshot_config` to ensure consistent testing across different chat sessions over this MCP setup. When your site layout shifts, you update those saved settings via `update_screenshot_config` to adjust the target viewports. If a test page gets retired, the `delete_screenshot_config` tool cleans up your dashboard to keep your account organized.

Render custom HTML structures on the fly

The `snap_custom_html` tool compiles raw code blocks from your chat straight into a rendered image. You don't need to spin up a local web server just to see how a specific CSS grid or component looks in a real browser environment. This means you can paste a raw snippet into Claude Desktop and get back a visual proof in seconds. It bypasses standard web hosting, giving you a fast feedback loop for isolated UI testing.

Setup guide

Set up PagePixels MCP in Claude Web or Desktop

1

Open Claude Settings

Go to claude.ai, click your profile icon, then navigate to Customize → Connectors.
2

Add Custom Connector

Click the "+" button and select Add custom connector. Paste your Vinkius endpoint URL: https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp Replace [YOUR_TOKEN_HERE] with your token from cloud.vinkius.com. For OAuth-protected servers, expand Advanced settings to add credentials.
3

Start a conversation

Open a new chat. The PagePixels MCP tools are available immediately — no restart needed.

Endpoint URL

https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp

No configuration file needed — paste the URL directly in the Claude web interface.

Available on Free (1 connector), Pro, Max, Team, and Enterprise plans.

Prerequisites

Claude Desktop installed (macOS or Windows)
Active Vinkius subscription with a valid endpoint token

1

Open Claude Desktop Settings

Click the menu icon at the top-left corner, go to Settings → Developer → Edit Config. This opens claude_desktop_config.json in your default text editor.
2

Paste the PagePixels MCP configuration

Copy the JSON snippet on the right into the mcpServers object. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.
3

Restart Claude Desktop

Close and reopen the application. Claude needs a full restart to load new MCPs — refreshing a conversation is not enough.
4

Verify the connection

Open a new conversation. Click the 🔌 icon at the bottom of the message input. You should see tools listed under pagepixels-mcp.

json

{
  "mcpServers": {
    "pagepixels-mcp": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Get your connection token →

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by PagePixels. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Connect PagePixels now

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about PagePixels MCP in Claude Desktop

Open your `claude_desktop_config.json` file and add the PagePixels MCP Server to your configuration list. Provide your API key as an environment variable, restart the app, and the screenshot tools will appear next to the chat input.

No, because the PagePixels API needs to reach the target URL over the public internet to render it. If you need to test a local layout, feed the raw code to the `snap_custom_html` tool instead.

Yes, you can direct your agent to use `quick_snap_with_options` to specify custom widths and heights. This allows you to check mobile and desktop breakpoints right inside your chat interface.

You can run `list_screenshot_configs` to retrieve all your stored setups. This lets your agent select the right configuration ID for your current testing run.

Your source URLs and raw HTML payloads go directly to the PagePixels API via the MCP connection to generate the requested image. These assets are processed in isolated sandboxes and the temporary images are purged according to your account retention settings, keeping your layout data private.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python

Google ADK sdk-python

Pydantic AI sdk-python

Vercel AI SDK sdk-typescript