Remote MCP Server on Cloudflare

Implementa un servidor MCP remoto en Cloudflare Workers con soporte de inicio de sesión OAuth, utilizando Cloudflare KV para el almacenamiento de datos.

GitHubPrueba este MCPPatrocinado

Documentación

Remote MCP Server on 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 introduce 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. Introduce cualquier correo electrónico y contraseña para iniciar sesión.
  • Deberías ser redirigido de vuelta al Inspector MCP y ahora puedes listar y llamar a 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 genial, 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 abrirá una ventana del navegador que te permitirá iniciar sesión. Deberías ver las herramientas disponibles en la parte 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 instrucciones para añadir el ID del espacio de nombres 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 antes en "Desarrollar localmente", ejecuta el inspector MCP:

npx @modelcontextprotocol/inspector@latest

Luego introduce 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 conectarse 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 añadidos a ~/.mcp-auth

rm -rf ~/.mcp-auth