How to use MCP in the Web Browser with Web MCP Bridge
The Model Context Protocol (MCP) by Anthropic has revolutionized how LLMs interact with local environments, databases, and custom developer tooling. However, there has been a major limitation: native MCP capabilities were largely tied to desktop apps like Claude Desktop or Cursor.

If you primarily rely on the free or web interfaces of ChatGPT, Claude.ai, Google Gemini, or DeepSeek, accessing your local machine's context has been a challenge.

To bridge this gap, I built Web MCP Bridge—an open-source Chrome extension and Python WebSocket bridge that brings true local MCP execution directly into web-based AI chat interfaces.

🛠️ The Architecture: How It Works
Web MCP Bridge establishes a real-time, low-latency link between your web browser and your local OS environment:

[ Web Browser (ChatGPT / Claude / Gemini) ]
│
▼ (Extension Injector)
[ Local WebSocket Bridge (Python / Node) ]
│
▼ (Standard Input/Output / MCP Protocol)
[ Local MCP Servers (Filesystem, Terminal, Databases, 3D Renderers) ]
The Chrome Extension: Monitors prompt contexts and handles tool execution payload blocks.

The Local WebSocket Server: Runs lightweight background processes on your machine.

Your MCP Servers: Execute your local scripts, inspect files, or manage database transactions securely.

⚡ What Can You Do With It?
By extending web AIs with local machine access, you can run developer workflows like:

💻 Run local CLI & PowerShell commands directly from a web prompt.

📁 Inspect project file structures and sync code context with web LLMs.

🗄️ Query local databases (SQLite, MySQL, PostgreSQL) safely.

🎨 Render 3D assets & scripts (e.g., OpenSCAD) on-the-fly.

🤖 Automate local OS tasks without leaving the browser interface.

🚀 Quick Setup Guide
Getting up and running takes less than a minute:

  1. Clone the Repository Bash git clone https://github.com/AstraxOf/web-mcp-bridge.git cd web-mcp-bridge
  2. Install the Chrome Extension Open your browser and navigate to chrome://extensions/.

Enable Developer mode (top right toggle).

Click Load unpacked and select the extension directory from the cloned repo.

  1. Start the Local Bridge For Windows users, simply run install.cmd inside the server/ directory (or execute via terminal for Linux/macOS):

Bash
cd server
python bridge.py
Once connected, your web chat interface will instantly recognize your registered local MCP tools.

📽️ Demo & Walkthrough
Check out the step-by-step video setup and live demonstration:

▶️ Watch the Demo Video on YouTube

🤝 Open Source & Contributions
Web MCP Bridge is completely free and open-source. Whether you want to add support for additional web AI providers, build custom local MCP modules, or optimize the WebSocket bridge, contributions are welcome!

⭐️ GitHub Repo: AstraxOf/web-mcp-bridge

Let me know in the comments below: What local tools or workflows would you like to connect to your web AI chats?