Blog

MCP Server erstellen, deployen und hosten auf Netlify

Ashley Goolam

Ashley Goolam

15 July 2025

MCP Server erstellen, deployen und hosten auf Netlify

Sind Sie bereit, Ihre KI-Workflows mit dem MCP-Server auf Netlify zu optimieren? Stellen Sie sich vor, Sie geben Ihren KI-Agenten – wie Claude, Cursor oder VS Code Copilot – eine direkte Verbindung zu den Tools und Daten Ihrer Plattform, alles gehostet auf Netlify’s schlanker serverloser Infrastruktur. In diesem unterhaltsamen, lockeren Leitfaden gehen wir Schritt für Schritt durch, was der MCP-Server auf Netlify ist, warum er großartig ist und wie man ihn erstellt, bereitstellt und hostet. Außerdem testen wir ihn mit einem coolen Beispiel, um sicherzustellen, dass er funktioniert. Tauchen wir ein und machen Sie Ihre KI smarter!

💡
Möchten Sie ein großartiges API-Test-Tool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform, damit Ihr Entwicklerteam mit maximaler Produktivität zusammenarbeiten kann?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
Schaltfläche

Was ist ein MCP-Server und warum Netlify?

Das Model Context Protocol (MCP) ist wie ein universeller Adapter für KI-Agenten. Es ist ein offener, leichtgewichtiger Standard, der es KI-Clients (zum Beispiel Claude Desktop oder Cursor) ermöglicht, mit Servern zu kommunizieren, die Tools, Daten und Prompts bereitstellen. Das bedeutet, dass Ihre KI in Echtzeit mit den Funktionen Ihrer App interagieren kann, wodurch sie kontextbezogen und wesentlich nützlicher wird.

Ihren MCP-Server auf Netlify zu hosten, ist ein Kinderspiel. Netlify’s serverlose Plattform ist skalierbar, wartungsarm und perfekt für die Bereitstellung von MCP-Servern geeignet. Sie übernimmt die Schwerstarbeit – Verkehrsspitzen, Updates und Sicherheit –, sodass Sie sich auf den Aufbau cooler KI-Integrationen konzentrieren können. Egal, ob Sie KI zu einem Blog, einer E-Commerce-Website oder einer benutzerdefinierten App hinzufügen, der MCP-Server auf Netlify macht es nahtlos.

offizielle Netlify-Website

Warum Sie das Hosting von MCP-Servern auf Netlify lieben werden

Hier ist, warum der MCP-Server auf Netlify ein Wendepunkt ist:

Bereit, Ihre KI zum Leben zu erwecken? Richten wir Ihren MCP-Server auf Netlify ein!

auf Netlify bereitstellen

MCP-Server auf Netlify erstellen, bereitstellen und hosten

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes haben:

Schritt 1: Ihr Netlify-Projekt einrichten

Projektstruktur einrichten:

Beispielstruktur:

/mcp-netlify
  /netlify
    /functions
      mcp.js

Eine Netlify-Site erstellen:

Schritt 2: Die MCP-Serverfunktion implementieren

Erstellen Sie die Datei mcp.js in /netlify/functions, um Ihren MCP-Server auf Netlify zu definieren. Dies verwendet das MCP SDK, um Tools, Ressourcen und Prompts für KI-Clients bereitzustellen.

Hier ist ein Beispiel für mcp.js:

import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { toFetchResponse, toReqRes } from "fetch-to-node";
import { z } from "zod";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import {
  CallToolResult,
  ReadResourceResult,
  JSONRPCError
} from "@modelcontextprotocol/sdk/types.js";

// Netlify serverless function handler which handles all inbound requests
export default async (req: Request) => {

  try {

    // for stateless MCP, we'll only use the POST requests that are sent
    // with event information for the init phase and resource/tool requests
    if (req.method === "POST") {

      // Convert the Request object into a Node.js Request object
      const { req: nodeReq, res: nodeRes } = toReqRes(req);
      const server = getServer();

      const transport = new StreamableHTTPServerTransport({
        sessionIdGenerator: undefined,
      });

      await server.connect(transport);

      const body = await req.json();
      await transport.handleRequest(nodeReq, nodeRes, body);

      nodeRes.on("close", () => {
        console.log("Request closed");
        transport.close();
        server.close();
      });

      return toFetchResponse(nodeRes);

    }

    return new Response("Method not allowed", { status: 405 });

  } catch (error) {

    console.error("MCP error:", error);
    return new Response(
      JSON.stringify({
        jsonrpc: "2.0",
        error: {
          code: -32603,
          message: "Internal server error",
        },
        id: '',
      } satisfies JSONRPCError),
      {
        status: 500,
        headers: { "Content-Type": "application/json" }
      }
    );
  }
};

function getServer(): McpServer {

  // initialize our MCP Server instance that we will
  // attach all of our functionality and data.
  const server = new McpServer(
    {
      name: "acme-devtool-server",
      version: "1.0.0",
    },
    { capabilities: { logging: {} } }
  );


  server.tool(
    "run-analysis-report",
    "Checks the data available in Acme Devtool and returns all of the important data regarding the latest numbers.",
    {
      days: z.number().describe("Number of days to analyze").default(7),
    },
    async (
      { days },
    ): Promise<CallToolResult> => {

      const random = Math.random() * 100;

      return {
        content: [
          {
            type: "text",
            text: JSON.stringify({
              lastNDays: days,
              data: Array.from({ length: days }, (_, i) => `Day ${i + 1} had ${random * days} growth.`),
            }),
          },
        ],
      };
    }
  );

  // providing a resource for agents that might need to take a given report
  // and parse the information in it
  server.resource(
    "interpreting-reports",
    "acme://interpreting-reports",
    { mimeType: "text/plain" },
    async (): Promise<ReadResourceResult> => {
      return {
        contents: [
          {
            uri: "acme://interpreting-reports",
            text: `Reports from Acme will include an array of text that informs the growth of over that number of days. It's unstructured text but is consistent so parsing the information can be based on looking at a single line to understand where the data is.`,
          },
        ],
      };
    }
  );

  return server;
};

// Ensure this function responds to the <domain>/mcp path
// This can be any path you want but you'll need to ensure the
// mcp server config you use/share matches this path.
export const config = {
  path: "/mcp"
};

Dies erstellt einen serverlosen MCP-Endpunkt unter /.netlify/functions/mcp. Passen Sie tools, resources und prompts an die Anforderungen Ihrer App an (z.B. API-Aufrufe, Datenbankabfragen).

Schritt 3: Abhängigkeiten installieren

Initialisieren Sie in Ihrem Projektordner ein Node.js-Projekt und installieren Sie das MCP SDK:

npm init -y
npm install @modelcontextprotocol/sdk

Schritt 4: Lokale Entwicklung und Tests

  1. Netlify CLI installieren:
npm install -g netlify-cli

2. Lokal ausführen:

netlify dev

Dies startet einen lokalen Server unter http://localhost:8888. Ihr MCP-Server auf Netlify wird verfügbar sein unter:

http://localhost:8888/.netlify/functions/mcp

3. Mit MCP Inspector testen:

Verwenden Sie den MCP Inspector, um Ihren Server zu überprüfen:

npx @modelcontextprotocol/inspector npx mcp-remote@next http://localhost:8888/mcp

Öffnen Sie http://localhost:6274 in Ihrem Browser, um die Tools und Ressourcen Ihres Servers interaktiv zu erkunden.

mit MCP Inspector testen

Schritt 5: Ihren MCP-Server auf Netlify bereitstellen

Sie haben zwei Bereitstellungsoptionen:

Option 1: Git-basierte Bereitstellung

  1. Pushen Sie Ihr Projekt in ein GitHub-, GitLab- oder Bitbucket-Repository.
  2. Verknüpfen Sie in Netlify das Repository mit Ihrer Site unter Site configuration > Build & deploy.
  3. Netlify stellt bei jedem Push auf Ihren Hauptzweig automatisch bereit.
Netlify in GitHub-Repo installieren

Option 2: CLI-Bereitstellung

Stellen Sie direkt mit der Netlify CLI bereit:

netlify deploy

Für die Produktion:

netlify deploy --prod

Nach der Bereitstellung ist Ihr MCP-Server auf Netlify live unter:

https://your-site-name.netlify.app/.netlify/functions/mcp

Beachten Sie die URL für den nächsten Schritt.

Schritt 6: MCP-Clients mit Ihrem Netlify MCP-Server verbinden

Konfigurieren Sie Ihren KI-Client (Claude Desktop, Cursor, Windsurf oder VS Code Copilot), um sich mit Ihrem bereitgestellten MCP-Server auf Netlify zu verbinden. Verwenden Sie eine dieser Konfigurationen:

Für lokale Tests

{
  "mcpServers": {
    "my-netlify-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote@next",
        "http://localhost:8888/mcp"
      ]
    }
  }
}

Für bereitgestellten Server

{
  "mcpServers": {
    "my-netlify-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote@next",
        "https://your-site-name.netlify.app/mcp"
      ]
    }
  }
}

Ersetzen Sie your-site-name.netlify.app durch die tatsächliche URL Ihrer Netlify-Site.

Client-Konfiguration

Claude Desktop:

  1. Gehen Sie zu Einstellungen > Entwickler > Konfiguration bearbeiten.
  2. Öffnen Sie claude_desktop_config.json, fügen Sie die Konfiguration ein und speichern Sie.
  3. Starten Sie Claude Desktop neu.
Claude MCP-Konfiguration bearbeiten

Cursor:

  1. Gehen Sie zu Einstellungen > Tools und Integrationen > Benutzerdefinierten MCP-Server hinzufügen.
  2. Fügen Sie die Konfiguration ein und speichern Sie.
  3. Wechseln Sie im Chat-Panel zum Agentenmodus.
Cursor MCP-Konfiguration bearbeiten

VS Code Copilot:

  1. Öffnen Sie die Einstellungen (Strg+, oder Cmd+,).
  2. Suchen Sie nach „MCP“ und aktivieren Sie es unter Funktionen > Chat.
  3. Klicken Sie auf In settings.json bearbeiten, fügen Sie die Konfiguration ein und speichern Sie.
VS Code MCP-Konfiguration bearbeiten

Schritt 7: Ihren MCP-Server testen

Testen wir Ihren MCP-Server auf Netlify mit einem Beispiel-Prompt in Ihrem MCP-Client:

Können Sie mit dem MCP-Server auf Netlify einen Bericht für die letzten 3 Tage erstellen?

Wenn Sie das obige Beispiel mcp.js verwendet haben, sollte die KI mit etwas Ähnlichem antworten:

den Remote-MCP-Server testen

Dies bestätigt, dass Ihr Server funktioniert. Passen Sie Ihre mcp.js an, um echte Tools (z.B. API-Integrationen, Datenbankabfragen) für komplexere Aufgaben hinzuzufügen.

Schritt 8: Überprüfen und Debuggen

npx @modelcontextprotocol/inspector npx mcp-remote@next https://your-site-name.netlify.app/mcp

Best Practices für MCP-Server auf Netlify

Tipps zur Fehlerbehebung

Warum MCP-Server auf Netlify hosten?

Der MCP-Server auf Netlify passt perfekt zu KI-gesteuerten Workflows. Netlify’s serverlose Plattform skaliert mühelos, sodass Ihr MCP-Server Tausende von KI-Anfragen ohne Abstürze verarbeiten kann. Darüber hinaus machen die Git-basierte Bereitstellung und die CLI Updates zum Kinderspiel. Egal, ob Sie einen Chatbot, ein Content-Management-Tool oder eine E-Commerce-Integration erstellen, das Hosting Ihres MCP-Servers auf Netlify stellt sicher, dass Ihre KI-Agenten Live- und dynamischen Zugriff auf die Funktionen Ihrer Plattform haben.

Sie könnten zum Beispiel ein MCP-Tool erstellen, um Benutzerdaten aus der API Ihrer App abzurufen oder automatisierte Workflows basierend auf KI-Prompts auszulösen. Die serverlose Einrichtung bedeutet, dass Sie keine Server verwalten müssen – einfach Code schreiben, bereitstellen und Netlify den Rest erledigen lassen.

Fazit

Und da haben Sie es! Sie haben gerade gelernt, wie man einen MCP-Server auf Netlify erstellt, bereitstellt und hostet, wodurch Ihre KI-Agenten zu Produktivitäts-Kraftpaketen werden. Von der Einrichtung einer einfachen serverlosen Funktion bis zur Verbindung mit Claude, Cursor oder VS Code macht dieser Leitfaden die Integration von KI in Ihre Plattform einfach. Unser Test-Prompt – „Verarbeite die Anfrage: Hallo, Netlify!“ – zeigt, wie unkompliziert der Einstieg ist.

Bereit, weiterzugehen? Fügen Sie Ihrer mcp.js benutzerdefinierte Tools hinzu, wie API-Aufrufe oder Datenbankabfragen, und beobachten Sie, wie Ihre KI erstaunliche Dinge tut.

💡
Möchten Sie ein großartiges API-Test-Tool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform, damit Ihr Entwicklerteam mit maximaler Produktivität zusammenarbeiten kann?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem viel günstigeren Preis!
Schaltfläche

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenDownload