Déployer un serveur MCP distant sur Vercel : Guide complet étape par étape 2025

Le Model Context Protocol (MCP) révolutionne la façon dont les applications d'IA interagissent avec les outils et sources de données externes.

Dans ce guide complet, nous vous montrons comment déployer votre propre serveur MCP distant sur la plateforme serverless de Vercel, en utilisant notre serveur de production my-mcp-server comme exemple concret.

Qu'est-ce que le Model Context Protocol (MCP) ?

MCP est un standard ouvert développé par Anthropic qui permet aux grands modèles de langage (LLM) de communiquer de manière transparente avec des systèmes externes.

Considérez-le comme un adaptateur universel qui permet aux assistants IA comme Claude, ChatGPT et autres d'accéder à vos outils, bases de données et API personnalisés de manière standardisée.

Avantages clés du MCP

Communication standardisée : Un seul protocole pour tout – plus d'intégrations personnalisées pour chaque plateforme IA
Découverte d'outils : Les clients IA peuvent automatiquement découvrir quels outils votre serveur fournit
Sécurité des types : Des schémas intégrés assurent la validation des données
Extensibilité : Ajout facile de nouveaux outils sans modifier l'architecture de base

Pourquoi déployer MCP sur Vercel ?

Vercel a officiellement annoncé le support des serveurs MCP en mai 2025, en faisant la plateforme de premier choix pour l'hébergement de serveurs MCP distants.

Les avantages de Vercel pour MCP

Architecture serverless : Payez uniquement ce que vous utilisez, avec mise à l'échelle automatique
Réseau Edge mondial : Faible latence depuis n'importe où dans le monde
Support natif : Support intégré du transport Streamable HTTP
Déploiement facile : Push vers Git et déploiement automatique
Fluid Compute : Utilisation efficace des ressources pour les charges de travail IA

Aperçu de l'architecture

Avant de plonger dans le code, comprenons l'architecture :

┌──────────────────┐     HTTPS      ┌──────────────────────┐
│                  │ ◄────────────► │                      │
│   Client MCP     │   Streamable   │  Fonction Vercel     │
│  (Claude Code,   │     HTTP       │  (Serveur MCP)       │
│   Cursor, etc.)  │                │                      │
│                  │                │  ┌────────────────┐  │
└──────────────────┘                │  │  Gestionnaire  │  │
                                    │  │    d'outils    │  │
                                    │  └────────────────┘  │
                                    │                      │
                                    └──────────────────────┘

Étape 1 : Configuration du projet

Créez un nouveau projet :

# Créer un nouveau projet
mkdir mon-serveur-mcp
cd mon-serveur-mcp
npm init -y

# Installer les dépendances
npm install @modelcontextprotocol/sdk zod
npm install -D @vercel/node typescript @types/node

Étape 2 : Créer le gestionnaire de serveur MCP

Créez le gestionnaire API principal dans api/index.ts :

import type { VercelRequest, VercelResponse } from "@vercel/node";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { z } from "zod";

function createMcpServer(): McpServer {
  const server = new McpServer({
    name: "mon-serveur-mcp",
    version: "1.0.0",
  });

  // Enregistrer votre premier outil
  server.registerTool("bonjour_monde", {
    title: "Bonjour Monde",
    description: "Un simple outil de salutation",
    inputSchema: {
      nom: z.string().describe("Nom à saluer"),
    },
  }, async ({ nom }) => {
    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          message: `Bonjour, ${nom} ! Bienvenue dans MCP.`,
          timestamp: new Date().toISOString(),
        }, null, 2),
      }],
    };
  });

  return server;
}

export default async function handler(
  req: VercelRequest,
  res: VercelResponse
) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");

  if (req.method === "OPTIONS") {
    return res.status(200).end();
  }

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

    await server.connect(transport);
    await transport.handleRequest(req, res, req.body);
  } catch (error) {
    if (!res.headersSent) {
      return res.status(500).json({
        jsonrpc: "2.0",
        error: {
          code: -32603,
          message: `Erreur serveur interne : ${error}`,
        },
      });
    }
  }
}

Comprendre le code

Ce gestionnaire fait trois choses essentielles :

Crée une instance de serveur MCP avec un nom et une version
Enregistre des outils que les clients IA peuvent utiliser
Gère les requêtes HTTP via le transport Streamable HTTP

Étape 3 : Configurer le déploiement Vercel

Créez vercel.json à la racine de votre projet :

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "version": 2,
  "buildCommand": "npm run build",
  "functions": {
    "api/index.ts": {
      "maxDuration": 60
    }
  }
}

Cette configuration définit un timeout de 60 secondes pour votre fonction, ce qui est important pour les opérations IA qui peuvent prendre du temps.

Étape 4 : Ajouter de vrais outils – L'exemple my-mcp-server

Voyons comment notre serveur de production my-mcp-server implémente des outils réels. Ce serveur fournit la recherche web, la publication sur les réseaux sociaux, la génération d'images et plus encore.

Outil de recherche web

// Outil de recherche web
server.registerTool("search_web", {
  title: "Search Web",
  description: "Rechercher sur le web des informations actuelles avec Tavily AI",
  inputSchema: {
    query: z.string().describe("Requête de recherche"),
    maxResults: z.number().optional().describe("Résultats maximum (défaut: 5)"),
    topic: z.enum(["general", "news"]).optional().describe("Type de recherche"),
  },
}, async ({ query, maxResults, topic }) => {
  const result = await tavilySearch(query, { maxResults, topic });
  return {
    content: [{
      type: "text",
      text: JSON.stringify({
        query: result.query,
        answer: result.answer,
        results: result.results,
      }, null, 2),
    }],
  };
});

Outil de génération d'images

// Outil de génération d'images
server.registerTool("generate_hero_image", {
  title: "Generate Hero Image",
  description: "Générer une image hero avec Gemini AI",
  inputSchema: {
    topic: z.string().describe("Sujet/description de l'image"),
    style: z.enum([
      "modern-professional",
      "tech-gradient",
      "minimal-abstract"
    ]).describe("Style visuel"),
  },
}, async ({ topic, style }) => {
  const image = await generateImageWithGemini(topic, style);
  return {
    content: [{
      type: "text",
      text: JSON.stringify({
        status: "success",
        topic,
        style,
        mimeType: image.mimeType,
        base64Data: image.base64Data,
      }, null, 2),
    }],
  };
});

Étape 5 : Variables d'environnement

Configurez vos variables d'environnement dans Vercel :

# Requis pour diverses intégrations
TAVILY_API_KEY=votre_cle_tavily
GOOGLE_API_KEY=votre_cle_google
TYPEFULLY_API_KEY=votre_cle_typefully

Étape 6 : Déployer sur Vercel

Déployez votre serveur en quelques commandes :

npm install -g vercel
vercel --prod

Vercel vous guidera à travers le processus de déploiement et vous fournira une URL publique pour votre serveur MCP.

Étape 7 : Connecter les clients à votre serveur MCP

Connexion avec Claude Code / Claude Desktop

Ajoutez à votre configuration Claude (typiquement dans ~/.claude.json ou settings.json) :

{
  "mcpServers": {
    "my-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://votre-projet.vercel.app/api"
      ]
    }
  }
}

Connexion avec l'AI SDK (Vercel)

import { experimental_createMCPClient } from "ai";

const mcpClient = await experimental_createMCPClient({
  transport: {
    type: "sse",
    url: "https://votre-projet.vercel.app/api",
  },
});

// Obtenir les outils disponibles
const tools = await mcpClient.tools();
console.log("Outils disponibles:", tools);

Étape 8 : Tester le serveur

Testez si votre serveur fonctionne :

# Health Check
curl https://votre-projet.vercel.app/api?action=health

# Lister les outils
npx mcp-remote https://votre-projet.vercel.app/api --list-tools

Meilleures pratiques

Architecture et performance

Conception sans état : Les fonctions Vercel sont sans état – ne stockez pas de données en mémoire entre les requêtes
Gestion des timeouts : Définissez des timeouts appropriés pour éviter les dépassements de temps
Optimisation des cold starts : Minimisez les dépendances pour des démarrages plus rapides

Sécurité et fiabilité

Gestion des erreurs : Retournez toujours des réponses d'erreur JSON-RPC appropriées
Validation des entrées : Utilisez toujours les schémas Zod pour valider les données
Rate limiting : Implémentez des limites de taux pour protéger votre serveur
Authentification : Ajoutez des tokens API pour les environnements de production

Conseil pro : Testez toujours votre serveur localement avant de déployer en production. Utilisez vercel dev pour simuler l'environnement Vercel.

Prochaines étapes

Maintenant que vous savez déployer un serveur MCP sur Vercel, voici quelques idées d'outils que vous pourriez créer :

Outils de recherche : Recherche web, agrégation de nouvelles, recherche thématique
Outils de contenu : Génération de plans de blog, optimisation SEO
Outils d'image : Génération d'images IA avec différents styles
Outils de base de données : Interroger et gérer vos bases de données
Intégrations API : Connexion à des services tiers

Conclusion

Le déploiement d'un serveur MCP sur Vercel combine la puissance du calcul serverless avec la flexibilité du Model Context Protocol.

L'écosystème MCP se développe rapidement, avec des entreprises majeures comme Booking.com, Expedia et Microsoft qui adoptent le protocole. C'est le moment idéal pour commencer à construire vos propres intégrations.

Ressources

Pour aller plus loin :

Spécification MCP – Documentation officielle du protocole
Documentation Vercel MCP – Guide de déploiement Vercel
Exemples de serveurs MCP – Serveurs de référence open source

Prêt à déployer votre propre serveur MCP ? Commencez dès maintenant !

Déployer un serveur MCP distant sur Vercel : Guide complet étape par étape 2025