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)

Install this extension from the VS Code marketplace
Open a workspace folder in VS Code
Run command: AiSquare: Setup MCP Configuration (Ctrl+Shift+P)
Restart VS Code when prompted
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:

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"
    }
  }
}

Restart VS Code to load the MCP configuration
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:

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

Extension Not Starting

If the extension doesn't start automatically:

Check the output panel for error messages
Try manually running AiSquare: Start AiSquare Playwright MCP Server
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.

AiSquare Playwright MCP

Paysyslabs