Remote MCP Server on Cloudflare

Let's get a remote MCP server up-and-running on Cloudflare Workers complete with OAuth login!

Develop locally

# clone the repository
git clone git@github.com:cloudflare/ai.git

# install dependencies
cd ai
npm install

# run locally
npx nx dev remote-mcp-server-bearer-auth

You should be able to open http://localhost:8787/ in your browser

Connect the MCP inspector to your server

To explore your new MCP api, you can use the MCP Inspector.

• Start it with npx @modelcontextprotocol/inspector
• Within the inspector, switch the Transport Type to SSE and enter http://localhost:8787/sse as the URL of the MCP server to connect to.
• Add a bearer token and click "Connect"
• Click "List Tools"
• Run the "getToken" tool, which should return the Authorization header that you set in the inspector

Connect Claude Desktop to your local MCP server

    "remote-example": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse",
        "--header",
        "Authorization: Bearer {token}"
      ]
    }

Deploy to Cloudflare

npm run deploy

Call your newly deployed remote MCP server from a remote MCP client

Just like you did above in "Develop locally", run the MCP inspector:

npx @modelcontextprotocol/inspector@latest

Then enter the workers.dev URL (ex: worker-name.account-name.workers.dev/sse) of your Worker in the inspector as the URL of the MCP server to connect to, and click "Connect".

You've now connected to your MCP server from a remote MCP client. You can pass in a bearer token like mentioned above

Connect Claude Desktop to your remote MCP server

TODO: We need to support arbitrary headers to the mcp-remote proxy

Debugging

Should anything go wrong it can be helpful to restart Claude, or to try connecting directly to your MCP server on the command line with the following command.

npx mcp-remote http://localhost:8787/sse

In some rare cases it may help to clear the files added to ~/.mcp-auth

rm -rf ~/.mcp-auth