Remote MCP Server on Cloudflare

Un servidor MCP remoto desplegable en Cloudflare Workers con soporte de inicio de sesión OAuth.

Documentación

Remote MCP Server en Cloudflare

¡Pongamos en marcha un servidor MCP remoto en Cloudflare Workers con inicio de sesión OAuth!

Desarrollar localmente

# clone the repository
git clone https://github.com/cloudflare/ai.git
# Or if using ssh:
# git clone git@github.com:cloudflare/ai.git

# install dependencies
cd ai
# Note: using pnpm instead of just "npm"
pnpm install

# run locally
npx nx dev remote-mcp-server

Deberías poder abrir http://localhost:8787/ en tu navegador

Conectar el inspector MCP a tu servidor

Para explorar tu nueva API MCP, puedes usar el Inspector MCP.

  • Inícialo con npx @modelcontextprotocol/inspector
  • Dentro del inspector, cambia el Tipo de Transporte a SSE e ingresa http://localhost:8787/sse como la URL del servidor MCP al que conectarte, y haz clic en "Conectar"
  • Serás redirigido a una pantalla de inicio de sesión (simulada) de usuario/contraseña. Ingresa cualquier correo y contraseña para iniciar sesión.
  • Deberías ser redirigido de vuelta al Inspector MCP y ahora puedes listar y llamar cualquier herramienta definida.
MCP Inspector with the above config
MCP Inspector with after a tool call

Conectar Claude Desktop a tu servidor MCP local

El inspector MCP es excelente, ¡pero realmente queremos conectar esto a Claude! Sigue la Guía de inicio rápido de Anthropic y dentro de Claude Desktop ve a Configuración > Desarrollador > Editar Configuración para encontrar tu archivo de configuración.

Abre el archivo en tu editor de texto y reemplázalo con esta configuración:

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

Esto ejecutará un proxy local y permitirá que Claude hable con tu servidor MCP a través de HTTP

Cuando abras Claude, se debería abrir una ventana del navegador que te permita iniciar sesión. Deberías ver las herramientas disponibles en la esquina inferior derecha. Con el mensaje adecuado, Claude debería pedir llamar a la herramienta.

Clicking on the hammer icon shows a list of available tools
Claude answers the prompt 'I seem to have lost my calculator and have run out of fingers. Could you use the math tool to add 23 and 19?' by invoking the MCP add tool

Desplegar en Cloudflare

  1. npx wrangler kv namespace create OAUTH_KV
  2. Sigue las indicaciones para agregar el ID del namespace kv a wrangler.jsonc
  3. npm run deploy

Llamar a tu servidor MCP remoto recién desplegado desde un cliente MCP remoto

Igual que hiciste arriba en "Desarrollar localmente", ejecuta el inspector MCP:

npx @modelcontextprotocol/inspector@latest

Luego ingresa la URL workers.dev (ej: worker-name.account-name.workers.dev/sse) de tu Worker en el inspector como la URL del servidor MCP al que conectarte, y haz clic en "Conectar".

Ahora te has conectado a tu servidor MCP desde un cliente MCP remoto.

Conectar Claude Desktop a tu servidor MCP remoto

Actualiza el archivo de configuración de Claude para que apunte a tu URL workers.dev (ej: worker-name.account-name.workers.dev/sse) y reinicia Claude

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

Depuración

Si algo sale mal, puede ser útil reiniciar Claude, o intentar conectarte directamente a tu servidor MCP desde la línea de comandos con el siguiente comando.

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

En algunos casos raros, puede ayudar limpiar los archivos agregados a ~/.mcp-auth

rm -rf ~/.mcp-auth