Comment construire, déployer et héberger des serveurs MCP sur Netlify

Êtes-vous prêt à surcharger vos flux de travail d'IA avec le serveur MCP sur Netlify ? Imaginez donner à vos agents d'IA — comme Claude, Cursor ou VS Code Copilot — une ligne directe vers les outils et les données de votre plateforme, le tout hébergé sur l'infrastructure serverless élégante de Netlify. Dans ce guide amusant et conversationnel, nous allons explorer ce qu'est le serveur MCP sur Netlify, pourquoi il est génial, et comment le construire, le déployer et l'héberger étape par étape. De plus, nous le testerons avec un exemple sympa pour nous assurer qu'il fonctionne. Plongeons et rendons votre IA plus intelligente !

💡

Vous voulez un excellent outil de test d'API qui génère de la belle documentation d'API ?

Vous voulez une plateforme intégrée et tout-en-un pour que votre équipe de développeurs travaille ensemble avec une productivité maximale ?

Apidog répond à toutes vos exigences et remplace Postman à un prix beaucoup plus abordable !

button

Qu'est-ce qu'un serveur MCP et pourquoi Netlify ?

Le Model Context Protocol (MCP) est comme un adaptateur universel pour les agents d'IA. C'est un standard ouvert et léger qui permet aux clients d'IA (par exemple, Claude Desktop ou Cursor) de communiquer avec des serveurs qui exposent des outils, des données et des invites. Cela signifie que votre IA peut interagir avec les fonctionnalités de votre application en temps réel, la rendant consciente du contexte et beaucoup plus utile.

Héberger votre serveur MCP sur Netlify est une évidence. La plateforme serverless de Netlify est évolutive, nécessite peu de maintenance et est parfaite pour déployer des serveurs MCP. Elle gère les tâches lourdes — pics de trafic, mises à jour et sécurité — afin que vous puissiez vous concentrer sur la création d'intégrations d'IA géniales. Que vous ajoutiez de l'IA à un blog, un site de commerce électronique ou une application personnalisée, le serveur MCP sur Netlify le rend transparent.

Pourquoi vous allez adorer héberger des serveurs MCP sur Netlify

Voici pourquoi le serveur MCP sur Netlify change la donne :

Puissance évolutive : Les fonctions serverless de Netlify gèrent les pics de trafic sans sourciller.
Déploiement facile : Poussez vers GitHub, et Netlify déploie automatiquement votre serveur. Aucun diplôme DevOps n'est requis !
Compatible avec l'IA : Connecte les agents d'IA aux données et outils de votre plateforme avec une configuration minimale.
Faibles frais généraux : Serverless signifie que vous ne payez que ce que vous utilisez, ce qui réduit les coûts.

Prêt à donner vie à votre IA ? Mettons en place votre serveur MCP sur Netlify !

Construction, déploiement et hébergement de serveurs MCP sur Netlify

Prérequis

Avant de commencer, assurez-vous d'avoir :

Node.js 20+ : Pour le développement local et l'exécution de la CLI Netlify (nodejs.org/en/download).
Compte Netlify : Inscrivez-vous sur netlify.com.
CLI Netlify : Nous l'installerons pour tester et déployer.
Git : Pour le contrôle de version et le déploiement.
Client compatible MCP : Claude Desktop, Cursor, Windsurf ou VS Code Copilot pour les tests.
Compte GitHub : Facultatif, pour le déploiement basé sur Git.

Étape 1 : Configurer votre projet Netlify

Configurer la structure du projet :

Créez un nouveau dossier de projet (par exemple, mcp-netlify).
À l'intérieur, créez un répertoire /netlify/functions pour votre code de serveur MCP.

Exemple de structure :

/mcp-netlify
  /netlify
    /functions
      mcp.js

Créer un site Netlify :

Connectez-vous à app.netlify.com.
Cliquez sur Nouveau site depuis Git ou créez un nouveau site manuellement.
Si vous utilisez Git, connectez votre dépôt GitHub/GitLab/Bitbucket plus tard.

Étape 2 : Implémenter la fonction de serveur MCP

Créez le fichier mcp.js dans /netlify/functions pour définir votre serveur MCP sur Netlify. Cela utilise le SDK MCP pour exposer les outils, les ressources et les invites aux clients d'IA.

Voici un exemple pour 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"
};

Ceci crée un point de terminaison MCP serverless à l'adresse /.netlify/functions/mcp. Personnalisez les tools, les resources et les prompts en fonction des besoins de votre application (par exemple, appels d'API, requêtes de base de données).

Étape 3 : Installer les dépendances

Dans le dossier de votre projet, initialisez un projet Node.js et installez le SDK MCP :

npm init -y
npm install @modelcontextprotocol/sdk

Étape 4 : Développement et tests locaux

Installer Netlify CLI :

npm install -g netlify-cli

2. Exécuter localement :

netlify dev

Ceci démarre un serveur local à l'adresse http://localhost:8888. Votre serveur MCP sur Netlify sera disponible à :

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

3. Tester avec l'inspecteur MCP :

Utilisez l'inspecteur MCP pour vérifier votre serveur :

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

Ouvrez http://localhost:6274 dans votre navigateur pour explorer les outils et ressources de votre serveur de manière interactive.

Étape 5 : Déployer votre serveur MCP sur Netlify

Vous avez deux options de déploiement :

Option 1 : Déploiement basé sur Git

Poussez votre projet vers un dépôt GitHub, GitLab ou Bitbucket.
Dans Netlify, liez le dépôt à votre site sous Configuration du site > Build & deploy.
Netlify déploie automatiquement à chaque push vers votre branche principale.

Option 2 : Déploiement via CLI

Déployez directement avec la CLI Netlify :

netlify deploy

Pour la production :

netlify deploy --prod

Après le déploiement, votre serveur MCP sur Netlify sera en ligne à :

https://votre-nom-de-site.netlify.app/.netlify/functions/mcp

Notez l'URL pour l'étape suivante.

Étape 6 : Connecter les clients MCP à votre serveur MCP Netlify

Configurez votre client IA (Claude Desktop, Cursor, Windsurf ou VS Code Copilot) pour qu'il se connecte à votre serveur MCP sur Netlify déployé. Utilisez l'une de ces configurations :

Pour les tests locaux

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

Pour le serveur déployé

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

Remplacez your-site-name.netlify.app par l'URL réelle de votre site Netlify.

Configuration du client

Claude Desktop :

Allez dans Paramètres > Développeur > Modifier la configuration.
Ouvrez claude_desktop_config.json, collez la configuration et enregistrez.
Redémarrez Claude Desktop.

Cursor :

Allez dans Paramètres > Outils et intégrations > Ajouter un serveur MCP personnalisé.
Collez la configuration et enregistrez.
Passez en Mode Agent dans le panneau de discussion.

VS Code Copilot :

Ouvrez les Paramètres (Ctrl+, ou Cmd+,).
Recherchez "MCP" et activez-le sous Fonctionnalités > Chat.
Cliquez sur Modifier dans settings.json, collez la configuration et enregistrez.

modifier la configuration mcp de vs code

Étape 7 : Tester votre serveur MCP

Testons votre serveur MCP sur Netlify avec une invite d'exemple dans votre client MCP :

En utilisant le serveur MCP sur Netlify, pouvez-vous exécuter un rapport pour les 3 derniers jours ?

Si vous avez utilisé l'exemple mcp.js ci-dessus, l'IA devrait répondre quelque chose comme :

Ceci confirme que votre serveur fonctionne. Personnalisez votre mcp.js pour ajouter de vrais outils (par exemple, intégrations d'API, requêtes de base de données) pour des tâches plus complexes.

Étape 8 : Inspecter et déboguer

Exécutez l'inspecteur MCP sur votre serveur déployé :

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

Vérifiez les journaux de fonction de Netlify dans le tableau de bord Netlify pour les erreurs.
Utilisez les analyses de Netlify pour surveiller l'utilisation et optimiser les performances.
Ajoutez l'authentification (par exemple, des clés API) via les variables d'environnement de Netlify pour la sécurité.

Bonnes pratiques pour les serveurs MCP sur Netlify

Gardez-le sans état (Stateless) : Concevez des fonctions éphémères, car les invocations serverless ne conservent pas l'état.
Sécurisez les secrets : Stockez les clés API ou les jetons dans les variables d'environnement de Netlify (Configuration du site > Variables d'environnement).
Configuration hybride : Si votre client ne prend pas en charge le streaming, exécutez un proxy MCP local pour faire le pont vers votre serveur Netlify.
Contrôle de version : Utilisez Git pour la collaboration et les retours en arrière faciles.
Optimisez les performances : Minimisez le temps d'exécution des fonctions pour réduire la latence et les coûts.

Conseils de dépannage

Serveur ne répond pas ? Vérifiez les journaux de la CLI Netlify (netlify dev) ou les journaux de fonction pour les erreurs.
Problèmes de connexion client ? Vérifiez l'URL de configuration MCP et redémarrez le client.
Inspecteur ne fonctionne pas ? Assurez-vous que le package MCP Inspector est à jour (npx @modelcontextprotocol/inspector@latest).
Limites de débit ? Surveillez l'utilisation des fonctions de Netlify et ajustez pour les scénarios à fort trafic.

Pourquoi héberger des serveurs MCP sur Netlify ?

Le serveur MCP sur Netlify est un mariage parfait pour les flux de travail basés sur l'IA. La plateforme serverless de Netlify s'adapte sans effort, de sorte que votre serveur MCP peut gérer des milliers de requêtes IA sans planter. De plus, son déploiement basé sur Git et sa CLI facilitent les mises à jour. Que vous construisiez un chatbot, un outil de gestion de contenu ou une intégration e-commerce, l'hébergement de votre serveur MCP sur Netlify garantit à vos agents IA un accès dynamique et en direct aux fonctionnalités de votre plateforme.

Par exemple, vous pourriez créer un outil MCP pour récupérer les données utilisateur de l'API de votre application ou déclencher des flux de travail automatisés basés sur des invites d'IA. La configuration serverless signifie que vous n'avez pas besoin de gérer des serveurs — juste coder, déployer et laisser Netlify faire le reste.

Conclusion

Et voilà ! Vous venez d'apprendre comment construire, déployer et héberger un serveur MCP sur Netlify, transformant vos agents d'IA en véritables moteurs de productivité. De la mise en place d'une simple fonction serverless à sa connexion avec Claude, Cursor ou VS Code, ce guide facilite l'intégration de l'IA à votre plateforme. Notre invite de test — « Traitez la requête : Bonjour, Netlify ! » — montre à quel point il est simple de commencer.

Prêt à aller plus loin ? Ajoutez des outils personnalisés à votre mcp.js, comme des appels d'API ou des requêtes de base de données, et regardez votre IA faire des choses incroyables.

💡

button