mcpField
I
InBrowserMCP Project

InBrowserMCP Project

Local
github.com/LofiSuDeveloper Tools1Updated 78w ago
Repository

About InBrowserMCP Project

InBrowserMCP Project connects an AI model to a web browser through a Chrome extension, with a React frontend and Node.js MCP server. It is intended for projects that need browser actions and results routed between an interface and the extension.

Key features

  1. 01React interface for commands and browser state
  2. 02Node.js MCP server
  3. 03Chrome extension connected over WebSocket
  4. 04Browser navigation, clicking, and typing
  5. 05Page results returned through SSE

Use cases

  1. 01Send browser commands from the frontend
  2. 02Navigate pages and interact with page controls
  3. 03Retrieve page content through the extension

MCP support

The MCP server translates commands into MCP tool calls and relays browser actions to the Chrome extension over WebSocket. The extension returns outcomes to the server, which sends updates to the frontend through SSE.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

InBrowserMCP Project

This project implements a system based on the Model Context Protocol (MCP) that allows an AI model to interact with a web browser via a browser extension.

Overview

The project consists of three main parts:

  1. Frontend (frontend/): A React-based web application that provides the user interface for interacting with the AI and viewing browser state. It communicates with the MCP server.
  2. MCP Server (mcp-server/): A Node.js backend server implementing the MCP specification. It orchestrates communication between the frontend, the AI model (implicitly), and the browser extension.
  3. Browser Extension (extension/): A Chrome extension that connects to the MCP server via WebSocket and executes browser actions (like navigation, clicks, typing, getting content) based on commands received from the server.

Architecture

+-----------------+      +-----------------+      +---------------------+
| Frontend (React)| <--> | MCP Server (Node)| <--> | Browser Extension   |
| (localhost:5173)|      | (localhost:3000) |      | (via WebSocket 8081)|
+-----------------+      +-----------------+      +---------------------+
       |                      ^
       | User Interaction       | AI Model Interaction (Conceptual)
       v                      |
+-----------------+      +-----------------+
| User's Browser  |      | AI Model        |
+-----------------+      +-----------------+
  • The Frontend sends user commands (or AI instructions) to the MCP Server.
  • The MCP Server interprets these commands, potentially interacts with an AI model (not explicitly implemented here but assumed), and translates actions into MCP tool calls.
  • The MCP Server sends browser action commands to the Browser Extension via WebSocket.
  • The Browser Extension executes these actions in the user's browser (e.g., navigates, clicks, scrapes content).
  • The Browser Extension sends results (like page snapshots or command outcomes) back to the MCP Server.
  • The MCP Server processes the results and streams updates or final responses back to the Frontend via Server-Sent Events (SSE).

Getting Started

Follow the instructions in the respective README files for each component:

General Workflow
  1. Start the MCP Server (cd mcp-server && pnpm dev).
  2. Load the Browser Extension in Chrome (chrome://extensions/).
  3. Start the Frontend (cd frontend && pnpm dev).
  4. Open the Frontend application in your browser (usually http://localhost:5173).
  5. The frontend will initialize an MCP session with the server, which connects to the extension.
  6. Interact with the frontend to send commands that control the browser via the extension.

Contributing

(Add contribution guidelines if applicable)

License

(Specify project license, e.g., MIT)

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.