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:

2. Install dependencies:

3. Build the project:

4. Start the server:

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:

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

Example 2: Getting the page title

Example 3: Combined workflow

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

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