vscode-playwright-mcp

A VS Code-aware layer on top of @playwright/mcp. Gives LLMs full control over VS Code — click UI elements, type code, run commands, take screenshots, read editor state, and record GIFs.

Use cases:

• E2E testing of VS Code extensions

• Automated VS Code workflows and tasks

• AI-driven code editing and refactoring

• Interactive demos and tutorials

• Testing themes, keybindings, and settings

How It Works

Built on top of @playwright/mcp, which provides generic Electron automation (click, type, screenshot, etc.). We add a VS Code-specific layer: isolated launch with temp user-data-dir, command palette automation, editor state scraping, and Monaco-aware tools.

Generic tools from @playwright/mcp are aliased to vscode_* names for a unified LLM experience. Before vscode_launch, only 1 tool is visible (lazy discovery saves ~10k context tokens). After launch, all 26 tools appear.

Related MCP server: VSCode Automation MCP

Requirements

• Node.js >= 22

• VS Code installed locally (auto-detected on macOS and Linux)

Quick Start

{
  "mcpServers": {
    "vscode": {
      "command": "npx",
      "args": ["-y", "vscode-playwright-mcp"]
    }
  }
}

Custom VS Code binary:

{
  "mcpServers": {
    "vscode": {
      "command": "npx",
      "args": ["-y", "vscode-playwright-mcp", "--vscode-path", "/path/to/code"]
    }
  }
}

Tools

Lifecycle

Vision (aliased from @playwright/mcp)

Mouse & Keyboard (aliased from @playwright/mcp)

VS Code Commands (native)

State (native)

Advanced (mixed)

Interaction Strategies

1. Ref-based (preferred for UI): vscode_snapshot → see [ref=eN] annotations → vscode_click(ref="e5"). Deterministic, no coordinate guessing.

2. Keyboard-first (preferred for navigation): vscode_snapshot → see shortcuts → vscode_press_key. Fastest for commands.

3. Visual (required for editor content): Monaco editor is opaque to accessibility APIs. vscode_screenshot or vscode_zoom → read the image → vscode_click_xy(x, y).

How is this different from Playwright MCP?

This project is built on top of @playwright/mcp, not a replacement. Playwright MCP provides generic Electron automation. We add:

• Isolated VS Code launch with temp user-data-dir, suppressed Welcome tab, settings injection

• Command palette automation (vscode_run_command) — execute commands by name

• Editor state scraping (vscode_get_state) — cursor, diagnostics, completions, peek widget

• Monaco-aware tools (vscode_zoom, vscode_find_element) — the editor is invisible to generic a11y tools

• Lazy tool discovery — 1 tool visible before launch, all ~26 after (saves context tokens)

• GIF recording of VS Code sessions

Development

npm run build          # Build with tsup
npm run dev            # Build in watch mode
npm test               # Run unit tests (vitest)
npm run test:integration  # Run integration tests (requires VS Code)
npm run test:e2e       # Run E2E tests (full MCP protocol loop)
npm run typecheck      # Type-check with tsc
npm run lint           # Lint with ESLint

License

MIT