---
title: "VS Code MCP Server Setup: Add Live Web Data to Copilot"
description: "Add Perceptlayer's MCP server to VS Code in .vscode/mcp.json with a password input for the key, run a first search in agent mode and check credits per call."
url: https://perceptlayer.com/blog/vs-code-mcp-server-setup-web-data
---

[Blog](https://perceptlayer.com/blog) / [AI agents](https://perceptlayer.com/blog/category/ai-agents)

# VS Code MCP Server Setup: Add Live Web Data to Copilot

28 Sept 2026 Perceptlayer 7 min read

To set up an MCP server in VS Code, add it to `.vscode/mcp.json` (or your user profile's `mcp.json`) under `servers`, start it, and use its tools from Copilot Chat in agent mode. For Perceptlayer, the server is an `http` server at `https://api.perceptlayer.com/mcp`, and the API key goes in an `Authorization` header filled from a `promptString` input with `password: true`, so VS Code asks for the key once and never writes it to the file.

## Key takeaways

-   The config is a `servers` object plus an `inputs` array; the header reads `Bearer ${input:perceptlayer-key}`, so the key never sits in the file.
-   `password: true` on a `promptString` input masks what you type, which VS Code's reference recommends for API keys.
-   The server has three tools. `search_endpoints` and `get_endpoint` are free; `call_endpoint` costs the endpoint's credits, 1 for a Google search, and only on success.
-   All three tools declare `readOnlyHint`, and VS Code skips its confirmation dialog for read-only tools, so `call_endpoint` can spend credits without asking. Read the `Credits used` line in each result.
-   The 1,000 free monthly credits cover 1,000 one-credit calls from Copilot.

## What do you need before you start?

VS Code with GitHub Copilot Chat, which runs MCP tools in agent mode, and a Perceptlayer API key. [Get a free API key](https://perceptlayer.com/signup); keys start with `sk_live_`, and verifying your email gives you 1,000 free credits every month, with no card. Nothing else needs installing: the server is remote, over Streamable HTTP, so there's no local process or package.

If you've already added the server to Claude Desktop or Cursor, the URL and header are the same; only the file format differs. The guide to [adding an MCP server to Claude Desktop and Cursor](https://perceptlayer.com/blog/add-mcp-web-data-tools-claude-desktop) covers those two clients, so this one sticks to VS Code.

## How do you write .vscode/mcp.json?

Create `.vscode/mcp.json` in your workspace with an input for the key and one server that uses it. VS Code's configuration reference describes this format: a top-level `servers` object, an optional `inputs` array for sensitive values, and `${input:id}` references that VS Code fills in when the server starts. HTTP servers take `type`, `url` and `headers` ( [VS Code MCP configuration reference](https://code.visualstudio.com/docs/agents/reference/mcp-configuration), 2026).

```json
{
  "inputs": [
    {
      "type": "promptString",
      "id": "perceptlayer-key",
      "description": "Perceptlayer API key",
      "password": true
    }
  ],
  "servers": {
    "perceptlayer": {
      "type": "http",
      "url": "https://api.perceptlayer.com/mcp",
      "headers": { "Authorization": "Bearer ${input:perceptlayer-key}" }
    }
  }
}
```

We haven't run this config in VS Code against the live server for this article; it follows VS Code's configuration reference and the [AI agents (MCP) docs](https://docs.perceptlayer.com/ai-agents). The first time the server starts, VS Code prompts for `perceptlayer-key` with the input masked, and stores the value securely for later sessions. Because the file holds only the reference, you can commit it and every teammate gets their own prompt for their own key. Don't replace the reference with a literal key in a committed file: the reference says not to commit tokens or populated authentication headers.

The header value must include the `Bearer ` prefix. The server also accepts the key in an `X-API-Key` header, but `Authorization: Bearer` is what the [AI agents (MCP) docs](https://docs.perceptlayer.com/ai-agents) use, and it's what most clients expect.

## Can you add it for every workspace instead?

Yes. Put the same JSON in your user profile's `mcp.json`, which the command **MCP: Open User Configuration** opens. A server there is available in every workspace without a file in each repository, which suits a personal key. The workspace file suits a team, since it travels with the repository.

You can also run **MCP: Add Server** from the Command Palette, choose an HTTP server, enter the URL and an ID such as `perceptlayer`, and pick where to save it ( [VS Code: Add MCP servers](https://code.visualstudio.com/docs/agent-customization/mcp-servers), 2026). The guided flow doesn't add the key input for you, so open the file it wrote and add the `inputs` entry and `headers` block from the example above. Recent versions of VS Code offer more destinations in that flow; the server definition is the same wherever it's saved.

## How do you start the server and check its tools?

Start the server from the `mcp.json` editor or the MCP server list, confirm that you trust it, and enter your key when prompted. VS Code treats trusting a server to start as a separate step from authenticating to it and from approving tool calls. Once it starts, it discovers the server's tools: you should see `search_endpoints`, `get_endpoint` and `call_endpoint`.

Open Copilot Chat, switch to agent mode, and open **Configure Tools** in the chat input to check that the three tools are enabled for the session. If you have many MCP servers, turning off the tools you don't need for a task keeps the model's choices short; the article on [MCP servers with too many tools](https://perceptlayer.com/blog/mcp-too-many-tools-context) explains why Perceptlayer exposes three tools rather than one per endpoint.

## What does the first tool call look like?

Ask something that needs live data and name the server, which is also VS Code's suggested way to check a connection. Try: "Use perceptlayer to search Google for best restaurants in Berlin and list the top two results." The model calls `search_endpoints` to find a Google search endpoint and may call `get_endpoint` to read its parameters, both free. Then it calls `call_endpoint`:

```json
{
  "endpoint": "google-search.search",
  "params": { "query": "best restaurants in Berlin", "hl": "en", "safe": "off" }
}
```

Expand the tool call in the chat to see which server answered and what it returned. This is our recorded response for the same request made over the HTTP API, trimmed; through MCP, `call_endpoint` returns the same JSON:

```json
{
  "search_information": {
    "query_displayed": "best restaurants in Berlin",
    "organic_results_count": 6
  },
  "organic_results": [
    {
      "position": 1,
      "title": "The Best Restaurants in Berlin - Food Guide & Map",
      "link": "https://andershusa.com/best-restaurants-berlin-germany-guide/",
      "source": "Anders & Kaitlin",
      …
    },
    {
      "position": 2,
      "title": "Restaurants - Berlin",
      "link": "https://guide.michelin.com/us/en/berlin-region/berlin/restaurants",
      "source": "MICHELIN Guide",
      …
    }
  ],
  …
}
```

After the JSON, the tool result carries a second line: `Credits used: 1. Credits remaining: …` and a request ID. The [Google Search API page](https://perceptlayer.com/apis/google-search) lists the endpoint's other parameters, such as `gl` for country and `device`.

## Why don't you see a confirmation before each call?

Because every Perceptlayer tool is marked read-only. VS Code's MCP guide says it shows a confirmation dialog before running a tool that lacks the `readOnlyHint` annotation ( [VS Code MCP developer guide](https://code.visualstudio.com/api/extension-guides/ai/mcp), 2026). All three Perceptlayer tools declare `readOnlyHint: true`, which is accurate, since they only read data, so VS Code can run them straight away.

Reading data still costs credits. Each successful `call_endpoint` spends the endpoint's credits, and in agent mode the model can make several calls for one question. Keep an eye on the `Credits used` and `Credits remaining` lines while you try it out, and tell the agent your limit in the prompt, such as "make at most 3 call\_endpoint calls". For a cap that holds regardless of the prompt, enforce it in your own code; the guide to [AI agent cost control](https://perceptlayer.com/blog/ai-agent-web-data-costs) shows how.

Failed calls cost nothing. A call with a bad parameter comes back as a tool result starting `Error invalid_parameters:` and debits 0 credits, and the next successful call's `Credits remaining` shows the balance unchanged. The [credits docs](https://docs.perceptlayer.com/credits) explain the balance and the [errors docs](https://docs.perceptlayer.com/errors) list every code.

## What goes wrong, and how do you fix it?

Most problems are the header. The catalogue tools work without a key, so a server that lists its tools and runs `search_endpoints` but fails on `call_endpoint` has a key problem. The error code in the tool result tells you which.

| Symptom | Cause | Fix |
| --- | --- | --- |
| `invalid_api_key`, "No API key was sent" | The `headers` block is missing | Add `"Authorization": "Bearer ${input:perceptlayer-key}"` |
| `invalid_api_key` with a key entered | The value lacks `Bearer ` , or the key was revoked | Fix the header template, or create a new key and re-enter it |
| No prompt for the key | The `${input:…}` ID doesn't match the input's `id` | Make both `perceptlayer-key` |
| Tools don't appear | The server hasn't started or isn't trusted | Start it from `mcp.json` or the server list, and confirm trust |
| `rate_limited` | Over the account's per-second rate | Wait the seconds the error gives; see the [rate limits docs](https://docs.perceptlayer.com/rate-limits) |
| `insufficient_credits` (402) | The balance is used up | Buy a pack on [pricing](https://perceptlayer.com/pricing); nothing is debited meanwhile |

Once it works, try a question against another website in the catalogue, such as Zillow listings or Indeed jobs, with no change to the config.

## APIs in this post

-   [Google Search **1 credit per call** · 7 endpoints](https://perceptlayer.com/apis/google-search)

## Frequently asked questions

### How much does a question from Copilot cost?

Each successful `call_endpoint` costs the endpoint's credits, 1 for a Google search, and the catalogue lookups are free. A question that needs two searches costs 2 credits, so 400 such questions a month is 800 credits, inside the 1,000 free monthly credits. Failed calls cost nothing. The [pricing page](https://perceptlayer.com/pricing) has what credit packs cost.

### Is my API key stored in mcp.json?

Not with the `inputs` setup. The file holds only `${input:perceptlayer-key}`, and VS Code prompts for the value when the server first starts, masked because of `password: true`, then stores it for later sessions. That makes the workspace file safe to commit, with each person entering their own key.

### Can my whole team share one config?

Yes. Commit `.vscode/mcp.json` with the input reference, and each person enters their own key on first start. Keys from the same account share one credit balance and one rate limit, so a team on one account draws from one pool. Separate accounts keep balances separate.

### Which websites can Copilot reach through this server?

The whole catalogue of 248 websites and 1,659 endpoints, through the same three tools. Ask for Zillow listings or Google Maps reviews and the model finds the endpoint with `search_endpoints`. Restricted endpoints, with social, personal or SEO data, need the [restricted-endpoint terms](https://perceptlayer.com/legal/restricted-endpoints) accepted in your dashboard first.

### Does this work in VS Code in the browser?

Perceptlayer's MCP server doesn't yet support MCP clients that run inside a web browser, so use the VS Code desktop app. The server is remote, so the desktop app connects to it directly over HTTP with no local process. Responses over 100,000 characters are cut short, so ask for a page or a limit on large results.

vs code mcp github copilot ai agents web data

## More from the blog

1.  [AI agents](https://perceptlayer.com/blog/category/ai-agents) 16 Oct 2026 Perceptlayer 8 min read
    
    ## [MCP Server Authentication: API Keys vs OAuth](https://perceptlayer.com/blog/mcp-server-api-key-vs-oauth)
    
    The MCP spec makes OAuth 2.1 optional for remote servers. When a static API key in an Authorization header fits better, and how clients send one.
    
2.  [AI agents](https://perceptlayer.com/blog/category/ai-agents) 12 Oct 2026 Perceptlayer 7 min read
    
    ## [MCP Server Too Many Tools: Keeping Agent Context Small](https://perceptlayer.com/blog/mcp-too-many-tools-context)
    
    One tool per endpoint for 1,659 endpoints is about 567,000 characters of schema. A 10-step checklist to keep an MCP server's tool list small.
    
3.  [AI agents](https://perceptlayer.com/blog/category/ai-agents) 2 Oct 2026 Perceptlayer 7 min read
    
    ## [How to Add an MCP Server to Claude Desktop and Cursor](https://perceptlayer.com/blog/add-mcp-web-data-tools-claude-desktop)
    
    Add the Perceptlayer MCP server to Claude Desktop or Cursor with an API key header, run a first Google search, and check only successful calls cost credits.
