{"slug": "how-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp", "title": "How to use MCP in the Web Browser (ChatGPT, Claude, DeepSeek & Gemini) with Web MCP Bridge", "summary": "A developer built Web MCP Bridge, an open-source Chrome extension paired with a Python WebSocket bridge that lets web-based AI chat interfaces such as ChatGPT, Claude.ai, Gemini and DeepSeek execute local Model Context Protocol tools. The extension monitors prompt contexts and handles tool-execution payloads, while the local WebSocket server relays them to MCP servers for tasks like running CLI commands, inspecting project files, querying databases and rendering 3D assets. Setup requires loading the unpacked extension in Chrome developer mode and running bridge.py from the server directory.", "body_md": "How to use MCP in the Web Browser with Web MCP Bridge\n\nThe 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.\n\nIf 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.\n\nTo 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.\n\n🛠️ The Architecture: How It Works\n\nWeb MCP Bridge establishes a real-time, low-latency link between your web browser and your local OS environment:\n\n[ Web Browser (ChatGPT / Claude / Gemini) ]\n\n                  │\n\n                  ▼ (Extension Injector)\n\n[ Local WebSocket Bridge (Python / Node) ]\n\n                  │\n\n                  ▼ (Standard Input/Output / MCP Protocol)\n\n[ Local MCP Servers (Filesystem, Terminal, Databases, 3D Renderers) ]\n\nThe Chrome Extension: Monitors prompt contexts and handles tool execution payload blocks.\n\nThe Local WebSocket Server: Runs lightweight background processes on your machine.\n\nYour MCP Servers: Execute your local scripts, inspect files, or manage database transactions securely.\n\n⚡ What Can You Do With It?\n\nBy extending web AIs with local machine access, you can run developer workflows like:\n\n💻 Run local CLI & PowerShell commands directly from a web prompt.\n\n📁 Inspect project file structures and sync code context with web LLMs.\n\n🗄️ Query local databases (SQLite, MySQL, PostgreSQL) safely.\n\n🎨 Render 3D assets & scripts (e.g., OpenSCAD) on-the-fly.\n\n🤖 Automate local OS tasks without leaving the browser interface.\n\n🚀 Quick Setup Guide\n\nGetting up and running takes less than a minute:\n\nEnable Developer mode (top right toggle).\n\nClick Load unpacked and select the extension directory from the cloned repo.\n\nBash\n\ncd server\n\npython bridge.py\n\nOnce connected, your web chat interface will instantly recognize your registered local MCP tools.\n\n📽️ Demo & Walkthrough\n\nCheck out the step-by-step video setup and live demonstration:\n\n▶️ [Watch the Demo Video on YouTube](https://www.youtube.com/watch?v=LDNciZso7IU)\n\n🤝 Open Source & Contributions\n\nWeb 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!\n\n⭐️ GitHub Repo: [AstraxOf/web-mcp-bridge](https://github.com/AstraxOf/web-mcp-bridge)\n\nLet me know in the comments below: What local tools or workflows would you like to connect to your web AI chats?", "url": "https://wpnews.pro/news/how-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp", "canonical_source": "https://dev.to/astraxof/ow-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp-bridge-2anp", "published_at": "2026-11-04 17:46:39+00:00", "updated_at": "2026-11-04 17:53:20.844108+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "ai-tools", "developer-tools", "ai-products"], "entities": ["Web MCP Bridge", "Anthropic", "ChatGPT", "Claude", "Google Gemini", "DeepSeek", "Chrome", "AstraxOf"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/how-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp", "markdown": "https://wpnews.pro/news/how-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp.md", "text": "https://wpnews.pro/news/how-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp.txt", "jsonld": "https://wpnews.pro/news/how-to-use-mcp-in-the-web-browser-chatgpt-claude-deepseek-gemini-with-web-mcp.jsonld"}}