How to add an MCP server to VS Code

Checked against VS Code's documentation on Oct 26, 2026. Commands and config blocks are generated from the same install data as each listing page.

1. 1. Choose a server and see what it needs

   VS Code can keep a server in a workspace file or in your user profile, so decide which fits each server. The notes below say what each example server needs.

   • Playwright MCP: runs locally, no key needed.
   • Figma MCP Server: hosted, connect by URL, no key needed.
   • Firecrawl MCP Server: runs locally, can take FIRECRAWL_API_KEY.
   • Where VS Code can keep a server: workspace (.vscode/mcp.json) and user profile (mcp.json).

2. 2. Add a local server (Playwright MCP)

   Playwright MCP runs locally, so it is described by a command and its arguments. The terminal command adds it to your user profile, and the workspace entry goes in .vscode/mcp.json.

   code --add-mcp '{"name":"playwright-mcp","type":"stdio","command":"npx","args":["-y","@playwright/mcp@0.0.82"]}'

   Copy

   {
     "servers": {
       "playwright-mcp": {
         "type": "stdio",
         "command": "npx",
         "args": [
           "-y",
           "@playwright/mcp@0.0.82"
         ]
       }
     }
   }

   Copy

3. 3. Add a remote server (Figma MCP Server)

   Figma MCP Server is hosted and connects by URL. The terminal command and the workspace entry each show the server with an http type and the URL.

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

   Copy

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

   Copy

   • If the server uses OAuth, VS Code prompts you to sign in when it first starts the server.

4. 4. Keep API keys out of the file (Firecrawl MCP Server)

   Firecrawl MCP Server can take FIRECRAWL_API_KEY. The entry declares an input of type promptString, and the env entry refers to it as ${input:firecrawl-api-key}, so no secret is written to the file.

   {
     "inputs": [
       {
         "type": "promptString",
         "id": "firecrawl-api-key",
         "description": "Your API key for Firecrawl",
         "password": true
       }
     ],
     "servers": {
       "firecrawl-mcp-server": {
         "type": "stdio",
         "command": "npx",
         "args": [
           "-y",
           "firecrawl-mcp@3.34.1"
         ],
         "env": {
           "FIRECRAWL_API_KEY": "${input:firecrawl-api-key}"
         }
       }
     }
   }

   Copy

   • Put a secret in the inputs array as a promptString with password: true and refer to it as ${input:id}. VS Code asks for it on first start and stores it securely.
   • VS Code asks for each secret the first time the server starts and stores it securely, so nothing secret is written to the file.
   • FIRECRAWL_API_KEY (optional): Your API key for Firecrawl.

5. 5. Restart or reload if the server does not appear

   Use this step if the server does not appear. It covers the Restart Server action, chat.mcp.autostart and Workspace Trust, as the notes describe them.

   • The docs do not require a restart after editing the file. The Restart Server action in MCP: List Servers is for use after a configuration change, and chat.mcp.autostart starts new or changed servers automatically by default.
   • Workspace MCP files follow Workspace Trust; they cannot start in Restricted Mode. MCP: Reset Trust clears trust decisions.