mcp-remote 0.0.8 → 0.0.10-0

package/README.md

@@ -2,7 +2,19 @@
 
 Connect an MCP Client that only supports local (stdio) servers to a Remote MCP Server, with auth support:
 
-**Note: this is a working proof-of-concept** but should be considered **experimental**
+**Note: this is a working proof-of-concept** but should be considered **experimental**.
+
+## Why is this necessary?
+
+So far, the majority of MCP servers in the wild are installed locally, using the stdio transport. This has some benefits: both the client and the server can implicitly trust each other as the user has granted them both permission to run. Adding secrets like API keys can be done using environment variables and never leave your machine. And building on `npx` and `uvx` has allowed users to avoid explicit install steps, too.
+
+But there's a reason most software that _could_ be moved to the web _did_ get moved to the web: it's so much easier to find and fix bugs & iterate on new features when you can push updates to all your users with a single deploy.
+
+With the MCP [Authorization specification](https://spec.modelcontextprotocol.io/specification/draft/basic/authorization/) nearing completion, we now have a secure way of sharing our MCP servers with the world _without_ running code on user's laptops. Or at least, you would, if all the popular MCP _clients_ supported it yet. Most are stdio-only, and those that _do_ support HTTP+SSE don't yet support the OAuth flows required.
+
+That's where `mcp-remote` comes in. As soon as your chosen MCP client supports remote, authorized servers, you can remove it. Until that time, drop in this one liner and dress for the MCP clients you want!
+
+## Usage
 
 E.g: Claude Desktop or Windsurf
 
@@ -20,3 +32,53 @@ E.g: Claude Desktop or Windsurf
 Cursor:
 
 ![image](https://github.com/user-attachments/assets/14338bfa-a779-4e8a-a477-71f72cc5d99d)
+
+## Building Remote MCP Servers
+
+For instructions on building & deploying remote MCP servers, including acting as a valid OAuth client, see the following resources:
+
+* https://developers.cloudflare.com/agents/guides/remote-mcp-server/
+
+In particular, see:
+
+* https://github.com/cloudflare/workers-oauth-provider for defining an MCP-comlpiant OAuth server in Cloudflare Workers
+* https://github.com/cloudflare/agents/tree/main/examples/mcp for defining an `McpAgent` using the [`agents`](https://npmjs.com/package/agents) framework.
+
+For more information about testing these servers, see also:
+
+* https://developers.cloudflare.com/agents/guides/test-remote-mcp-server/
+
+Know of more resources you'd like to share? Please add them to this Readme and send a PR!
+
+## Debugging
+
+### Check your Node version
+
+Make sure that the version of Node you have installed is [16 or higher](https://modelcontextprotocol.io/quickstart/server).
+
+### Restart Claude
+
+When modifying `claude_desktop_config.json` it can helpful to completely restart Claude
+
+### VPN Certs
+
+You may run into issues if you are behind a VPN, you can try setting the `NODE_EXTRA_CA_CERTS`
+environment variable to point to the CA certificate file. If using `claude_desktop_config.json`,
+this might look like:
+
+```json
+{
+ "mcpServers": {
+    "remote-example": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://remote.mcp.server/sse"
+      ],
+      "env": {
+        "NODE_EXTRA_CA_CERTS": "{your CA certificate file path}.pem"
+      }
+    }
+  }
+}
+```

package/dist/cli/proxy.js

@@ -13,6 +13,7 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 // src/lib/utils.ts
 import { UnauthorizedError } from "@modelcontextprotocol/sdk/client/auth.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+var pid = process.pid;
 function mcpProxy({ transportToClient, transportToServer }) {
   let transportToClientClosed = false;
   let transportToServerClosed = false;
@@ -48,7 +49,7 @@ function mcpProxy({ transportToClient, transportToServer }) {
   }
 }
 async function connectToRemoteServer(serverUrl, authProvider, waitForAuthCode) {
-  console.error("Connecting to remote server:", serverUrl);
+  console.error(`[${pid}] Connecting to remote server: ${serverUrl}`);
   const url = new URL(serverUrl);
   const transport = new SSEClientTransport(url, { authProvider });
   try {
@@ -109,6 +110,28 @@ async function runProxy(serverUrl, callbackPort) {
     setupSignalHandlers(cleanup);
   } catch (error) {
     console.error("Fatal error:", error);
+    if (error instanceof Error && error.message.includes("self-signed certificate in certificate chain")) {
+      console.error(`You may be behind a VPN!
+
+If you are behind a VPN, you can try setting the NODE_EXTRA_CA_CERTS environment variable to point
+to the CA certificate file. If using claude_desktop_config.json, this might look like:
+
+{
+  "mcpServers": {
+    "\${mcpServerName}": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://remote.mcp.server/sse"
+      ],
+      "env": {
+        "NODE_EXTRA_CA_CERTS": "\${your CA certificate file path}.pem"
+      }
+    }
+  }
+}
+        `);
+    }
     server.close();
     process.exit(1);
   }

package/dist/react/index.d.ts

@@ -61,6 +61,10 @@ type UseMcpResult = {
      * @returns Auth URL that can be used to manually open a new window
      */
     authenticate: () => Promise<string | undefined>;
+    /**
+     * Clear all localStorage items for this server
+     */
+    clearStorage: () => void;
 };
 /**
  * useMcp is a React hook that connects to a remote MCP server, negotiates auth

package/dist/react/index.js

@@ -36,6 +36,34 @@ var BrowserOAuthClientProvider = class {
       client_uri: this.clientUri
     };
   }
+  /**
+   * Clears all storage items related to this server
+   * @returns The number of items cleared
+   */
+  clearStorage() {
+    const prefix = `${this.storageKeyPrefix}_${this.serverUrlHash}`;
+    const keysToRemove = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith(prefix)) {
+        keysToRemove.push(key);
+      }
+    }
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith(`${this.storageKeyPrefix}:state_`)) {
+        try {
+          const state = JSON.parse(localStorage.getItem(key) || "{}");
+          if (state.serverUrlHash === this.serverUrlHash) {
+            keysToRemove.push(key);
+          }
+        } catch (e) {
+        }
+      }
+    }
+    keysToRemove.forEach((key) => localStorage.removeItem(key));
+    return keysToRemove.length;
+  }
   hashString(str) {
     let hash = 0;
     for (let i = 0; i < str.length; i++) {
@@ -486,6 +514,18 @@ function useMcp(options) {
       }
     };
   }, [disconnect]);
+  const clearStorage = useCallback(() => {
+    if (!authProviderRef.current) {
+      addLog("warn", "Cannot clear storage: auth provider not initialized");
+      return;
+    }
+    const clearedCount = authProviderRef.current.clearStorage();
+    authUrlRef.current = void 0;
+    setAuthUrl(void 0);
+    metadataRef.current = void 0;
+    codeVerifierRef.current = void 0;
+    addLog("info", `Cleared ${clearedCount} storage items for server`);
+  }, [addLog]);
   return {
     state,
     tools,
@@ -495,7 +535,8 @@ function useMcp(options) {
     callTool,
     retry,
     disconnect,
-    authenticate
+    authenticate,
+    clearStorage
   };
 }
 async function onMcpAuthorization(query, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-remote",
-  "version": "0.0.8",
+  "version": "0.0.10-0",
   "type": "module",
   "bin": {
     "mcp-remote": "dist/cli/proxy.js"
@@ -18,6 +18,7 @@
     }
   },
   "scripts": {
+    "dev": "tsup --watch",
     "build": "tsup",
     "check": "prettier --check . && tsc"
   },