Remote-MCP-Server auf Cloudflare

Lassen Sie uns einen Remote-MCP-Server auf Cloudflare Workers zum Laufen bringen, komplett mit OAuth-Anmeldung!

Lokal entwickeln

# 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

Sie sollten http://localhost:8787/ in Ihrem Browser öffnen können.

Verbinden Sie den MCP-Inspektor mit Ihrem Server

Um Ihre neue MCP-API zu erkunden, können Sie den MCP Inspector verwenden.

Starten Sie es mit npx @modelcontextprotocol/inspector
Ändern Sie im Inspektor den Transporttyp in SSE und geben Sie http://localhost:8787/sse als URL des MCP-Servers ein, mit dem eine Verbindung hergestellt werden soll. Klicken Sie anschließend auf „Verbinden“.
Sie gelangen zu einem (simulierten) Anmeldebildschirm mit Benutzername und Passwort. Geben Sie zur Anmeldung eine beliebige E-Mail-Adresse und Ihr Passwort ein.
Sie sollten zurück zum MCP-Inspektor umgeleitet werden und können nun alle definierten Tools auflisten und aufrufen!

Verbinden Sie Claude Desktop mit Ihrem lokalen MCP-Server

Der MCP-Inspektor ist großartig, aber wir möchten ihn unbedingt mit Claude verbinden! Folgen Sie der Schnellstartanleitung von Anthropic und gehen Sie in Claude Desktop zu Einstellungen > Entwickler > Konfiguration bearbeiten, um Ihre Konfigurationsdatei zu finden.

Öffnen Sie die Datei in Ihrem Texteditor und ersetzen Sie sie durch diese Konfiguration:

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

Dadurch wird ein lokaler Proxy ausgeführt und Claude kann über HTTP mit Ihrem MCP-Server kommunizieren

Wenn Sie Claude öffnen, sollte sich ein Browserfenster öffnen, in dem Sie sich anmelden können. Unten rechts sollten Sie die verfügbaren Tools sehen. Bei entsprechender Eingabeaufforderung sollte Claude den Aufruf des Tools anfordern.

Bereitstellung auf Cloudflare

npx wrangler kv namespace create OAUTH_KV
Befolgen Sie die Anleitung, um die KV-Namespace-ID zu wrangler.jsonc hinzuzufügen
npm run deploy

Rufen Sie Ihren neu bereitgestellten Remote-MCP-Server von einem Remote-MCP-Client aus auf

Führen Sie den MCP-Inspektor aus, genau wie Sie es oben unter „Lokal entwickeln“ getan haben:

npx @modelcontextprotocol/inspector@latest

Geben Sie dann die workers.dev -URL (z. B. worker-name.account-name.workers.dev/sse ) Ihres Workers im Inspector als URL des MCP-Servers ein, mit dem eine Verbindung hergestellt werden soll, und klicken Sie auf „Verbinden“.

Sie haben jetzt von einem Remote-MCP-Client aus eine Verbindung zu Ihrem MCP-Server hergestellt.

Verbinden Sie Claude Desktop mit Ihrem Remote-MCP-Server

Aktualisieren Sie die Claude-Konfigurationsdatei, sodass sie auf Ihre workers.dev -URL verweist (z. B. worker-name.account-name.workers.dev/sse ), und starten Sie Claude neu.

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

Debuggen

Sollte etwas schiefgehen, kann es hilfreich sein, Claude neu zu starten oder zu versuchen, mit dem folgenden Befehl über die Befehlszeile eine direkte Verbindung zu Ihrem MCP-Server herzustellen.

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

In einigen seltenen Fällen kann es hilfreich sein, die zu ~/.mcp-auth hinzugefügten Dateien zu löschen

rm -rf ~/.mcp-auth

Remote MCP Server on Cloudflare

Integrations