Remote MCP Server On Cloudflare Q3y

🚀 Running a Remote MCP Server on Cloudflare

Let's set up a remote MCP server running on Cloudflare Workers and integrate OAuth login functionality!

🚀 Quick Start

📦 Installation

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

# Install dependencies
cd ai
npm install

# Start the local service
npx nx dev remote-mcp-server

You should be able to open http://localhost:8787/ in your browser to view the server.

💻 Usage Examples

Connecting the MCP Inspector to Your Server

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

• Start it using the following command: npx @modelcontextprotocol/inspector
• In the inspector, switch the transport type to SSE, enter http://localhost:8787/sse in the URL to connect to your MCP server, and then click "Connect".
• You will be redirected to a (simulated) user password login page. Enter any email and password to log in.
• After successful login, you will return to the MCP Inspector and be able to list and call any defined tools!

Connecting Claude Desktop to the Local MCP Server

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

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

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

This will run a local proxy, enabling Claude to communicate with your MCP server via HTTP.

When you open Claude, a browser window should open, allowing you to log in. You should see the available tools in the bottom - right corner.

🚀 Deployment to Cloudflare

1. Register and Set Up Upstash:
   • Go to Upstash to register a free account.
   • Create a new Postgres database and obtain the connection string (in the format postgres://user:password@host:port/database).
2. Update the Configuration File:
   • In the root directory of the project, create or edit the .env file and add the following content:

     UPSTASH_URL=your_upstash_host
     UPSTASH_USER=username
     UPSTASH_PASSWORD=password
     

   • Replace your_upstash_host, username, and password with your actual Upstash credentials.
3. Deploy to Cloudflare Pages:
   • Initialize your project repository as a Git repository (if not already done).
   • Create a package.json file with the following content:

     {
       "name": "mcp-server",
       "version": "1.0.0",
       "scripts": {
         "dev": "npx nx dev remote-mcp-server",
         "build": "npx nx build --configuration production"
       },
       "dependencies": {
         "@nx/webpack": "^14.0.0",
         "express": "^4.18.2",
         "pg": "^8.11.3",
         "typescript": "^5.3.2",
         "@types/node": "^20.11.0"
       }
     }
     

   • Create a tsconfig.json file in the root directory of the project with the following content:

     {
       "compilerOptions": {
         "target": "ES6",
         "module": "CommonJS",
         "outDir": "./dist",
         "rootDir": ".",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true
       }
     }
     

   • Next, create a pages.json file to configure Cloudflare Pages:

     {
       "type": "static",
       "build": {
         "command": "npm run build",
         "directory": "./dist"
       },
       "routes": [
         "* => $latest"
       ]
     }
     

   • Now, you can push your project to GitHub or GitLab and connect it to Cloudflare Pages for deployment.

🔧 Debugging

If you encounter issues, please refer to the following steps:

1. Check the build logs of Cloudflare Pages to ensure that all dependencies are installed correctly and there are no errors.
2. Verify that the Upstash credentials are correctly configured in the .env file and there are no spelling mistakes.
3. Make sure the MCP server runs correctly locally before attempting to deploy it to the production environment.

By following the above steps, you have successfully set up a fully - functional remote MCP server that can seamlessly integrate with Claude Desktop and the MCP Inspector.