Playwright MCP Relay

Playwright MCP Relay provides browser automation capabilities using Playwright, enabling Copilot to interact with web pages as VSCode Language Model Tools, which means this extension works even if MCP was disabled in Github Copilot and VSCode

⚠️ IMPORTANT: Manual Tool Set Configuration Required

This extension's tools need to be manually configured as a tool set in VS Code. Follow these steps to enable all tools at once:

Steps to Configure Tool Set:

1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
2. Search for and select: Chat: Configure Tool Sets...
3. Select an existing tool set file or create a new file (e.g., user-toolsets.json)
4. Add the following JSON configuration to the file:

{
    "playwright": {
        "tools": [
            "browser_close",
            "browser_resize",
            "browser_console_messages",
            "browser_handle_dialog",
            "browser_evaluate",
            "browser_file_upload",
            "browser_fill_form",
            "browser_install",
            "browser_press_key",
            "browser_type",
            "browser_navigate",
            "browser_navigate_back",
            "browser_network_requests",
            "browser_take_screenshot",
            "browser_snapshot",
            "browser_click",
            "browser_drag",
            "browser_hover",
            "browser_select_option",
            "browser_tabs",
            "browser_wait_for"
        ],
        "description": "Playwright tool set provides browser automation capabilities, enabling Copilot to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models",
        "icon": "tools"
    }
}

5. Save the file
6. The tool set will now be available in GitHub Copilot, you can invoke it using '#playwright'

Why is this needed? VS Code doesn't currently support including toolSets in extensions (planned for future releases). This manual step groups all tools under a single name (#playwright) for easier management and invocation similar to MCP Server.

Configuration

Configure the extension using these settings:

• playwright-mcp-relay.autoConnect: Automatically connect to MCP server when VS Code starts. If disabled (default), the server will connect on first tool use. (Default: false)
• playwright-mcp-relay.additionalMCPServerArguments: Additional MCP Server arguments that need to be used when connecting to the MCP Server. You can find the argument details here
  • Type: Dynamic Argument - This value will be appended to the MCP server command at runtime

Features

This extension integrates with an MCP (Model Context Protocol) server to provide enhanced AI capabilities.

• browser_close: Close the page
• browser_resize: Resize the browser window
• browser_console_messages: Returns all console messages
• browser_handle_dialog: Handle a dialog
• browser_evaluate: Evaluate JavaScript expression on page or element
• browser_file_upload: Upload one or multiple files
• browser_fill_form: Fill multiple form fields
• browser_install: Install the browser specified in the config. Call this if you get an error about the browser not being installed.
• browser_press_key: Press a key on the keyboard
• browser_type: Type text into editable element
• browser_navigate: Navigate to a URL
• browser_navigate_back: Go back to the previous page
• browser_network_requests: Returns all network requests since loading the page
• browser_take_screenshot: Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.
• browser_snapshot: Capture accessibility snapshot of the current page, this is better than screenshot
• browser_click: Perform click on a web page
• browser_drag: Perform drag and drop between two elements
• browser_hover: Hover over element on page
• browser_select_option: Select an option in a dropdown
• browser_tabs: List, create, close, or select a browser tab.
• browser_wait_for: Wait for text to appear or disappear or a specified time to pass

MCP Server Connection

This extension connects to an MCP server using the following configuration:

• Transport Type: stdio
• Command: npx
• Arguments: ["@playwright/mcp@latest"]

Note: If you have configured settings with "Dynamic Argument" mapping, those arguments will be automatically appended to the command at runtime based on your VS Code settings. This allows you to customize the MCP server behavior without rebuilding the extension.

Support

Found a bug or have a feature request? Please file an issue at: https://github.com/Vijay-Nirmal/MCPCopilotRelay/issues

About This Extension

This extension was generated using MCP Copilot Relay, a tool for creating VS Code extensions from Model Context Protocol servers.

Enjoy! 🚀