MCP2Browser

# MCP2Browser A Model Context Protocol (MCP) server that provides browser automation capabilities through HTTP. This server exposes browser inspection tools via the MCP protocol, allowing AI assistants to interact with web pages. ## Features - **Open Web Pages**: Navigate to any URL using Playwright - **Get Page Title**: Retrieve the title of the currently opened page - HTTP-based MCP server running on Express ## Prerequisites - Node.js (v16 or higher) - npm or yarn ## Installation 1. Clone the repository: ```bash git clone <repository-url> cd mcp2browser ``` 2. Install dependencies: ```bash npm install ``` 3. Build the project: ```bash npm run build ``` 4. Start the server: ```bash npm start ``` The server will start running on `http://localhost:3000/mcp` ## Using with VS Code To use this MCP server with GitHub Copilot in VS Code, you need to configure it in your MCP settings. ### Configuration Steps **Option 1: Using MCP: Add Server Command** 1. Press `Cmd+Shift+P` (macOS) or `Ctrl+Shift+P` (Windows/Linux) to open the command palette 2. Type and select "MCP: Add Server" 3. Enter the server name: `browser-mcp` 4. Select transport type: `HTTP (streamable-http)` 5. Enter the server URL: `http://localhost:3000/mcp` **Option 2: Manual Configuration** 1. Open VS Code Settings (JSON) by pressing `Cmd+Shift+P` (macOS) or `Ctrl+Shift+P` (Windows/Linux) and searching for "Preferences: Open User Settings (JSON)" 2. Add the MCP server configuration to your settings: ```json { "github.copilot.chat.mcp.servers": { "browser-mcp": { "type": "http", "url": "http://localhost:3000/mcp", "transport": "streamable-http" } } } ``` 3. Make sure the MCP server is running (see Installation steps above) 4. Restart VS Code or reload the window (`Cmd+R` on macOS, `Ctrl+R` on Windows/Linux) ### Example Usage Once configured, you can interact with the browser tools through GitHub Copilot Chat in VS Code: **Example 1: Opening a web page** ``` User: Open the page https://github.com Copilot: [Uses the openPage tool to navigate to GitHub] ``` **Example 2: Getting the page title** ``` User: What's the title of the current page? Copilot: [Uses the getPageTitle tool to retrieve the title] ``` **Example 3: Combined workflow** ``` User: Open https://example.com and tell me what the page title is Copilot: [Opens the page and then retrieves the title] ``` ## Available Tools ### `openPage` Opens a web page in a headless browser. **Input:** - `url` (string): The URL to navigate to **Output:** - `status` (string): Status message indicating success ### `getPageTitle` Retrieves the title of the currently opened web page. **Input:** None **Output:** - `title` (string): The title of the current page ## Development ```bash # Install dependencies npm install # Build the project npm run build # Run in development mode (with auto-reload) npm run dev # Start the server npm start ``` ## Architecture - **server.ts**: Main Express server setup - **mcp-route.ts**: MCP protocol implementation and tool definitions - Uses Playwright for browser automation - Implements StreamableHTTPServerTransport for MCP over HTTP ## Troubleshooting **Issue**: Server not connecting in VS Code - Ensure the server is running on `http://localhost:3000/mcp` - Check VS Code settings are configured correctly - Restart VS Code after changing MCP settings **Issue**: Tools not appearing in Copilot - Verify the MCP server configuration in VS Code settings - Check the server logs for any errors - Ensure GitHub Copilot extension is up to date ## License MIT