mcp-ui : une interface de chat IA propre basée sur le protocole MCP

Introduction générale

mcp-ui est un projet open source créé par le développeur machaojin1917939763, basé sur le protocole Model Context Protocol (MCP). Il s'agit d'une application de chat intelligente qui prend en charge à la fois les environnements Web et de bureau. mcp est Anthropique mcp-ui est un protocole ouvert qui permet aux modèles d'IA d'appeler des outils et des services externes. mcp-ui intègre les API d'OpenAI et d'Anthropic, et fournit une interface de chat propre et moderne. Les utilisateurs peuvent l'utiliser pour dialoguer avec l'IA et invoquer des fonctions telles que le navigateur et la manipulation de fichiers. Construit avec Vue.js et Electron, le projet prend en charge le déploiement multiplateforme et convient aux développeurs ou aux passionnés d'IA.

Liste des fonctions

• Fournit une interface de chat propre et moderne avec le support de Markdown et de la mise en évidence du code.
• adjuvant MCP l'IA peut faire appel à des outils externes tels que l'automatisation du navigateur et la manipulation de fichiers.
• Compatible avec les API d'OpenAI et d'Anthropic, avec des modèles sélectionnables par l'utilisateur.
• Permet des configurations personnalisées, y compris des clés API, des URL de base et des options de modèle.
• Prise en charge de l'ajout d'outils personnalisés pour étendre les fonctionnalités.
• Une version de bureau de l'application est disponible et est compatible avec Windows, Mac et Linux.
• Intégration des services d'arrière-plan de MCP pour soutenir les opérations locales.

Utiliser l'aide

mcp-ui est un outil de chat open source que les utilisateurs doivent déployer via le code source. Vous trouverez ci-dessous un guide d'installation et d'utilisation détaillé pour vous aider à démarrer rapidement.

Processus d'installation

1. Préparation de l'environnement
   Avant de commencer, assurez-vous que votre ordinateur remplit les conditions suivantes :
   • Node.js(version 16.0.0 ou supérieure).
   • npm(version 8.0.0 ou supérieure).
   • Git (pour télécharger du code).
   • Navigateurs modernes (par exemple Chrome, Firefox, Safari, Edge dernières versions).
   • Systèmes pris en charge pour le bureau : Windows 10+, macOS 10.15+ ou Ubuntu 20.04+.
     Vérifiez que l'environnement est prêt à fonctionner :

   node -v
   npm -v
   git --version

2. Télécharger le code source
   Clonez le code localement en entrant la commande suivante dans le terminal :

   git clone https://github.com/machaojin1917939763/mcp-ui.git
   

   Allez ensuite dans le répertoire du projet :

   cd mcp-ui
   

3. Installation des dépendances
   Exécuter dans le répertoire du projet :

   npm install
   

   Cela installera les composants nécessaires tels que Vue.js, Electron, etc. Le processus peut prendre quelques minutes.

4. Configuration des variables d'environnement
   Copiez le fichier de configuration de l'exemple et modifiez-le :

   cp .env.example .env
   

   Ouvrir avec un éditeur de texte .env, remplissez le formulaire suivant :

   VITE_API_KEY=your_api_key_here        # 你的 OpenAI 或 Anthropic API 密钥
   VITE_MODEL_PROVIDER=openai            # 或 anthropic
   MCP_SERVER_PORT=3001                  # MCP 服务端口，默认 3001
   

   Enregistrez et fermez le fichier.

5. lancer une application
   • Version web: :
     Exécutez le front-end sur un terminal :

     npm run dev
     

     Exécutez le backend MCP sur un autre terminal :

     npm run mcp:server
     

     Ouvrez http://localhost:5173 dans votre navigateur (les ports peuvent varier, voir les invites du terminal).

   • version de bureau: :
     Exécutez la commande suivante pour lancer le mode de développement d'Electron :

     npm run electron:dev
     

     La fenêtre de l'application de bureau s'ouvre automatiquement.

6. Construire la version de production (optionnel)
   • Version web :

     npm run build
     

     Les fichiers générés se trouvent dans le répertoire dist qui peut être déployé sur un serveur statique.

   • Version de bureau :

     npm run electron:build          # 构建所有平台
     npm run electron:buildwin       # Windows
     npm run electron:buildmac       # macOS
     npm run electron:buildlinux     # Linux
     

     Les résultats de la construction sont disponibles dans la base de données dist_electron Dossier.

Principales fonctions

modèle de configuration

• Ouvrez l'application et cliquez sur l'icône Paramètres dans le coin supérieur droit (⚙️).
• Sélectionnez dans le panneau Paramètres :
  • Fournisseurs de modèles (OpenAI ou Anthropic).
  • Saisissez la clé API (vous pouvez l'obtenir sur le site officiel d'OpenAI ou d'Anthropic).
  • Définir l'URL de base de l'API (facultatif, la valeur par défaut est correcte).
  • Sélectionnez le modèle spécifique (par exemple GPT-4 ou Claude).
• Cliquez sur Enregistrer pour que la configuration prenne effet.

Utiliser la fonction de chat

• Saisissez une question ou une commande dans le champ de saisie situé en bas de l'écran.
• Appuyez sur la touche Entrée ou cliquez sur le bouton Envoyer et l'IA vous répondra.
• Le formatage Markdown est pris en charge et le code est mis en évidence.
• Exemple : si vous entrez "Aidez-moi à vérifier le temps qu'il fait à Pékin aujourd'hui", l'IA appellera l'outil météorologique pour vous renvoyer le résultat.

Appel à outils MCP

• Les outils suivants sont intégrés à mcp-ui :
  • Automatisation du navigateur : tapez "open Google search xAI" et l'IA contrôlera l'exécution du navigateur.
  • Météo : entrez "Quel temps fait-il à Shanghai ?" et obtenez des données en temps réel.
  • Recherche d'actualités : entrez "actualités technologiques récentes" pour obtenir le contenu le plus récent.
  • Opérations sur les fichiers (version bureau) : entrez "read desktop/test.txt" et l'IA vous renverra le contenu du fichier.
• Aucune action supplémentaire n'est requise, il suffit de faire la demande directement dans la boîte de dialogue.

Fonction en vedette Fonctionnement

Expérience du bureau

• La version de bureau est mise en œuvre via Electron et peut être exécutée sans navigateur après l'installation.
• Dans la version de bureau, la manipulation des fichiers est plus facile grâce à l'accès direct au système de fichiers local.
• La méthode d'utilisation est la même que pour la version Web, et l'interface se charge automatiquement après le lancement.

Outils de personnalisation

• compilateur mcp_server.js, en ajoutant de nouveaux outils.
• Exemple : ajouter un outil de calcul :

  const tools = [
  {
  name: "calculator",
  description: "简单计算器",
  parameters: {
  type: "object",
  properties: {
  expression: { type: "string", description: "计算表达式，如 2+3" }
  },
  required: ["expression"]
  }
  }
  ];
  

• Redémarrer le service MCP (npm run mcp:server), peuvent être utilisés dans le chat.

mise en garde

• Les clés d'API doivent être stockées correctement pour éviter les fuites.
• Si le démarrage échoue, vérifiez que les ports (5173 et 3001 par défaut) ne sont pas occupés.
• Les versions de bureau peuvent nécessiter plus d'espace disque pour garantir des ressources système adéquates.

Grâce à ces étapes, vous pouvez facilement déployer et utiliser mcp-ui pour interagir avec l'IA et invoquer des outils externes.

scénario d'application

1. Assistant personnel
   Utilisez mcp-ui pour consulter la météo, rechercher des informations ou gérer des fichiers afin d'améliorer votre efficacité au quotidien.
2. Test des développeurs
   Les développeurs peuvent l'utiliser pour tester les protocoles MCP et les modèles d'intelligence artificielle et vérifier rapidement l'efficacité des appels d'outils.
3. Apprentissage éducatif
   Les étudiants ou les chercheurs apprennent comment l'IA interagit avec des services externes grâce à mcp-ui, dont l'interface est intuitive et facile à comprendre.

QA

1. Quels sont les modèles pris en charge par mcp-ui ?
   Tous les modèles compatibles avec l'API d'OpenAI et d'Anthropic sont pris en charge, et les utilisateurs peuvent sélectionner des modèles spécifiques dans les paramètres.
2. Quelle est la différence entre les versions Desktop et Web ?
   La version de bureau ne nécessite pas de navigateur et prend en charge les opérations sur les fichiers locaux ; la version web est plus légère et convient à une utilisation en ligne.
3. Comment ajouter un nouvel outil ?
   modifications mcp_server.jsDéfinissez le nom et les paramètres de l'outil, puis redémarrez le service pour qu'il prenne effet.