Skip to content
| Marketplace
Sign in
Visual Studio Code>Testing>AiSquare Playwright MCPNew to Visual Studio Code? Get it now.
AiSquare Playwright MCP

AiSquare Playwright MCP

Paysyslabs

|
159 installs
| (1) | Free
Model Context Protocol server for browser automation with Playwright - enables LLMs to interact with web pages through structured accessibility snapshots
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

AiSquare Playwright MCP Extension

This VS Code extension provides integration with the AiSquare Playwright MCP (Model Context Protocol) server, enabling browser automation capabilities directly from VS Code.

Features

  • Browser Automation: Control web browsers using Playwright through MCP
  • LLM Integration: Works seamlessly with GitHub Copilot and other AI assistants
  • Easy Configuration: Simple settings to customize the MCP server behavior
  • Auto-Start: Automatically starts the MCP server when VS Code launches
  • Multiple Browsers: Support for Chromium, Firefox, and WebKit

Installation & Setup

Quick Setup (Recommended)

  1. Install this extension from the VS Code marketplace
  2. Open a workspace folder in VS Code
  3. Run command: AiSquare: Setup MCP Configuration (Ctrl+Shift+P)
  4. Restart VS Code when prompted
  5. Your browser automation tools will appear in the MCP tools configuration

Manual Setup

If the automatic setup doesn't work, you can configure MCP manually:

  1. In your workspace directory, create the file .vscode/mcp.json with this content:
{
  "inputs": [],
  "servers": {
    "aisquare-playwright": {
      "command": "npx",
      "args": [
        "aisquare-playwright-mcp@latest"
      ],
      "type": "stdio"
    }
  }
}
  1. Restart VS Code to load the MCP configuration

  2. Check MCP Tools:

    • Open Command Palette (Ctrl+Shift+P)
    • Type "MCP: Configure Tools"
    • You should see "aisquare-playwright" in the list
    • Enable the tools you want to use

Usage

Once configured, you can use browser automation commands with GitHub Copilot or other compatible AI assistants.

Commands

  • AiSquare: Start AiSquare Playwright MCP Server - Manually start the server
  • AiSquare: Stop AiSquare Playwright MCP Server - Stop the server
  • AiSquare: Restart AiSquare Playwright MCP Server - Restart the server
  • AiSquare: Configure AiSquare Playwright MCP - Open configuration dialog
  • AiSquare: Setup MCP Configuration - Automatically configure MCP settings for your workspace

Configuration

The extension can be configured through VS Code settings:

  • aisquare-playwright-mcp.autoStart: Automatically start the server when VS Code starts (default: true)
  • aisquare-playwright-mcp.serverPort: Port for the MCP server (default: 3000)
  • aisquare-playwright-mcp.headless: Run browser in headless mode (default: true)
  • aisquare-playwright-mcp.browser: Default browser to use (chromium, firefox, or webkit)

Available MCP Tools

The extension provides access to various browser automation tools:

  • Navigation: Navigate to URLs, go back/forward
  • Interaction: Click elements, type text, select options
  • Screenshots: Capture page or element screenshots
  • Network: Monitor network requests and responses
  • Console: Access browser console messages
  • File Upload: Upload files to web forms
  • Drag & Drop: Perform drag and drop operations
  • Code Generation: Generate Playwright test code

Troubleshooting

Tools Not Appearing in MCP Configuration

If browser automation tools don't appear in the "MCP: Configure Tools" section:

  1. Make sure you have a workspace folder open (not just individual files)
  2. Run the command AiSquare: Setup MCP Configuration
  3. Restart VS Code when prompted
  4. Check that .vscode/mcp.json exists in your workspace
  5. Verify the MCP server is running by checking the output panel

Extension Not Starting

If the extension doesn't start automatically:

  1. Check the output panel for error messages
  2. Try manually running AiSquare: Start AiSquare Playwright MCP Server
  3. Ensure you have Node.js installed (version 18 or higher)

Requirements

  • VS Code 1.74.0 or higher
  • Node.js 18 or higher (automatically handled by the extension)
  • A workspace folder (required for MCP configuration)

Support

For issues and support, please email us at [taaha.iqbal@paysyslabs.com].

Credits

This project is based on microsoft/playwright-mcp, an open-source project that provided the headstart and foundation for our implementation. We extend our gratitude to Microsoft for open-sourcing their work, which made this extension possible.

License

This extension is licensed under the Apache 2.0 License.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft