Open MCP Client : client MCP basé sur le web pour se connecter rapidement à n'importe quel service MCP.

Introduction générale

Ouvrir MCP Client est un outil open source dont le point fort est qu'il fournit un client MCP (Model Context Protocol) basé sur le web qui permet aux utilisateurs de se connecter à n'importe quel serveur MCP pour chatter sans avoir à l'installer. Il permet également d'intégrer la fonctionnalité de chat dans vos propres applications. Développé par l'équipe de CopilotKit, il combine les fonctionnalités de LangChain LangGraph Le projet est déployé sur la plateforme Vercel, le code est hébergé sur GitHub et a été mis à jour pour la dernière fois le 10 mars 2025. Qu'il s'agisse d'un serveur de test rapide ou du développement d'interactions d'IA personnalisées, cet outil est simple et pratique, en particulier pour les utilisateurs et les développeurs qui aiment une expérience pratique.

Liste des fonctions

• Fournit un client MCP basé sur le web pour se connecter directement à n'importe quel serveur MCP et discuter en temps réel.
• Aucune installation n'est nécessaire et la version web de la fonction peut être utilisée via le navigateur.
• Prise en charge de l'intégration de la fonction de chat dans l'application de l'utilisateur.
• Utiliser la technologie LangGraph pour créer des agents intelligents qui se connectent aux outils du serveur.
• Le code source ouvert est hébergé sur GitHub et peut être consulté et modifié.
• L'interface est basée sur CopilotKit, ce qui garantit la synchronisation de l'interface et de l'état.

Utiliser l'aide

Comment démarrer avec Open MCP Client

Il y a deux façons d'utiliser Open MCP Client : soit par une expérience rapide avec le client MCP basé sur le web, soit en le déployant localement et en l'intégrant dans votre application. Vous trouverez ci-dessous des étapes détaillées pour vous aider à démarrer.

1) Utilisation du client MCP basé sur le web

La version web est la caractéristique principale d'Open MCP Client et convient pour une connexion rapide aux serveurs MCP sans aucune installation.

• Étape 1 : Visiter la version web
  Ouvrez votre navigateur et entrez l'adresse :open-mcp-client.vercel.app. Voici la version web officielle du client MCP déployée par l'équipe CopilotKit sur Vercel, prête à l'emploi.
• Étape 2 : Obtenir l'URL du serveur MCP
  Vous devez disposer d'une adresse URL valide pour le serveur MCP, accessible via la fonction Composition et d'autres plateformes pour l'obtenir. Connectez-vous au site web de Composio, créez ou sélectionnez un serveur MCP, et copiez son URL (généralement au format https://example.com/mcp).
• Étape 3 : Connexion au serveur
  Sur la version web de l'interface, repérez la zone de saisie de l'URL (généralement à un endroit bien visible de la page) et collez l'URL du serveur MCP que vous avez copié ; cliquez sur le bouton "Connecter" et le système essaiera d'établir une connexion. Une fois la connexion établie, l'écran de chat se chargera en quelques secondes.
• Étape 4 : Commencer à chatter
  Une fois la connexion établie, saisissez un message dans le champ de saisie, tel que "Quel temps fait-il aujourd'hui ?" ou "Aidez-moi à écrire du code", puis envoyez-le. ou "Écrivez du code pour moi", puis envoyez-le. Le serveur renverra la réponse en temps réel et l'interface affichera le contenu du dialogue.

2. le déploiement et l'intégration au niveau local

Si vous avez besoin de l'exécuter localement ou d'intégrer la fonctionnalité dans votre projet, vous pouvez suivre les étapes de développement ci-dessous.

• Étape 1 : Cloner le dépôt GitHub
  Exécutez la commande suivante dans le terminal pour télécharger le projet localement :

git clone https://github.com/CopilotKit/open-mcp-client.git

Allez ensuite dans le répertoire du projet :

cd open-mcp-client

• Étape 2 : Configuration des variables d'environnement du répertoire racine
  Dans le répertoire racine du projet, créez le fichier .env Documentation :

touch .env

Ouvrez le fichier et ajoutez le texte suivant (en le remplaçant par votre clé API réelle) :

LANGSMITH_API_KEY=lsv2_...

Cette clé est utilisée pour se connecter au service LangSmith et peut être obtenue en s'enregistrant sur le site web de LangSmith.

• Étape 3 : Configuration des variables d'environnement de l'agent
  entrer dans agent Dossier :

cd agent
touch .env

existent agent/.env est ajouté :

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY est obtenu sur le site web de l'OpenAI et est utilisé pour soutenir la fonction d'agent LangGraph.

• Étape 4 : Installation des dépendances
  Retournez dans le répertoire racine et exécutez :

npm install

ou utiliser pnpm (recommandé) :

pnpm install

Installer les dépendances telles que CopilotKit et LangGraph. Assurez-vous que Node.js est installé localement (version 18 ou supérieure recommandée).

• Étape 5 : Activer le mode développement
  Le projet est divisé en deux parties : la partie frontale (/app) et les agents (/agent) en deux parties, il est recommandé de les faire passer par deux terminaux distincts :
• Borne 1 (extrémité avant) :

  pnpm run dev-frontend
  

• Terminal 2 (Agent) :

  pnpm run dev-agent
  

ou de démarrer les deux avec une seule commande :

pnpm run dev

Après le démarrage, accédez au http://localhost:3000Vous pouvez voir l'interface locale.

• Étape 6 : Test de la connexion et du chat
  Saisissez l'URL du serveur MCP dans l'interface locale (de la même manière que pour la version Web) et cliquez sur Connecter. Une fois la connexion établie, vous pouvez saisir des messages pour tester la fonction de chat.
• Étape 7 : Intégration dans votre application
  Le code de la partie frontale se trouve dans le fichier /app en utilisant l'interface de gestion CopilotKit et la synchronisation des états. Le code de l'agent se trouve dans le dossier /agent pour se connecter au serveur basé sur LangGraph. Vous pouvez réutiliser ce code ou vous référer au README.md de GitHub pour modifier l'intégration.

Fonctionnement détaillé des principales fonctions

• Client MCP basé sur le web
  La version web est la meilleure fonctionnalité, il suffit d'entrer l'URL pour se connecter. Si la connexion échoue, vérifiez si l'URL est correcte ou si le serveur est en ligne. L'interface est pilotée par CopilotKit pour un fonctionnement fluide.
• Chat en direct
  L'interface de chat permet la saisie et l'affichage des réponses en temps réel, tant dans la version web que dans la version locale. Après l'envoi d'un message, l'agent LangGraph traite la demande et appelle l'outil serveur, et les résultats sont affichés automatiquement.
• Débogage et personnalisation
  Exécution locale , outils de développement disponibles dans le navigateur (F12) pour visualiser les logs et les requêtes réseau . Code open source , peut être modifié /app dans le style de la page d'accueil, ou ajuster le /agent La logique du proxy dans le

mise en garde

• La version web repose sur l'Internet et la réactivité du serveur peut être affectée par l'Internet.
• Pour les déploiements locaux, la clé API doit être configurée correctement, sinon l'agent ne fonctionnera pas.
• Les projets sont fréquemment mis à jour et il est recommandé d'utiliser régulièrement les outils suivants git pull Obtenir la dernière version.

En suivant ces étapes, vous pouvez profiter pleinement de la commodité du MCP basé sur le web ou développer des intégrations plus approfondies.