My MCP Server Example

🚀 Remotely Set Up an MCP Server on Cloudflare

Let's get a remote MCP server up and running on Cloudflare Workers, complete with 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 Model Context Protocol (MCP) Inspector.

• Start the inspector using the following command: npx @modelcontextprotocol/inspector
• In the inspector, switch the transport type to SSE, enter http://localhost:8787/sse in the URL field, and then click "Connect".
• You'll be taken to a (simulated) user login screen. Enter any email and password to log in.
• After successful login, you'll be redirected back to the MCP inspector and can list and call any defined tools!

🔗 Connect Claude Desktop to Your Local MCP Server

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

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 that allows Claude to communicate with your MCP server over HTTP.

When you open Claude, the browser window should display the login screen. You should be able to see the list of available tools, which is displayed at the bottom right.

Enter appropriate prompts as prompted, and Claude will call the tools on the MCP server.

🚀 Deployment to Cloudflare

1. npx wrangler kv namespace create OAUTH_KV
2. Follow the instructions to add the kv namespace ID to wrangler.jsonc
3. npm run deploy

🔗 Call the Newly Deployed Remote MCP Server from a Remote MCP Client

Just as you did in the "Local Development" section, run the MCP inspector: npx @modelcontextprotocol/inspector@latest

Then enter your Cloudflare Worker URL (e.g., worker-name.account-name.workers.dev/sse) in the inspector and click "Connect".

You've now successfully connected the MCP server to the remote MCP client.

🔗 Connect Claude Desktop to Your Remote MCP Server

In the Claude Desktop configuration file, replace the URL with the new Cloudflare Worker URL:

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-worker-name.your-account-id.workers.dev/sse"
      ]
    }
  }
}

After saving the file, Claude will communicate with your Cloudflare Worker over HTTP.

💡 Debugging Tips

If you encounter issues, check the following:

1. Ensure that the MCP server is running.
2. Check that your network connection is working properly.
3. Look for error messages in the console.

With these steps, you can successfully run and use the MCP server on Cloudflare Workers!