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

Related MCP server: Playwright MCP Server

Prerequisites

• Node.js (v16 or higher)

• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd mcp2browser

2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Start the server:

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:

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

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode (with nodemon auto-reload)
npm run dev

# Start the server (production)
npm start

The dev script uses nodemon to watch for TypeScript file changes and automatically restart the server using ts-node, making development more efficient.

Architecture

• index.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