MCP pour offrir des capacités supplémentaires à l'Agent IA

Nous avons construit notre premier Agent IA avec un outil d'addition. C'était un excellent départ. Aujourd'hui, nous allons construire un serveur MCP qui contient les outils nécessaires pour améliorer les capacités de notre Agent IA.

Petit rappel sur MCP : MCP est un standard open‑source pour connecter des applications IA à des systèmes externes. Les applications IA contiennent un Agent IA qui peut interagir avec le serveur MCP via des appels d'outils pour accéder au monde extérieur. Visuellement, cela ressemble à ceci :

Vous vous demandez peut‑être pourquoi nous avons besoin d'un serveur MCP. Pour cet exemple précis, nous n'en avons pas strictement besoin. Mais, la plupart du temps, savoir connecter un Agent IA à un serveur MCP est crucial.

1. Utiliser n'importe quel Agent IA : en fournissant MCP à vos utilisateurs, vous leur permettez d'utiliser tout Agent IA qui supporte le standard MCP. Imaginez que vous construisiez un MCP pour une bibliothèque de composants, comme Nuxt UI, la possibilité d'utiliser MCP dans votre éditeur de code est un prérequis.
2. Utiliser un serveur MCP externe : dans certains cas, vous voudrez peut‑être connecter votre Agent IA à un serveur MCP externe, un MCP que vous n'avez pas créé mais que vous souhaitez exploiter. Cela peut être utile pour s'intégrer à des systèmes existants ou bénéficier d'outils tiers.
3. Découplage : en utilisant un serveur MCP, vous pouvez découpler votre Agent IA des systèmes sous‑jacents avec lesquels il interagit.

Honnêtement, je ne vois aucune raison de ne pas utiliser un serveur MCP.

Construire le serveur MCP ​

Dans notre application Nitro, nous pouvons créer une nouvelle route pour le serveur MCP.

mkdir -p server/routes
touch server/routes/mcp.ts

Ensuite, nous devons installer le SDK MCP :

pnpm add @modelcontextprotocol/sdk

C'est le SDK MCP officiel pour construire des Model Context Protocols en TypeScript.

Maintenant, nous pouvons créer notre serveur MCP dans le fichier server/routes/mcp.ts :

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { defineEventHandler } from 'h3'

export default defineEventHandler(async (event) => {
  const server = new McpServer({
    name: 'ai-agent',
    version: '1.0.0'
  })
})

Et voilà, notre premier serveur MCP !

Mais en l'état, ce serveur MCP est totalement inutile. Le standard MCP sépare le serveur et la couche de transport. Dans notre cas, nous voulons une couche de transport HTTP pour interagir avec le serveur MCP.

Heureusement, le SDK MCP fournit tout ce dont nous avons besoin pour ajouter une couche de transport HTTP.

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js'
import { defineEventHandler, readBody } from 'h3'

export default defineEventHandler(async (event) => {
  const server = new McpServer({
    name: 'ai-agent',
    version: '1.0.0'
  })

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

  event.node.res.on('close', () => {
    transport.close()
    server.close()
  })

  await server.connect(transport)

  const body = await readBody(event)

  await transport.handleRequest(event.node.req, event.node.res, body)
})

Avec server.connect(transport), nous indiquons au serveur MCP d'utiliser la couche de transport HTTP pour la communication. Avec transport.handleRequest(event.node.req, event.node.res, body), nous gérons les requêtes HTTP entrantes et les acheminons vers le serveur MCP pour traitement. Le transport utilise la réponse Node pour envoyer le résultat au client. Lorsque la réponse se termine, ou se termine prématurément, nous devons nettoyer les instances de transport et de serveur pour libérer les ressources.

Le corps de la requête est important car les outils peuvent avoir des paramètres d'entrée.

Avec cette configuration, nous pouvons maintenant essayer le MCP.

Essayer le MCP ​

Pour essayer le MCP, nous pouvons utiliser l'Inspector MCP officiel :

npx @modelcontextprotocol/inspector@latest

Ensuite, nous pouvons saisir l'URL du MCP et ping le serveur pour vérifier qu'il fonctionne.

Et ça fonctionne !

Ajouter un outil ​

Maintenant que nous avons un serveur MCP opérationnel, nous pouvons déplacer notre outil d'addition de l'Agent IA vers le serveur MCP.

Dans le fichier server/api/chat.ts, supprimez l'enregistrement de l'outil d'addition :

import { createOpenAI } from '@ai-sdk/openai'
import { convertToModelMessages, stepCountIs, streamText, tool } from 'ai'
import { defineEventHandler, defineLazyEventHandler, readBody } from 'h3'
import { useRuntimeConfig } from 'nitropack/runtime'
import { z } from 'zod'

export default defineLazyEventHandler(() => {
  const runtimeConfig = useRuntimeConfig()

  const model = createOpenAI({
    apiKey: runtimeConfig.openAiApiKey,
  })

  return defineEventHandler(async (event) => {
    const { messages } = await readBody(event)

    return streamText({
      model: model('gpt-5-nano'),
      system: `You are a helpful assistant. You can use the tool to add two numbers together.`,
      tools: { 
        addition: tool({ 
          description: 'Adds two numbers', 
          inputSchema: z.object({ 
            a: z.number().describe('The first number'), 
            b: z.number().describe('The second number'), 
          }), 
          execute: ({ a, b }) => ({ 
            a, 
            b, 
            result: a + b 
          }), 
        }), 
      }, 
      stopWhen: stepCountIs(2),
      messages: convertToModelMessages(messages),
    }).toUIMessageStreamResponse()
  })
})

Dans le fichier server/routes/mcp.ts, enregistrez l'outil d'addition auprès du serveur MCP.

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { defineEventHandler } from 'h3'
import { z } from 'zod/v3'

export default defineEventHandler(async (event) => {
  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) }
        ]
      }
    }
  )

  // ...
})

Comme vous pouvez le voir, ce n'est pas très différent de l'enregistrement d'un outil dans l'Agent IA. La principale différence est le format de sortie, standardisé côté serveur MCP.

Nous pouvons maintenant utiliser manuellement notre outil d'addition :

Nous avons maintenant un serveur MCP fonctionnel. Il est temps de connecter l'Agent IA au serveur MCP.