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.
