Déployer notre Agent IA dans le monde avec Cloudflare

Cette dernière partie est optionnelle : vous pouvez déployer l'application et le serveur MCP où vous le souhaitez. J'ai choisi Cloudflare, car c'est la plateforme que j'utilise quotidiennement pour déployer des projets JavaScript. Nous allons effectuer un petit refactoring pour exécuter le serveur MCP dans un Worker Cloudflare, tout en conservant l'Agent et son interface Nuxt dans une application distincte.

Cloudflare fournit plusieurs primitives pour les Agents IA et les serveurs MCP. Notre outil d'addition n'a pas d'état, nous pouvons donc l'héberger dans un Worker classique. Le transport Web Standards du SDK MCP fonctionne directement avec les API Request et Response du Worker, nous n'avons donc pas besoin d'un Durable Object. Un serveur MCP avec état aurait besoin d'une gestion persistante des sessions.

Mettre en place l'outillage ​

D'abord, installez les dépendances :

pnpm add -D wrangler @types/node

Ensuite, ajoutez les scripts suivants à package.json :

{
  "scripts": {
    "dev:wrangler": "wrangler --config ./worker/wrangler.jsonc dev",
    "deploy:wrangler": "wrangler --config ./worker/wrangler.jsonc deploy",
    "cf-typegen": "wrangler --config ./worker/wrangler.jsonc types worker/worker-configuration.d.ts"
  }
}

Nous avons aussi besoin d'un wrangler.jsonc pour configurer notre Worker Cloudflare. Créez worker/wrangler.jsonc avec le contenu suivant :

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "our-mcp",
  "main": "index.ts",
  "compatibility_date": "2025-03-10",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "observability": {
    "enabled": true,
    "head_sampling_rate": 0.1
  }
}

Avec ce fichier, Wrangler cherchera index.ts dans le répertoire worker, ce qui correspond à worker/index.ts. La configuration se trouve dans le répertoire worker afin de ne pas entrer en conflit avec le déploiement Cloudflare Pages de l'application Nuxt.

Pour terminer la mise en place, créez un fichier tsconfig.worker.json pour configurer TypeScript pour le Worker :

{
  "compilerOptions": {
    "target": "es2021",
    "jsx": "react-jsx",
    "lib": [
      "es2021"
    ],
    "module": "es2022",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": false,
    "strict": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "skipLibCheck": true
  },
  "include": [
    "worker/worker-configuration.d.ts",
    "worker/**/*.ts"
  ]
}

Ajoutez ce fichier au tsconfig.json existant dans la section references :

{
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    },
    {
      "path": "./tsconfig.worker.json"
    }
  ]
}

Générez maintenant les types :

pnpm run cf-typegen

Cela garantit une bonne autocomplétion dans les fichiers du Worker.

N'oubliez pas d'ajouter le dossier .wrangler à .gitignore pour éviter de le commettre par erreur.

Passage au Worker ​

Maintenant que l'outillage est prêt, déplaçons le serveur MCP dans un Worker Cloudflare. Un Worker est un objet exporté avec une méthode fetch. Pour notre outil d'addition sans état, WebStandardStreamableHTTPServerTransport fournit directement le transport Streamable HTTP grâce aux API standard du Worker, sans nécessiter de Durable Object.

Remplacez l'ancienne route Nitro par ce fichier worker/index.ts complet :

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { WebStandardStreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js'
import { z } from 'zod'

function createServer() {
  const server = new McpServer({
    name: 'ai-agent',
    version: '1.0.0',
  })

  server.tool(
    'addition',
    'Adds two numbers',
    {
      a: z.number().describe('The first number'),
      b: z.number().describe('The second number'),
    },
    async (params) => {
      return {
        content: [
          {
            type: 'text',
            text: String(params.a + params.b),
          },
        ],
      }
    },
  )

  return server
}

export default {
  async fetch(request: Request) {
    if (new URL(request.url).pathname !== '/mcp') {
      return new Response('Not found', { status: 404 })
    }

    const server = createServer()
    const transport = new WebStandardStreamableHTTPServerTransport({
      sessionIdGenerator: undefined,
      enableJsonResponse: true,
    })

    await server.connect(transport)

    try {
      return await transport.handleRequest(request)
    }
    finally {
      await transport.close()
      await server.close()
    }
  },
} satisfies ExportedHandler<Env>

createServer crée un nouveau serveur MCP à chaque requête, et sessionIdGenerator: undefined désactive les sessions MCP. Aucun état de requête n'est ainsi partagé entre les clients. enableJsonResponse: true est adapté à cet outil en requête-réponse et permet de fermer le serveur et le transport une fois la réponse créée. La vérification de route expose le serveur MCP uniquement sur /mcp. Vous pouvez maintenant supprimer server/routes/mcp.ts.

Nous pouvons démarrer le serveur de développement pour tester nos changements.

pnpm run dev:wrangler

Vous pouvez tester via l'application IA ou via l'Inspector MCP.

Déployer sur Cloudflare ​

C'est la partie la plus simple !

Exécutez :

pnpm run deploy:wrangler

Après le déploiement, Wrangler affiche l'URL du Worker. Votre endpoint MCP correspond à l'URL du Worker suivie de /mcp, par exemple https://our-mcp.<your-subdomain>.workers.dev/mcp.

Pour déployer l'application IA, exécutez :

SERVER_PRESET=cloudflare_pages pnpm run build && npx wrangler --cwd dist pages deploy

La dernière étape consiste à configurer les variables d'environnement dans votre projet Cloudflare Pages. Ajoutez NUXT_OPEN_AI_API_KEY comme secret et NUXT_MCP_ENDPOINT comme texte brut, en utilisant l'URL de l'endpoint MCP du Worker déployé.

Votre application IA est maintenant déployée et peut utiliser le serveur MCP exécuté sur Cloudflare.

La série est terminée : nous avons construit un Agent, placé sa capacité derrière MCP, connecté le tout à une interface de chat et déployé les deux parties.