How to Use the PagePixels MCP in Windsurf

Q: How do I configure the PagePixels MCP Server in Windsurf?

Open your mcpconfig.json file in Windsurf and add the PagePixels server configuration under the mcpServers key. Once you hit refresh, Cascade will instantly discover all eight screenshot and configuration tools.

Get live website screenshots and custom HTML renders directly in your Windsurf workspace with autonomous Cascade chains.

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 Windsurf

Create your Vinkius account to connect PagePixels to Windsurf — 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 Windsurf

Ask AI about this MCP

ChatGPT

Claude

Perplexity Vinkius runs on Gemini

Gemini

Grok

Automate visual regression tests inside Windsurf

The PagePixels MCP Server lets Cascade chain multi-step visual QA runs without you prompting every step. Tell the agent to verify a UI change, and it will use `list_screenshot_configs` to find your target layouts, then run `quick_snap_with_options` to capture the current state of your staging site at multiple viewport sizes. If a layout fails the visual check, Windsurf doesn't just stop there. The agent can immediately call `update_screenshot_config` to adjust the selectors or viewport dimensions on the fly, saving you from manual browser-based configuration chores.

Render custom HTML layouts on the fly

This custom HTML rendering tool lets Cascade grab your local draft and feed it straight to `snap_custom_html`. You don't need to spin up a local dev server or open a browser tab just to see how a raw HTML snippet looks on screen. The MCP Server passes the rendered image bytes straight back to your workspace. This lets Windsurf inspect the visual output of your code changes instantly, catching broken CSS grids or overlapping text before you commit.

Manage persistent screenshot configurations

The persistent configuration tools in PagePixels let Windsurf handle your entire asset pipeline through this MCP Server integration. Stop hardcoding viewport heights and selector paths into your test scripts and instead call `create_screenshot_config` to store your production capture settings directly on PagePixels. When cleanups are needed, the agent uses `delete_screenshot_config` or reads existing setups with `get_screenshot_config`. This keeps your testing database clean while letting your AI client handle the state management for you.

Setup guide

Set up PagePixels MCP in Windsurf

Prerequisites

Windsurf IDE installed (macOS, Windows, or Linux)
Active Vinkius subscription with a valid endpoint token

1

Open MCP configuration

Click the Cascade assistant icon in the sidebar, then click the hammer icon (🔨) at the top of the panel. Select "Configure" to open ~/.codeium/windsurf/mcp_config.json.
2

Add the PagePixels MCP

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

Refresh MCPs

Go back to the hammer icon (🔨) in Cascade and click "Refresh". Windsurf will detect the new server. No full restart is needed — the connection is hot-reloaded.
4

Verify in Cascade

Start a new Cascade conversation and ask something like "Show my PagePixels payment history." If connected, Cascade will call the PagePixels tools directly. You will see a green dot next to the server name in the MCP panel.

mcp_config.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 Windsurf

Cascade handles this autonomously once you connect the MCP Server. You just ask Cascade to check a URL, and it will automatically call `quick_snap` behind the scenes to grab the image.

Yes, Cascade uses the MCP Server to inspect your current setup using `get_screenshot_config` and then executes `update_screenshot_config` to alter parameters like viewport width or delay times. You don't have to write any API wrapper code yourself.

It does. When you ask Cascade to render a raw code block, it uses `snap_custom_html` to pass your tailwind or custom CSS styles directly to the PagePixels rendering engine.

Open your `mcp_config.json` file in Windsurf and add the PagePixels server configuration under the `mcpServers` key. Once you hit refresh, Cascade will instantly discover all eight screenshot and configuration tools.

The PagePixels server only processes the target URLs, custom HTML snippets, and API keys you pass through Windsurf. All rendering occurs in isolated, ephemeral browser environments, and your API keys are stored securely in your local Windsurf settings without being exposed to third parties.

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