Construisons un serveur MCP TypeScript et connectons-nous à Claude Desktop

Les grands modèles de langage (LLM) comme Claude par Anthropic deviennent de plus en plus performants, mais pour libérer pleinement leur potentiel, ils ont besoin d'accéder à un contexte externe riche. C'est là qu'intervient le Model Context Protocol (MCP), une méthode standardisée permettant aux outils, aux applications et aux services de communiquer le contexte aux LLM. Dans cet article, nous allons vous guider à travers la création d'un serveur MCP en TypeScript, explorer comment il interagit avec les clients et démontrer comment le connecter à Claude Desktop.

💡

Avant de plonger dans les détails, consultez Apidog, un outil puissant pour la conception, le test et la documentation des API. Apidog vous permet d'intégrer de manière transparente vos API, améliorant ainsi votre flux de travail grâce à des modèles structurés et une collaboration facile. Si vous cherchez à booster votre automatisation et votre gestion des API.

button

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

Le Model Context Protocol est un protocole universel qui définit la manière dont les applications LLM (hôtes), les serveurs et les clients échangent des données. MCP permet une intégration modulaire, basée sur des outils, avec des sources de données locales ou en ligne de manière évolutive et structurée. Il est particulièrement utile dans les environnements LLM basés sur un ordinateur de bureau, tels que Claude Desktop ou Sourcegraph Cody.

En général, le protocole comprend :

Hôtes : L'application basée sur LLM (par exemple, Claude Desktop)
Clients : Modules intégrés qui gèrent les connexions aux serveurs
Serveurs : Fournisseurs d'outils, de données ou de services
Transports : Le mécanisme sous-jacent pour l'envoi et la réception de messages JSON-RPC

Pourquoi utiliser MCP ?

Les méthodes traditionnelles comme le copier-coller ou le codage en dur du contexte sont maladroites et limitées. MCP résout ces problèmes en permettant :

La découverte d'outils et la négociation des capacités
L'échange de messages basé sur JSON-RPC
Une interface cohérente entre les langues et les plateformes
Une séparation claire entre l'application LLM et les outils externes

Cette modularité permet aux développeurs de créer des outils puissants et conscients du contexte qui peuvent interagir avec les LLM en temps réel.

Prérequis

Pour créer un serveur MCP TypeScript et le connecter à Claude Desktop, vous aurez besoin de :

Node.js (v18+)
TypeScript
Connaissances de base de JSON-RPC

Claude Desktop

MCP TypeScript SDK

Étape 1 : Configuration de votre projet

Commencez par configurer un projet Node.js :

mkdir mcp-ts-server
cd mcp-ts-server
npm init -y
npm install typescript ts-node @modelcontextprotocol/server-core
npx tsc --init

Créez un répertoire src/ et, à l'intérieur, ajoutez votre fichier de point d'entrée, par exemple, index.ts.

Étape 2 : Création de votre serveur MCP en TypeScript

Voyons comment créer un serveur MCP simple qui fournit un « outil » pour saluer les utilisateurs.

Voici la structure de base :

import { createServer, Server } from '@modelcontextprotocol/server-core';

const server: Server = createServer();

const GREETING_TOOL = {
  name: 'greet_user',
  description: 'Returns a friendly greeting message.',
  inputSchema: {
    type: 'object',
    properties: {
      name: { type: 'string', description: 'Name of the user' }
    },
    required: ['name']
  }
};

// Register tool
server.setRequestHandler('ListTools', async () => {
  return { tools: [GREETING_TOOL] };
});

// Handle tool call
server.setRequestHandler('CallTool', async (request) => {
  const args = request.args;
  const name = args.name || 'there';
  return {
    content: [{ type: 'text', text: `Hello, ${name}! Welcome to MCP.` }],
    isError: false
  };
});

// Start server
server.listen();

Vous pouvez maintenant compiler et exécuter ceci avec :

npx ts-node src/index.ts

Étape 3 : Enregistrez votre serveur avec Claude Desktop

Chaque serveur MCP a besoin d'un URI unique. Par exemple :

tool://greet_user/greet_user

Lorsque Claude Desktop s'initialise, il peut découvrir le serveur via un transport Stdio. Cela signifie que votre serveur communique via l'entrée/la sortie standard (stdin/stdout) plutôt que HTTP ou des sockets.

Étape 4 : Connexion du serveur MCP à Claude Desktop

Dans Claude Desktop :

Allez dans Paramètres > Fournisseurs d'outils
Ajoutez un nouveau fournisseur d'outils en utilisant un transport Stdio
Spécifiez votre URI d'outil et la commande pour exécuter votre serveur, par exemple :

npx ts-node src/index.ts

Claude Desktop initiera la communication en utilisant JSON-RPC 2.0 via stdin/stdout, et votre serveur devrait répondre avec la liste des outils qu'il prend en charge.

Bien sûr ! Voici une version réécrite de la section de configuration de Claude Desktop que vous pouvez insérer directement dans votre article :

Utilisation de Claude Desktop pour tester votre serveur MCP

L'application Claude Desktop est l'un des environnements les plus simples pour tester les intégrations MCP localement.

Pour le configurer manuellement afin de lancer votre serveur MCP, suivez ces étapes :

Ouvrez ou créez le fichier à :

~/Library/Application Support/Claude/claude_desktop_config.json

pasconfig.json

Ajoutez la configuration JSON suivante, en remplaçant les détails selon les besoins de votre outil :

{
  "mcpServers": {
    "brave_search": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "your-api-key"
      }
    }
  }
}

Cela indique à Claude Desktop de :

Reconnaître un outil nommé brave_search
Le lancer via npx @modelcontextprotocol/server-brave-search
Injecter des variables d'environnement, comme votre clé API
Enregistrer le fichier et redémarrer Claude Desktop.

Une fois redémarré, vous pouvez demander à Claude Desktop d'utiliser votre nouvel outil. Par exemple :

"Rechercher sur le web glama.ai"

Si c'est la première fois que vous utilisez MCP, Claude vous demandera la permission via une boîte de dialogue contextuelle. Cliquez sur "Autoriser pour ce chat" pour continuer.

Après cela, Claude déclenchera votre serveur MCP et diffusera les résultats directement dans la conversation.

Améliorez votre automatisation de l'IA avec l'intégration du serveur Apidog MCP
Poussez vos flux de travail basés sur l'IA encore plus loin en vous intégrant au serveur Apidog MCP.

Cette connexion puissante permet à votre assistant IA d'interagir directement avec les spécifications d'API des projets Apidog, permettant une exploration transparente des API, la génération de code et la création de modèles structurés.

Que vous construisiez un simple outil de salutation ou que vous intégriez des services avancés comme la recherche web, la création de votre propre serveur MCP en TypeScript vous donne un contrôle total sur la façon dont Claude accède et traite le contexte externe, débloquant des expériences d'IA plus intelligentes et plus interactives.

Aperçu du flux de messages

Voici ce qui se passe en coulisses :

1. Initialisation

Claude (en tant qu'hôte) envoie une requête initialize avec la version du protocole et les capacités prises en charge.

2. Négociation des capacités

Votre serveur répond avec ses propres capacités, et le client confirme la préparation avec une notification initialized.

3. Découverte d'outils

Claude envoie une requête ListTools. Votre serveur renvoie une liste de définitions d'outils, y compris les schémas d'entrée.

4. Appel d'outil

Lorsque l'utilisateur déclenche l'outil (par exemple, en tapant « saluer John »), Claude envoie une requête CallTool avec des arguments.

Votre serveur le traite et renvoie un message de résultat avec le contenu de la réponse.

Étape 5 : Développez votre écosystème d'outils

Une fois votre serveur opérationnel, vous pouvez étendre ses capacités :

Recherche Web : Intégrer l'API Brave Search
Système de fichiers : Lectures/écritures de fichiers sécurisées
Outils Slack ou GitHub : Activer les fonctionnalités de collaboration
Google Drive : Pièces jointes et contexte de contenu

Par exemple, voici un extrait d'une intégration du serveur Brave Search :

const WEB_SEARCH_TOOL = {
  name: 'brave_web_search',
  description: 'Search the web using Brave.',
  inputSchema: {
    type: 'object',
    properties: {
      query: { type: 'string' },
      count: { type: 'number', default: 10 }
    },
    required: ['query']
  }
};

Options de transport

Bien que Stdio soit le meilleur pour les tests locaux, MCP prend également en charge :

HTTP + SSE : Bon pour les applications web et les services distants
Transports personnalisés : Branchez votre propre adaptateur de transport

Tous utilisent JSON-RPC 2.0 pour l'encodage des messages.

Outils de débogage et de test

Vous pouvez tester votre serveur MCP avec l'outil Inspector open-source :

git clone https://github.com/modelcontextprotocol/inspector

Il permet le traçage des messages, la simulation des requêtes et le débogage des comportements des outils.

Cas d'utilisation concrets

Certains des premiers utilisateurs de MCP incluent :

Sourcegraph Cody : Améliore le contexte de développement
Zed Editor : Intégrations IDE
Claude Desktop : Opérations LLM locales et privées

Ces outils démontrent la puissance de MCP dans les paramètres hors ligne et en ligne, ce qui facilite la personnalisation de la façon dont l'IA comprend son contexte pour les développeurs.

Conclusion

MCP est une avancée significative pour apporter de la structure, de l'évolutivité et de la modularité à la façon dont les LLM interagissent avec les outils et les données. Que vous construisiez un assistant personnel, une aide IDE ou un pipeline de données, MCP offre une norme pérenne pour brancher des capacités externes.

En suivant ce guide, vous avez appris à :

Créer un serveur MCP simple en utilisant TypeScript
L'enregistrer avec Claude Desktop
Comprendre comment les flux de communication des outils
Étendre les fonctionnalités en utilisant des API et des services supplémentaires

Pour les développeurs qui construisent la prochaine génération d'applications améliorées par l'IA, maîtriser MCP est une étape essentielle.

Lectures et ressources complémentaires

Guide de démarrage rapide complet : Model Context Protocol sur Glama.ai
Dépôts GitHub : Outils MCP