Remote MCP Server On Cloudflare B9s

🚀 Building a Remote MCP Server on Cloudflare

Let's build a remote MCP server running 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 http://localhost:8787/ in your browser.

🔗 Connecting the MCP Inspector to Your Server

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

• Start it using npx @modelcontextprotocol/inspector.
• In the inspector (http://localhost:5173), switch the transport type to SSE, enter http://localhost:8787/sse as the MCP server address in the URL, and then click "Connect".
• You'll enter a simulated login interface. Enter any email and password to complete the login.
• After successful login, you can list and call any defined tools in the inspector!

🔗 Connecting Claude Desktop to the Local MCP Server

While the MCP Inspector is useful, we'd prefer to integrate it with Claude! Follow the Anthropic's Quick Start Guide, go to Settings > Developer > Edit Configuration File in Claude Desktop. Open the file and replace it with the following content:

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

This will run a local proxy, allowing Claude to communicate with your MCP server via HTTP. After starting Claude, a browser window should open, prompting you to log in. You can see the list of available tools in the bottom - right corner. Based on the correct prompts, Claude may request to call a tool.

🚀 Deployment to Cloudflare

1. Log in to the Cloudflare Dashboard.
2. Select your site or create a new one.
3. Go to "Workers" > "Create a Script" and fill in the relevant information (such as name, file path, etc.).
4. Ensure that relevant settings are enabled, such as allowing access to sensitive information.
5. Save the script and deploy it. After completing these steps, your MCP server will be hosted on Cloudflare and can be accessed via its assigned domain name.

📞 Calling the Deployed MCP Server from a Remote Client

1. After successful deployment, you can test it using the curl command:

curl -X POST http://your - domain/some - endpoint

2. Adjust the request parameters and paths according to your specific implementation. Make sure to check the documentation and logs before actual use to ensure everything is running smoothly.

⚠️ Troubleshooting

• Problem: Unable to connect to the MCP server
  • Check if the network is working properly.
  • Ensure that Cloudflare Workers are deployed correctly.
  • Check the Cloudflare console for error logs.
• Problem: Login failed
  • Ensure that the OAuth configuration is correct and the keys are valid.
  • Check each step in the authentication process to ensure no steps are missed.
• Problem: Tools are not listed or cannot be called
  • Check the MCP server's API documentation to confirm that the endpoints and parameters are correct.
  • Manually test the relevant interfaces using the curl command.

By following the above steps, you should be able to successfully build, connect, and use the remote MCP server, and quickly locate and solve problems when they occur. Good luck exploring the MCP protocol!