Remote MCP Server On Cloudflare Rh3

🚀 Running a Remote MCP Server on Cloudflare

Let's build a remote MCP server based on Cloudflare Workers and integrate OAuth login functionality!

🚀 Quick Start

🔨 Local Development

# 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

You should be able to open a browser window at http://localhost:8787/.

🔗 Connect the MCP Inspector to Your Server

To explore the new MCP API, you can use the MCP Inspector.

• Start the inspector using npx @modelcontextprotocol/inspector.
• In the inspector (http://localhost:5173), switch the transport type to SSE, enter http://localhost:8787/sse as the URL of the MCP server, and then click "Connect".
• You'll be navigated to a (simulated) user/password login screen. Enter any email and password to log in.
• You should be redirected back to the MCP inspector and be able to list and call any defined tools!

🔗 Connect Claude Desktop to Your Local MCP Server

The MCP inspector is powerful, but what we really want is to connect it to Claude! Follow the Anthropic's Quick Start Guide, and go to Settings > Developer > Edit Profile in Claude Desktop to find your profile.

Open the file in a text editor and replace its contents with the following configuration:

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

This will run a local proxy that allows Claude to communicate with your MCP server over HTTP.

When you open Claude, a browser window should open and allow you to log in. You should see a list of available tools in the bottom right corner. As prompted, Claude should call the MCP addition tool to answer questions.

🚀 Deployment to Cloudflare

1. npx wrangler kv namespace create OAUTH_KV
2. Follow the instructions to add the KV namespace ID to the wrangler-config.ts file.
3. Deploy the code to Cloudflare Workers using npm run build and npm run deploy.

🔗 Connect Claude to Your Cloudflare MCP Server

In Claude's configuration file, update it as follows:

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-deployed-url.com/sse"
      ]
    }
  }
}

Replace your-deployed-url.com with your actual deployed URL.

🐞 Debugging

To test the connection, you can run the following command:

npx mcp-remote https://your-deployed-url.com/sse

If there are issues, make sure your Cloudflare Workers service is configured correctly, and you can clear your browser cache to resolve the problem.