MCP setup guide · VS Code · October 29, 2026

Connect VS Code and GitHub Copilot to SnapshotFlow MCP

GitHub Copilot in VS Code can call SnapshotFlow from agent mode. Add the hosted server to your workspace or user profile, sign in once, and Copilot can capture, diff, and read live pages while it edits your code.

Start free — 300 screenshots

Before you start

A SnapshotFlow account. Sign up free if you do not have one.
The server URL: https://api.snapshotflow.com/mcp
No API key. The server uses OAuth, so VS Code signs you in through the browser.

Add the server

Create .vscode/mcp.json in the workspace. VS Code uses a servers object and needs "type": "http" for remote servers:

{
  "servers": {
    "snapshotflow": {
      "type": "http",
      "url": "https://api.snapshotflow.com/mcp"
    }
  }
}

To make SnapshotFlow available in every workspace, run MCP: Open User Configuration from the Command Palette and add the same entry there. You can also run MCP: Add Server, choose HTTP, paste the URL, and name the server snapshotflow.

From the terminal, this adds it to your user profile:

code --add-mcp '{"name":"snapshotflow","type":"http","url":"https://api.snapshotflow.com/mcp"}'

Sign in

Start the server from mcp.json (VS Code shows a Start action above the entry) or let Copilot start it. On the first connection, VS Code opens a browser window for the SnapshotFlow sign-in. Review the trust and sign-in prompts before you accept them.

Use it in Copilot

Open Copilot Chat and switch to Agent mode.
Open the tools picker (Configure Tools) and check that the SnapshotFlow tools are enabled.
Ask for a screenshot, comparison, or page text. Approve the tool call when Copilot asks.

Prompts to try in Copilot

SnapshotFlow renders pages on its own servers, so use a deployed or preview URL rather than localhost.

Use SnapshotFlow to capture a full-page screenshot of https://preview.example.com. Compare it with the intended layout in this project and list the visual regressions to fix.

Use SnapshotFlow visual_diff on https://staging.example.com and https://example.com, then open the files most likely responsible for the differences.

Read https://docs.example.com/api with SnapshotFlow extract_text and update our API client types to match it.

Troubleshooting

See what went wrong. Run MCP: List Servers, select snapshotflow, and choose Show Output. The same menu can restart or stop the server.
Wrong file format. .vscode/mcp.json uses servers, not mcpServers, and remote entries need "type": "http".
Tools missing in chat. Agent mode is required, and the tools must be enabled in Configure Tools.

What it costs

Your AI client spends its own model tokens, billed by your AI provider. SnapshotFlow only counts screenshots against your account:

Tool	Counts as
`screenshot`	1 screenshot (repeat requests served from cache are free)
`batch_screenshot`	1 screenshot per captured URL (cache hits are free)
`visual_diff`	2 screenshots
`extract_text`	1 screenshot
`check_job`	Free

New accounts get 300 free screenshots for the lifetime of the account. No credit card required. See pricing for paid plans.

Sources

Steps checked against the official documentation on October 29, 2026. Client menus change often; if a label differs, the linked page has the current name.

Other MCP clients

The same server works with any client that supports remote MCP over Streamable HTTP with OAuth. Setup guides:

See SnapshotFlow MCP server for all clients, the tool list, and capture options, or the MCP reference for tool schemas. For more tasks to try, browse the MCP prompt library.