Deployed Edge Service for Model Context Protocol (MCP)

This guide details the deployment of an MCP backend endpoint on Cloudflare Workers, secured via OAuth authentication, enabling secure interactions with LLMs.

Local Development Setup

Begin by obtaining the source code repository:

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

# Navigate into the directory and install prerequisites
cd ai
npm install

# Initiate the local development server instance
npx nx dev remote-mcp-server

The service should now be accessible locally, typically at http://localhost:8787/.

Integrating the MCP Inspector Client

To visually inspect and interact with your newly instantiated MCP API, utilize the official MCP Inspector tool.

• Launch the inspector from your terminal: npx @modelcontextprotocol/inspector
• Inside the running inspector interface (usually at http://localhost:5173), configure the Transport Type to SSE.
• Set the MCP Server URL field to http://localhost:8787/sse and initiate the connection.
• A simulated credential screen will appear; using placeholder credentials (any email/password) suffices for local testing.
• Upon successful connection, the inspector will display all registered tools, allowing immediate invocation testing.

Connecting Claude Desktop Environment

While the inspector aids testing, the ultimate goal is integrating with applications like Claude Desktop. Consult Anthropic's official Quickstart guide for preliminary setup. Then, open Claude Desktop's configuration file via Settings > Developer > Edit Config.

Replace the contents of that configuration file with the following structure to proxy traffic through a local bridge to your development server:

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

This setup activates a local relay that tunnels Claude's MCP requests over HTTP to your running local endpoint. After configuration, Claude Desktop should prompt a login window. Successful authentication will reveal your tools in the application's interface, enabling tool calls via appropriate user prompts.

Production Deployment on Cloudflare

To transition this service to the global edge network:

1. Provision a dedicated KV Namespace for credentials: npx wrangler kv namespace create OAUTH_KV
2. Incorporate the generated KV namespace ID into your wrangler.jsonc configuration file.
3. Execute the deployment command: npm run deploy

Accessing the Deployed Edge Service Remotely

Once the deployment is complete and you have the public workers.dev URL (e.g., worker-name.account-name.workers.dev/sse), reconnect your inspector:

Execute the inspector client: npx @modelcontextprotocol/inspector@latest

Input the full, public Worker URL ending in /sse as the server endpoint and connect. You have now successfully linked a remote client to your globally distributed MCP service.

Configuring Claude Desktop for the Remote Endpoint

Update your Claude Desktop configuration file to point towards the public workers.dev URL (e.g., worker-name.account-name.workers.dev/sse) and relaunch the application:

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

Troubleshooting Connection Issues

If connectivity problems arise, try terminating and restarting Claude Desktop. Alternatively, test the connection in isolation from the command line using the mcp-remote utility pointed directly at your server:

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

In rare scenarios involving authentication state corruption, forcefully removing cached authorization files may resolve issues:

rm -rf ~/.mcp-auth