Remote-MCP-Server

Erste Schritte mit Remote-MCP-Servern mithilfe von Azure Functions (Node.js/TypeScript)

Dies ist eine Schnellstartvorlage zum einfachen Erstellen und Bereitstellen eines benutzerdefinierten Remote-MCP-Servers in der Cloud mithilfe von Azure-Funktionen. Sie können den Server auf Ihrem lokalen Rechner klonen, wiederherstellen und mit Debugging ausführen. azd up können Sie ihn in wenigen Minuten in der Cloud installieren. Der MCP-Server ist standardmäßig durch Schlüssel und HTTPs geschützt und bietet zusätzliche Optionen für OAuth mit EasyAuth und/oder API Management sowie Netzwerkisolation mit VNET.

Sehen Sie sich die Videoübersicht an

Wenn Sie dieses Beispiel in weiteren Sprachen suchen, sehen Sie sich die Versionen .NET/C# und Python an.

Unten sehen Sie das Architekturdiagramm für den Remote-MCP-Server mit Azure-Funktionen:

Architekturdiagramm

Voraussetzungen

Node.js Version 18 oder höher
Azure Functions Core Tools >= 4.0.7030
Azure-Entwickler-CLI
So verwenden Sie Visual Studio Code zum lokalen Ausführen und Debuggen:
- Visual Studio Code
- Azure Functions-Erweiterung
Docker zum Ausführen von Azurite, dem Azure Storage Emulator (optional)

Bereiten Sie Ihre lokale Umgebung vor

Für dieses spezielle Beispiel wird ein Azure Storage Emulator benötigt, da wir Ausschnitte aus dem Blob-Speicher speichern und abrufen werden.

Starten Sie Azurit
docker run -p 10000:10000 -p 10001:10001 -p 10002:10002 \ mcr.microsoft.com/azure-storage/azurite

Beachten Sie: Wenn Sie Azurite aus der VS Code-Erweiterung verwenden, müssen Sie Azurite: Start , sonst werden Fehler angezeigt.

Führen Sie Ihren MCP-Server lokal vom Terminal aus aus

Abhängigkeiten installieren
npm install
Erstellen des Projekts
npm run build
Starten Sie den Functions-Host lokal:
func start

Beachten Sie , dass standardmäßig die Webhook-Route verwendet wird: /runtime/webhooks/mcp/sse . Später verwenden wir diese in Azure, um den Schlüssel für Client-/Host-Aufrufe festzulegen: /runtime/webhooks/mcp/sse?code=<system_key>

Verwenden Sie den lokalen MCP-Server innerhalb eines Clients/Hosts

VS Code – Copilot-Bearbeitungen

Fügen Sie den MCP-Server aus der Befehlspalette hinzu und fügen Sie die URL zum SSE-Endpunkt Ihrer laufenden Funktions-App hinzu:
http://0.0.0.0:7071/runtime/webhooks/mcp/sse
Wählen Sie HTTP (Server-Sent-Events) als Typ des hinzuzufügenden MCP-Servers aus.
Geben Sie die URL zum SSE-Endpunkt Ihrer laufenden Funktions-App ein.
Geben Sie die Server-ID ein. (Dies kann ein beliebiger Name sein.)
Wählen Sie, ob Sie dies in Ihren Benutzereinstellungen (für alle Apps für Sie verfügbar) oder in Ihren Arbeitsbereichseinstellungen (nur für diese App verfügbar) ausführen möchten.
Listen Sie MCP-Server aus der Befehlspalette auf und starten Sie den Server. Im vorherigen Schritt wurde Ihr lokaler Server möglicherweise bereits gestartet. In diesem Fall können Sie diesen Schritt überspringen.
Geben Sie im Copilot-Chat-Agentenmodus eine Eingabeaufforderung ein, um das Tool auszulösen, z. B. wählen Sie einen Code aus und geben Sie diese Eingabeaufforderung ein
Say Hello
Save this snippet as snippet1
Retrieve snippet1 and apply to newFile.ts
Wenn Sie aufgefordert werden, das Tool auszuführen, stimmen Sie zu, indem Sie auf „Weiter“ klicken.
Wenn Sie fertig sind, drücken Sie Strg+C im Terminalfenster, um den Hostprozess func.exe zu stoppen, und listen Sie MCP-Server aus der Befehlspalette auf und stoppen Sie den lokalen Server.

MCP-Inspektor

Installieren und starten Sie MCP Inspector in einem neuen Terminalfenster .
npx @modelcontextprotocol/inspector node build/index.js
Wenn Sie Ihre Funktions-App zuvor gestoppt haben, starten Sie den Functions-Host lokal:
func start
Klicken Sie mit gedrückter STRG-Taste, um die MCP Inspector-Web-App von der von der App angezeigten URL zu laden (z. B. http://0.0.0.0:5173/#resources ).
Stellen Sie den Transporttyp auf SSE ein
Legen Sie die URL zum SSE-Endpunkt Ihrer laufenden Funktions-App fest und stellen Sie eine Verbindung her :
http://0.0.0.0:7071/runtime/webhooks/mcp/sse
Tools auflisten . Klicken Sie auf ein Tool und dann auf Tool ausführen .
Wenn Sie fertig sind, drücken Sie Strg+C im Terminalfenster, um den Hostprozess func.exe zu stoppen, und drücken Sie Strg+C im Terminalfenster, um den Hostprozess @modelcontextprotocol/inspector zu stoppen.

Bereitstellen in Azure für Remote-MCP

Optional können Sie sich für ein im Beispiel verwendetes VNet entscheiden. (Wenn Sie diese Option wählen, tun Sie dies vor azd up .)

azd env set VNET_ENABLED true

Führen Sie diesen Azd -Befehl aus, um die Funktions-App mit allen erforderlichen Azure-Ressourcen zu versehen und Ihren Code bereitzustellen:

azd up

Beachten Sie, dass API Management zur Verbesserung der Sicherheit und Richtlinien für Ihren MCP-Server verwendet werden kann unddass die integrierte Authentifizierung des App-Dienstes zum Einrichten Ihres bevorzugten OAuth-Anbieters, einschließlich Entra, verwendet werden kann.

Stellen Sie von einem Client aus eine Verbindung mit Ihrer Remote -MCP-Server-Funktions-App her

Ihr Client benötigt einen Schlüssel, um den neuen gehosteten SSE-Endpunkt aufzurufen. Dieser hat das Format https://<funcappname>.azurewebsites.net/runtime/webhooks/mcp/sse . Die gehostete Funktion erfordert standardmäßig einen Systemschlüssel, der über das Portal oder die CLI abgerufen werden kann ( az functionapp keys list --resource-group <resource_group> --name <function_app_name> ). Rufen Sie den Systemschlüssel mit dem Namen mcp_extension ab.

Stellen Sie im MCP Inspector eine Verbindung zum Remote-MCP-Server her

Für MCP Inspector können Sie den Schlüssel in die URL aufnehmen:

https://<funcappname>.azurewebsites.net/runtime/webhooks/mcp/sse?code=<your-mcp-extension-system-key>

Verbindung zum Remote-MCP-Server in VS Code herstellen – GitHub Copilot

Für GitHub Copilot in VS Code sollten Sie den Schlüssel als Header x-functions-key in mcp.json festlegen und https://<funcappname>.azurewebsites.net/runtime/webhooks/mcp/sse als URL verwenden. Das folgende Beispiel stammt aus der Datei mcp.json in diesem Repository und fordert Sie beim Starten des Servers in VS Code zur Eingabe des Schlüssels auf. Ihre mcp.json Datei sieht folgendermaßen aus:

{
    "inputs": [
        {
            "type": "promptString",
            "id": "functions-mcp-extension-system-key",
            "description": "Azure Functions MCP Extension System Key",
            "password": true
        },
        {
            "type": "promptString",
            "id": "functionapp-name",
            "description": "Azure Functions App Name"
        }
    ],
    "servers": {
        "remote-mcp-function": {
            "type": "sse",
            "url": "https://${input:functionapp-name}.azurewebsites.net/runtime/webhooks/mcp/sse",
            "headers": {
                "x-functions-key": "${input:functions-mcp-extension-system-key}"
            }
        },
        "local-mcp-function": {
            "type": "sse",
            "url": "http://0.0.0.0:7071/runtime/webhooks/mcp/sse"
        }
    }
}

Klicken Sie auf dem Server remote-mcp-function in der Datei mcp.json auf „Start“:
Geben Sie den Namen der Funktions-App ein, die Sie im Azure-Portal erstellt haben, wenn Sie von VS Code dazu aufgefordert werden.
Geben Sie den Azure Functions MCP Extension System Key in die Eingabeaufforderung ein. Sie können diesen aus dem Azure-Portal für Ihre Funktions-App kopieren, indem Sie zum Menüpunkt „Funktionen“ und dann zu „App-Schlüssel“ navigieren und den Schlüssel „ mcp_extension “ aus den Systemschlüsseln kopieren.
Geben Sie im Copilot-Chat-Agentenmodus eine Eingabeaufforderung ein, um das Tool auszulösen, z. B. wählen Sie einen Code aus und geben Sie diese Eingabeaufforderung ein
Say Hello
Save this snippet as snippet1
Retrieve snippet1 and apply to newFile.ts

Stellen Sie Ihren Code erneut bereit

Sie können den Befehl azd up so oft ausführen, wie Sie möchten, um sowohl Ihre Azure-Ressourcen bereitzustellen als auch Codeaktualisierungen für Ihre Funktions-App bereitzustellen.

[!NOTE] Bereitgestellte Codedateien werden immer durch das neueste Bereitstellungspaket überschrieben.

Bereinigen von Ressourcen

Wenn Sie mit der Arbeit an Ihrer Funktions-App und den zugehörigen Ressourcen fertig sind, können Sie diesen Befehl verwenden, um die Funktions-App und die zugehörigen Ressourcen aus Azure zu löschen und so weitere Kosten zu vermeiden:

azd down

Quellcode

Der Funktionscode für die Endpunkte getSnippet und saveSnippet ist in den TypeScript-Dateien im Verzeichnis src definiert. Die MCP-Funktionsannotationen stellen diese Funktionen als MCP-Servertools bereit.

Dies zeigt den Code für einige MCP-Serverbeispiele (Zeichenfolge abrufen, Objekt abrufen, Objekt speichern):

// Hello function - responds with hello message
export async function mcpToolHello(context: InvocationContext): Promise<string> {
    return "Hello I am MCP Tool!";
}

// Register the hello tool
app.mcpTool('hello', {
    toolName: 'hello',
    description: 'Simple hello world MCP Tool that responses with a hello message.',
    handler: mcpToolHello
});

// GetSnippet function - retrieves a snippet by name
export async function getSnippet(_message: unknown, context: InvocationContext): Promise<string> {
    console.info('Getting snippet');
    
    // Get snippet name from the tool arguments
    const mcptoolargs = context.triggerMetadata.mcptoolargs as { snippetname?: string };
    const snippetName = mcptoolargs?.snippetname;

    console.info(`Snippet name: ${snippetName}`);
    
    if (!snippetName) {
        return "No snippet name provided";
    }
    
    // Get the content from blob binding - properly retrieving from extraInputs
    const snippetContent = context.extraInputs.get(blobInputBinding);
    
    if (!snippetContent) {
        return `Snippet '${snippetName}' not found`;
    }
    
    console.info(`Retrieved snippet: ${snippetName}`);
    return snippetContent as string;
}


// Register the GetSnippet tool
app.mcpTool('getsnippet', {
    toolName: GET_SNIPPET_TOOL_NAME,
    description: GET_SNIPPET_TOOL_DESCRIPTION,
    toolProperties: [
        {
            propertyName: SNIPPET_NAME_PROPERTY_NAME,
            propertyValue: PROPERTY_TYPE,
            description: SNIPPET_NAME_PROPERTY_DESCRIPTION,
        }
    ],
    extraInputs: [blobInputBinding],
    handler: getSnippet
});

// SaveSnippet function - saves a snippet with a name
export async function saveSnippet(_message: unknown, context: InvocationContext): Promise<string> {
    console.info('Saving snippet');
    
    // Get snippet name and content from the tool arguments
    const mcptoolargs = context.triggerMetadata.mcptoolargs as { 
        snippetname?: string;
        snippet?: string;
    };
    
    const snippetName = mcptoolargs?.snippetname;
    const snippet = mcptoolargs?.snippet;
    
    if (!snippetName) {
        return "No snippet name provided";
    }
    
    if (!snippet) {
        return "No snippet content provided";
    }
    
    // Save the snippet to blob storage using the output binding
    context.extraOutputs.set(blobOutputBinding, snippet);
    
    console.info(`Saved snippet: ${snippetName}`);
    return snippet;
}

// Register the SaveSnippet tool
app.mcpTool('savesnippet', {
    toolName: SAVE_SNIPPET_TOOL_NAME,
    description: SAVE_SNIPPET_TOOL_DESCRIPTION,
    toolProperties: [
        {
            propertyName: SNIPPET_NAME_PROPERTY_NAME,
            propertyValue: PROPERTY_TYPE,
            description: SNIPPET_NAME_PROPERTY_DESCRIPTION,
        },
        {
            propertyName: SNIPPET_PROPERTY_NAME,
            propertyValue: PROPERTY_TYPE,
            description: SNIPPET_PROPERTY_DESCRIPTION,
        }
    ],
    extraOutputs: [blobOutputBinding],
    handler: saveSnippet
});

Beachten Sie, dass die Datei host.json auch einen Verweis auf das experimentelle Paket enthält, das für Apps erforderlich ist, die diese Funktion verwenden:

"extensionBundle": {
  "id": "Microsoft.Azure.Functions.ExtensionBundle.Experimental",
  "version": "[4.*, 5.0.0)"
}

Nächste Schritte

Fügen Sie Ihrem MCP-Server API Management hinzu (Authentifizierung, Gateway, Richtlinien, mehr!)
Fügen Sie Ihrem MCP-Servereine integrierte Authentifizierung hinzu
Aktivieren Sie VNET mit dem Flag VNET_ENABLED=true
Erfahren Sie mehr über verwandte MCP-Bemühungen von Microsoft

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Ein cloudbasierter benutzerdefinierter MCP-Server mit Azure Functions, der das Speichern und Abrufen von Codeausschnitten mit sicherer Kommunikation über Schlüssel, HTTPS, OAuth und Netzwerkisolationsoptionen ermöglicht.

Related MCP Servers

Code Snippet Server
ngeojiajun
A
security
A
license
A
quality
A MCP server for managing and storing code snippets in various programming languages, allowing users to create, list, and delete snippets via a standardized interface.
Last updated -
3
4
JavaScript
MIT License
Code Sandbox MCP
Automata-Labs-team
-
security
A
license
-
quality
An MCP server to create secure code sandbox environment for executing code within Docker containers.
Last updated -
69
Go
MIT License
ServeMyAPI
Jktfe
-
security
F
license
-
quality
A personal MCP server for securely storing and accessing API keys across projects using the macOS Keychain, letting AI assistants and applications retrieve credentials through natural language.
Last updated -
10
TypeScript
Azure MCP Server
idofrizler
-
security
A
license
-
quality
An MCP server for interacting with Azure. Contains some common Compute and Networking actions, and extensible to add many more.
Last updated -
Python
Apache 2.0

View all related MCP servers

Remote MCP Server

Erste Schritte mit Remote-MCP-Servern mithilfe von Azure Functions (Node.js/TypeScript)

Voraussetzungen

Bereiten Sie Ihre lokale Umgebung vor

Führen Sie Ihren MCP-Server lokal vom Terminal aus aus

Verwenden Sie den lokalen MCP-Server innerhalb eines Clients/Hosts

VS Code – Copilot-Bearbeitungen

MCP-Inspektor

Bereitstellen in Azure für Remote-MCP

Stellen Sie von einem Client aus eine Verbindung mit Ihrer Remote -MCP-Server-Funktions-App her

Stellen Sie im MCP Inspector eine Verbindung zum Remote-MCP-Server her

Verbindung zum Remote-MCP-Server in VS Code herstellen – GitHub Copilot

Stellen Sie Ihren Code erneut bereit

Bereinigen von Ressourcen

Quellcode

Nächste Schritte

Related MCP Servers

Code Snippet Server

Code Sandbox MCP

ServeMyAPI

Azure MCP Server

Appeared in Searches

New MCP Servers

MCP directory API