How to Use the PagePixels MCP in VS Code Copilot

Q: How do we share PagePixels settings across our team in VS Code Copilot?

Save the PagePixels MCP Server settings inside your .vscode/mcp.json file and commit it to your repository. Every developer on your team will have access to the screenshot tools automatically.

Q: Can VS Code Copilot run automated screenshot tests?

Yes, your agent can use getscreenshotconfig to retrieve saved testing profiles and trigger screenshots. This lets you build a semi-automated visual check workflow directly inside your chat panel.

Q: What happens if a PagePixels configuration becomes obsolete in VS Code Copilot?

Your agent can call deletescreenshotconfig to remove the outdated configuration ID. This keeps your shared team dashboard clean and prevents developers from running stale tests.

Q: Can I pass custom headers to my screenshots?

Yes, you can use quicksnapwithoptions to send custom headers along with your request. This is useful for bypassing basic auth or testing specific user roles.

Automate visual regression checks inside VS Code Copilot with the PagePixels MCP Server.

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 VS Code Copilot

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

Ask AI about this MCP

ChatGPT

Claude

Perplexity Vinkius runs on Gemini

Gemini

Grok

Run automated checks with VS Code Copilot

The `quick_snap` tool integrates directly into your VS Code Copilot chat to capture live web pages on demand. Developers can request a snapshot of a staging URL to verify that a pull request did not break the layout using this MCP tool. For more complex scenarios, `quick_snap_with_options` allows your team to specify custom headers, cookies, or user agents. This ensures that authenticated pages or geofenced content render correctly before code gets merged.

Synchronize visual testing configurations across your team

The `create_screenshot_config` tool lets you establish shared testing profiles for your entire team. Your agent uses `list_screenshot_configs` to pull active targets, keeping everyone on the same page during code reviews. When layouts evolve, a developer updates the profile using `update_screenshot_config`. This updates the target parameters globally, meaning the entire team uses the correct viewports without manual updates.

Render local workspace files

The `snap_custom_html` tool takes raw HTML from your workspace and renders it in a clean browser environment. You do not need to configure complex local testing suites to preview a single page layout. By sending the raw markup directly to the API, you bypass local network limitations. This lets your team quickly check UI changes on mock data before writing complex backend code.

Setup guide

Set up PagePixels MCP in VS Code Copilot

Prerequisites

VS Code 1.99 or later with GitHub Copilot extension
Active Vinkius subscription with a valid endpoint token

1

Open MCP configuration

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run "MCP: Add Server". Select HTTP (Streamable) as the server type. VS Code will create .vscode/mcp.json in your workspace.
2

Add the PagePixels MCP

Paste the JSON snippet shown on the right into your .vscode/mcp.json. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.
3

Switch to Agent mode

Open Copilot Chat (Cmd+Shift+I / Ctrl+Shift+I) and switch to Agent mode using the dropdown. MCP tools are only available in Agent mode — they do not appear in Edit or Ask modes.
4

Verify the connection

In the Copilot Chat input, type # to list available tools. You should see the PagePixels tools listed. Try asking: "List my recent PagePixels transactions" and Copilot will invoke them automatically.

.vscode/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 VS Code Copilot

Save the PagePixels MCP Server settings inside your `.vscode/mcp.json` file and commit it to your repository. Every developer on your team will have access to the screenshot tools automatically.

Yes, your agent can use `get_screenshot_config` to retrieve saved testing profiles and trigger screenshots. This lets you build a semi-automated visual check workflow directly inside your chat panel.

Your agent can call `delete_screenshot_config` to remove the outdated configuration ID. This keeps your shared team dashboard clean and prevents developers from running stale tests.

Yes, you can use `quick_snap_with_options` to send custom headers along with your request. This is useful for bypassing basic auth or testing specific user roles.

PagePixels processes your raw HTML payloads in isolated, temporary browser instances triggered by the MCP connection. The rendered images and configuration settings are protected by API authentication, and the data is never shared or stored longer than your configured retention policy.

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