WebMCP connects web-based AI products such as ChatGPT, Gemini, and DeepSeek to local development tools exposed through MCP in VS Code.

中文说明

Please read this before using WebMCP:

1. Use at your own risk. WebMCP bridges remote AI systems with local tools and files. You are responsible for what those tools are allowed to do.
2. Check the terms of service of the AI products you use. Automated interaction may not be allowed on some platforms.
3. Do not send secrets or sensitive code unless you are comfortable sharing that data with the AI provider you are using.

• Starts a local MCP gateway in VS Code.
• Opens a supported web AI product through a bridge page.
• Lets the web model call local MCP tools after connection is established.
• Supports multiple browsers, multiple VS Code windows, and browser routing rules.

• Zero-config connection: VS Code manages the local port and session token automatically.
• Browser routing: Different domains can open in different browsers.
• Dynamic authentication: Each session uses a temporary token instead of a fixed browser extension ID allowlist.
• Origin isolation: The gateway only accepts requests from the expected origin.
• Workspace skills: Local skills can be discovered from the current workspace and exposed to the model progressively.
• Human-in-the-loop safety: Sensitive operations can require explicit approval before execution.

WebMCP is designed to keep the user in control:

• Sensitive operations such as file writes or command execution can be blocked until you approve them.
• The gateway runs locally. There is no hosted relay service in the middle.
• Commands are executed relative to the current workspace and can be restricted by the gateway.

That said, WebMCP is still a bridge between a remote model and local tools. Review your tool permissions carefully.

Install WebMCP Gateway from the VS Code Marketplace.

1. Download the latest mcp-bridge-browser.zip from Releases.
2. Extract the archive.
3. Open the browser extensions page:
   • Chrome: chrome://extensions
   • Edge: edge://extensions
4. Enable Developer Mode.
5. Click Load unpacked and select the extracted folder.

1. Open VS Code.
2. Click WebMCP: OFF in the bottom-right status bar.
3. In the menu that opens, click Start WebMCP.
4. Wait for the status bar item to change to WebMCP: <port>.

When the status bar shows a port number, the local gateway is running.

1. Click WebMCP: <port> in the status bar.
2. Choose the target site you want to open, such as Open Gemini, Open ChatGPT, or another supported entry.
3. WebMCP opens the bridge page in the configured browser.
4. The bridge page completes the handshake with the local gateway automatically.
5. After the handshake succeeds, the browser redirects to the target AI site.

When the browser extension shows ON, the connection is ready to use.

Before first use, add the WebMCP initialization prompt to the AI product you use.

1. Click the WebMCP browser extension icon in the browser toolbar.
2. Click Copy Initialization Prompt.
3. Open the settings page of the AI product you are using.
4. Find the area for memory, preferences, profile instructions, or custom instructions.
5. Paste the copied prompt there and save it.

You usually only need to do this once per product/account.

1. Open a new chat or an existing chat on the target AI site.
2. Enter /webmcp or @webmcp.
3. Add your actual task in the same message.
4. Send the message.

For example:

• Read src/utils.ts and write a unit test for it.
• List the files in the current workspace.
• Create project docs under the docs directory.

WebMCP can expose local skills from the current VS Code workspace.

Default scan directories:

• .agents/skills
• .codex/skills
• skills

A skill is any directory containing SKILL.md.

The recommended loading flow is:

1. Call list_skills or search_skills.
2. Call get_skill for the selected skill.
3. Call get_skill_resource only when the skill references extra files such as references/, templates/, or scripts/.

Example:

.agents/
  skills/
    my-skill/
      SKILL.md
      references/
        examples.md

You can customize scan paths with the VS Code setting mcpGateway.skillDirectories.

• Node.js 18+
• VS Code

git clone https://github.com/three-water666/WebMCP.git
cd WebMCP

The build scripts generate both the VS Code extension (.vsix) and the browser extension package (.zip).

macOS / Linux:

chmod +x build_release.sh
./build_release.sh

Windows PowerShell:

.\build_release.ps1

Build artifacts are written to the release/ directory.

• VS Code: open Extensions, choose ..., then Install from VSIX...
• Browser: open the extensions page, enable Developer Mode, click Load unpacked, and select the extracted extension folder from release/ or mcp-bridge-browser

Issues and pull requests are welcome.

MIT License