Remote MCP Server On Cloudflare Jii

🚀 Set Up a Remote MCP Server on Cloudflare

Let's launch a remote MCP server 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 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 bar, and click "Connect".
• You'll be redirected to a (simulated) user/password login page. Enter any email and password to log in.
• After successful login, you should be redirected back to the MCP inspector, and you can list and call any defined tools!

🔗 Connect Claude Desktop to the Local MCP Server

The MCP inspector is powerful, but we'd like to connect it to Claude! Follow Anthropic's Quick Start Guide, go to Settings > Developer > Edit Configuration in Claude Desktop, and find your configuration file.

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 via the HTTP protocol.

When you open Claude, a browser window should open and prompt you to log in. You should be able to see a list of available tools. Based on the correct prompts, Claude may request to call a tool.

🚀 Deployment to Cloudflare

1. npx wrangler kv namespace create OAUTH_KV
2. Add the kv namespace ID to wrangler.jsonc according to the guide.
3. npm run deploy

📞 Call Your Newly Deployed Remote MCP Server from a Remote MCP Client

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

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

You've connected to your MCP server via a remote MCP client.

🔗 Connect Claude Desktop to Your Remote MCP Server

Update Claude's configuration file to point to your workers.dev URL (e.g., worker-name.account-name.workers.dev/sse), and then restart Claude.

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