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)
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
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.