Déployer notre Agent IA dans le monde avec Cloudflare

Cette dernière partie est optionnelle, vous pouvez déployer votre Agent IA où vous voulez. J'ai choisi Cloudflare car c'est ma plateforme quotidienne pour déployer des projets JavaScript. Cela nécessite un petit refactoring pour tirer parti des capacités MCP de Cloudflare.

Cloudflare fournit plusieurs primitives pour les Agents IA et les serveurs MCP sur leur plateforme. Pour s'assurer que tout fonctionne, nous allons déplacer notre MCP dans un Worker Cloudflare.

Mettre en place l'outillage ​

D'abord, installez les dépendances :

pnpm add agents && 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 types"
  }
}

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": "worker/index.ts",
  "compatibility_date": "2025-03-10",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "migrations": [
    {
      "new_sqlite_classes": [
        "OurMcp"
      ],
      "tag": "v1"
    }
  ],
  "durable_objects": {
    "bindings": [
      {
        "class_name": "OurMcp",
        "name": "MCP_OBJECT"
      }
    ]
  },
  "observability": {
    "enabled": true,
    "head_sampling_rate": 0.1
  }
}

Avec ce fichier, Wrangler cherchera notre code Worker dans worker/index.ts. Nous configurons aussi un Durable Object nommé OurMcp. Même si nous n'avons pas besoin des capacités SQLite, c'est obligatoire pour utiliser la classe MCP Agent.

Pour terminer la mise en place, créez un fichier tsconfig.wrangler.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-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 un bon autocomplete 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 code MCP dans un Worker Cloudflare.

Créez worker/index.ts et ajoutez un Worker minimal :

export default {
  fetch(request: Request, env: Env, ctx: ExecutionContext) {
    return Response.json({ message: 'Hello from the worker!' })
  },
}

Un Worker, dans sa forme la plus simple, est un objet exporté avec une méthode fetch.

Avec le paquet agents installé, étendez le Worker pour le connecter au MCP.

Importez la classe McpAgent depuis agents et étendez‑la pour créer OurMcp :

import { McpAgent } from 'agents'

class OurMcp extends McpAgent {
}

Puis utilisez OurMcp dans le code du Worker :

export default {
  fetch(request: Request, env: Env, ctx: ExecutionContext) {
    return OurMcp.serve('/').fetch(request, env, ctx)
  },
}

Enfin, déplacez le code MCP dans la classe OurMcp :

export class OurMcp extends McpAgent {
  server = new McpServer({
    name: 'ai-agent',
    version: '1.0.0'
  })

  async init() {
    this.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)
            }
          ]
        }
      }
    )
  }
}

Comme vous le voyez, créer un MCP dans un Worker Cloudflare est simple. Vous pouvez maintenant supprimer sans risque le fichier 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

Patientez un instant et votre MCP sera en ligne.

Utilisez l'URL dans votre application IA pour interagir avec lui. Le déploiement doit fournir une URL du type https://our-mcp.<your-subdomain>.workers.dev.

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 compte. Dans la page des paramètres Pages, ajoutez la clé API OpenAI en secret et l'URL de l'endpoint MCP en texte clair.

Et voilà, votre Agent IA est déployé et prêt à l'emploi.

Si vous regardez bien l'URL dans la vidéo, vous verrez qu'elle pointe vers le domaine Cloudflare Workers. 😌