How to Pass Environment Variables to a Website Screenshot MCP Server

For a locally run website screenshot MCP server that uses stdio, put the variables the server requires in the MCP client’s server configuration, under its env field. Use the exact variable names from that server’s documentation. The client launches the process and supplies those values to it.

The exact configuration file and syntax depend on your MCP client. VS Code supports an env object, an envFile, and masked input variables; other clients may use different formats. A hosted MCP endpoint is a separate case: it may use an authorization header or OAuth rather than a local process environment.

1. Configure a local stdio server

Find the screenshot server’s instructions for its package name, launch command, required variables, and optional variables. Add a server entry to the configuration file used by your client. This schematic VS Code-style example shows the general pattern; it is not a verified setup for an unnamed server:

{
  "servers": {
    "screenshotServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "your-screenshot-mcp-package"],
      "env": {
        "SERVICE_API_KEY": "YOUR_KEY"
      }
    }
  }
}

Replace the package and variable names with the server’s documented values. In this schema, command starts the process, args supplies its arguments, and env supplies environment values. VS Code documents these fields, along with envFile, in its MCP configuration reference.

Use the server’s exact variable names

Environment-variable names are specific to each server. For example, Screenshot Scout’s local npm server reads SCREENSHOTSCOUT_ACCESS_KEY at startup. Its SCREENSHOTSCOUT_SECRET_KEY is optional and is used only when signed requests are enabled. Those names are not generic MCP names: do not use them for another server unless its own documentation says to.

{
  "mcpServers": {
    "screenshotscout": {
      "command": "npx",
      "args": ["-y", "@screenshotscout/mcp"],
      "env": {
        "SCREENSHOTSCOUT_ACCESS_KEY": "YOUR_ACCESS_KEY"
      }
    }
  }
}

This example follows the Screenshot Scout local-server instructions. Add its optional secret variable only if your account and request setup require signed requests. Follow the target client’s configuration format; the JSON structure above is the vendor’s Claude Desktop-style example, not a universal format.

2. Store secrets without putting them in shared config

A literal API key in a project configuration file can be exposed if that file is committed or shared. Prefer your client’s secret-input or environment-file support when available, and keep credential-bearing files private.

VS Code masked input

VS Code’s MCP configuration supports an inputs entry with type set to promptString and password set to true. Reference the input from the server’s env value. VS Code prompts for the secret and securely stores it for later use after the first prompt.

{
  "inputs": [
    {
      "id": "screenshot-api-key",
      "type": "promptString",
      "description": "Screenshot service API key",
      "password": true
    }
  ],
  "servers": {
    "screenshotServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "your-screenshot-mcp-package"],
      "env": {
        "SERVICE_API_KEY": "${input:screenshot-api-key}"
      }
    }
  }
}

Replace SERVICE_API_KEY and the command details with the values required by your server. VS Code also supports envFile for loading additional variables. Its documented configuration locations include workspace .vscode/mcp.json and portable .mcp.json; choose the scope that fits whether this setup should travel with a workspace or be available more broadly.

Do not put credentials in screenshot URLs or prompts. If using a literal-key configuration, keep the file private and out of shared repositories. The client’s settings determine how its configuration is stored and shared.

3. Decide whether the server is local or hosted

The env method applies when the MCP client launches a local process, commonly over stdio. A hosted server runs remotely, so its authentication is configured as part of the client’s remote connection instead. Check the provider’s instructions and your client’s supported transports before copying a local configuration example.

Local stdio: the client starts the server process; pass its required variables in the process configuration.
Hosted endpoint: configure the endpoint and the authentication method its provider specifies. That may be an authorization header or browser-based OAuth.

For example, Screenshot Scout documents a hosted endpoint that uses a Bearer Authorization header and says not to send its secret key to that endpoint. ScreenshotOne documents a hosted MCP server at https://mcp.screenshotone.com that connects through browser OAuth, without running a local process or pasting an API key into the client. These are provider-specific examples; use the instructions for the server you chose: Screenshot Scout MCP guide and ScreenshotOne MCP guide.

4. Configure and connect in your editor

Identify whether the provider gives you a local command or a hosted endpoint.
For a local server, identify each required and optional variable, including whether values are read at startup.
Open the configuration location and format documented by your client. In VS Code, use .vscode/mcp.json for workspace configuration or .mcp.json for portable configuration.
Add the server command and arguments, then add the required variables under env. Use a masked input or envFile if supported and appropriate.
Save the configuration and start or reconnect the server using the client’s MCP controls. In VS Code, use MCP: List Servers to inspect and manage server state.
Check the client’s server logs or status if the connection fails, then confirm that the variable names and values match the provider’s setup guide.

For a Docker-based stdio server in VS Code, keep the container in the foreground: the official configuration reference says not to detach it with -d, because it needs to communicate over stdio.

5. Troubleshoot common setup failures

Symptom	Likely cause	What to do
The server starts but reports a missing key.	The variable is absent, misspelled, or named differently from what the server expects.	Check the provider’s documentation for the exact case-sensitive name, required status, and configuration syntax. Verify that the value is under the server entry’s `env`.
The server still uses an old or empty value after editing config.	The local process may read environment variables only at startup, or the client may not have reloaded its configuration.	Restart or reconnect the MCP server. Screenshot Scout specifically instructs Claude Desktop users to restart after saving local configuration.
The client does not show or launch the server.	The entry may use another client’s format or be in the wrong configuration location.	Use the MCP configuration path and schema documented by the client. For VS Code, inspect the server with `MCP: List Servers`.
A hosted connection rejects authentication.	A local `env` setting was used where the hosted endpoint expects a particular header or OAuth flow, or credentials were sent using an unsupported method.	Follow the hosted provider’s authentication instructions and the client’s remote-connection options. Do not assume a local server’s variable rules apply to a remote endpoint.
A Docker server connects but MCP communication stalls.	The container may have been started detached, closing or hiding the stdio channel the client needs.	In VS Code, run the Docker-based stdio server in the foreground; do not add `-d`.
A key has been exposed in a URL, prompt, or shared file.	The credential was placed in a location that can be logged, copied, or committed.	Remove it from the exposed location, use the server’s documented authentication mechanism, and replace the credential if it may have been disclosed. Keep credential-bearing configuration private.

6. Choose the configuration that fits

Before settling on an approach, check these details in the provider and client documentation:

Whether the server is a local stdio process or a hosted endpoint.
The exact required variable names, any optional signing secret, and when values are read.
Whether the client supports masked secret inputs, an environment file, or both.
Whether configuration is workspace-scoped or user-scoped, and who can access the file.
Whether the client supports the hosted server’s transport and authentication method.

7. Or skip the browser setup

If your immediate goal is to capture a website rather than configure an MCP server, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. For a direct API call, send a GET request with your URL and key:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo documentation for the API and MCP setup. Cookie banners are accepted like a visitor and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000. Every feature is on every plan.

FAQ

Does MCP define one standard API-key environment variable?

No. Use the variable name documented by the specific server you run.

Should I put a hosted server’s key in the local process environment?

Only if its provider and client documentation specify that setup. Hosted endpoints can use a different authentication flow.

Where can I see whether the server is running in VS Code?

Use the MCP: List Servers command to inspect and manage MCP server state.