Setup playwright mcp server in vs code

 Setting up the **Playwright Model Context Protocol (MCP)** server allows your AI coding assistant inside VS Code to take control of a real browser, navigate web pages, fill out forms, and automate testing right from your chat prompt.

## 🛠️ Prerequisites

Before you begin, make sure you have the following installed on your machine:

 * **Node.js:** Version **18 or newer** is required (since the server runs via npx).

 * **VS Code:** Ensure your VS Code is up to date. You will also need an MCP-compatible chat assistant extension installed (such as **GitHub Copilot Chat** with Copilot Agent mode enabled, or alternative extensions like Cursor/Windsurf if you use those forks).

## 🚀 How to Start & Connect Playwright MCP with VS Code

You can set up and start the Playwright MCP server using one of three methods:

### Method 1: The Native Extensions Gallery (Recommended)

 1. Open VS Code and go to the **Extensions view** (Ctrl+Shift+X or Cmd+Shift+X).

 2. Type @mcp playwright in the search bar.

 3. Click **Install**.

 4. When prompted, confirm that you **trust the server** to let VS Code execute it.

 5. Open your Chat view, select the **Agent**, click the gear icon (**Configure Tools**), and ensure **Playwright tools** are enabled.

### Method 2: Via the VS Code Terminal (Fastest)

Open your terminal and run the following command to automatically pull and register the latest Playwright MCP server into your VS Code configuration:

```bash

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

```

### Method 3: Manual Configuration (settings.json)

If you prefer managing configurations manually, you can add it directly to your configuration file (or .vscode/mcp.json depending on your specific AI extension provider):

```json

{

  "mcpServers": {

    "playwright": {

      "command": "npx",

      "args": [

        "@playwright/mcp@latest"

      ]

    }

  }

}

```

## 🤖 Testing Your Setup

Once installed, the server automatically boots up when requested by your environment. You don't need to manually run a separate terminal server.

To test it, open your VS Code AI Chat panel and give it a prompt that requires web access:

> *"Navigate to https://demo.playwright.dev/todomvc and add three items to the todo list."*

> 

The assistant will dynamically trigger the Playwright MCP tools, spin up a headless browser instance under the hood, and report back using structured accessibility snapshots.