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

2. Restart VS Code to load the MCP configuration

3. 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].

License

This extension is licensed under the Apache 2.0 License.