Hosted MCP server, 11 tools

Give VS Code (Copilot) eyes on the web

Give GitHub Copilot agent mode in VS Code a screenshot tool: one-click install of the hosted SnapRender MCP server, OAuth sign-in or an API key VS Code prompts for and stores securely.

200 renders a month free, no card. Sign-in happens inside VS Code (Copilot) the first time it uses the server.

Server URL: https://app.snap-render.com/mcp

Set it up (recommended: sign in with OAuth)

VS Code connects to remote HTTP servers and runs the OAuth sign-in itself the first time the server starts.

  1. 1Click "Install in VS Code" above, or add the snippet to .vscode/mcp.json in your workspace (or run MCP: Open User Configuration for all workspaces).
  2. 2Start the server from the editor; VS Code opens a browser to sign in to SnapRender.
  3. 3Switch Copilot Chat to agent mode and ask for a screenshot.
.vscode/mcp.json
{
  "servers": {
    "snaprender": { "type": "http", "url": "https://app.snap-render.com/mcp" }
  }
}
or from a terminal
code --add-mcp '{"name":"snaprender","type":"http","url":"https://app.snap-render.com/mcp"}'

Check it worked: Open Copilot Chat in agent mode and click Configure Tools; the SnapRender tools are listed. MCP: List Servers shows the server state and its output log.

With an API key instead

With an input variable, VS Code asks for the key once and stores it securely instead of keeping it in the file. Get a key from your SnapRender dashboard.

.vscode/mcp.json
{
  "inputs": [
    { "type": "promptString", "id": "snaprender-key", "description": "SnapRender API key", "password": true }
  ],
  "servers": {
    "snaprender": {
      "type": "http",
      "url": "https://app.snap-render.com/mcp",
      "headers": { "Authorization": "Bearer ${input:snaprender-key}" }
    }
  }
}

Or run the server locally

Runs the open-source server from npm locally, with the key from the same prompted input. The package is snaprender-mcp on npm.

.vscode/mcp.json
{
  "inputs": [
    { "type": "promptString", "id": "snaprender-key", "description": "SnapRender API key", "password": true }
  ],
  "servers": {
    "snaprender": {
      "command": "npx",
      "args": ["-y", "snaprender-mcp"],
      "env": { "SNAPRENDER_API_KEY": "${input:snaprender-key}" }
    }
  }
}

What VS Code (Copilot) can do with it

take_screenshot

Capture any URL, HTML or Markdown as PNG, JPEG, WebP or PDF, full page or by device

extract_content

Read a page as markdown, text, article, links or metadata

batch_screenshots

Capture up to 50 URLs in one job

get_batch_status

Check a batch and get its download links

sign_screenshot_url

Create a shareable capture URL that does not expose your key

check_screenshot_cache

See whether a capture is cached, without spending quota

get_usage

Show renders used and left this month

list_webhooks

List your webhooks

create_webhook

Get notified when batches finish

delete_webhook

Remove a webhook

test_webhook

Send a test delivery

Prompts to try

  • "Take a full-page screenshot of https://stripe.com and tell me how the pricing section is laid out."
  • "Compare https://example.com on desktop and iPhone and list layout problems on mobile."
  • "Read https://example.com/docs as markdown and summarize the authentication steps."

SnapRender renders public pages from its own servers, with ads and cookie banners removed. Pages behind a login and localhost are out of reach; use a preview deployment or a tunnel for local work.

Questions

Does Copilot agent mode support MCP screenshots?+

Yes. Any MCP server the workspace configures is available to agent mode as tools. With SnapRender, Copilot can capture a page, see it, and act on what it sees.

Where is the API key stored?+

With the promptString input shown above, VS Code asks once and keeps the value in its secret storage rather than in mcp.json.

Other clients

Checked against code.visualstudio.com, code.visualstudio.com in October 2026.

200 free renders a month to start

No card. Every tool on every plan.

Create a free account