Connect tools to VS Code
VS Code uses a different JSON wrapper from clients that expect mcpServers. Its workspace configuration uses a servers object, with an explicit connection type for each entry. Keeping that distinction visible prevents a common failure: pasting otherwise valid server settings into the wrong shape and wondering why the editor ignores them. MCP tool availability also depends on the installed chat and agent features.
Configuration location
Config file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation.
1. Choose the execution environment
Decide whether the server should run locally or in your development container or remote workspace. A command that works on your laptop may not exist in the environment that hosts the MCP process. Install the runtime in that environment before connecting.
2. Use the VS Code wrapper
Create or edit .vscode/mcp.json at the workspace root. Add a named entry under servers. Local processes use type stdio with command and args; a Streamable HTTP endpoint uses type http with url. Preserve any existing inputs or other servers when merging the example.
3. Start the server and inspect output
Use the MCP controls shown by the editor or its command palette to start the connection. Review trust prompts and server output rather than approving an unfamiliar repository configuration automatically. Complete the provider’s authentication flow only for an endpoint you recognize.
4. Select tools for a small task
Check which tools are available to agent mode, then try a bounded read-only operation. Keep credentials out of version control; consult the editor’s input-variable and secret-handling documentation if the server requires a token.
Configuration example
{
"servers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}This example launches a browser server via npx. Review the package and its current README before running it. Merge the named entry into your existing configuration, and do not commit secrets. Examples demonstrate the file format; they do not bypass a client’s trust or approval prompts.
Playwright MCP installation and toolsTroubleshooting
An mcpServers wrapper from another client is not a drop-in VS Code file. Check the servers key, connection type, workspace scope, and output logs. For SSE-only endpoints or unusual authentication requirements, check the client documentation before changing the example.
Client versions and menus change. When the installed version differs from this guide, prefer its current documentation.
