InBrowserMCP Project

What is InBrowserMCP Project?

The InBrowserMCP 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. It consists of a React frontend, a Node.js MCP server, and a Chrome browser extension that communicate to execute browser actions.

How to use InBrowserMCP Project?

Start the MCP server (cd mcp-server && pnpm dev), load the Browser Extension in Chrome (chrome://extensions/), start the Frontend (cd frontend && pnpm dev), then open the frontend application at http://localhost:5173 to send commands that control the browser.

Key features of InBrowserMCP Project

• React-based frontend for user interaction with AI
• Node.js MCP server implementing the MCP specification
• Chrome browser extension connects via WebSocket
• Server-Sent Events (SSE) for streaming responses
• Orchestrates browser navigation, clicks, typing, and content extraction

Use cases of InBrowserMCP Project

• AI-controlled web browsing for automation
• Automated form filling and data scraping via browser
• Testing web pages with AI-driven navigation
• Building AI assistants that can interact with live websites

FAQ from InBrowserMCP Project

What components make up the InBrowserMCP Project?

The project has three main parts: a React frontend (port 5173), a Node.js MCP server (port 3000), and a Chrome browser extension (WebSocket port 8081).

How does the architecture work?

The frontend sends user commands to the MCP server, which translates them into MCP tool calls. The server sends browser actions to the extension via WebSocket, and the extension executes them and returns results. The server then streams responses back to the frontend via SSE.

Does the project include an AI model?

No, an AI model is not explicitly implemented in this project; it is assumed that the frontend or MCP server will interact with an external AI model as part of the system.

What are the runtime requirements for running InBrowserMCP Project?

You need Node.js and pnpm for the server and frontend, and Google Chrome to load the browser extension. All communication uses localhost ports 5173, 3000, and 8081.

How do I start using InBrowserMCP Project?

Follow the general workflow: start the MCP server, load the extension in Chrome, start the frontend, and open the frontend URL. Detailed instructions are in the respective README files for each component.