MCP, E-commerce, Demo · · per Michael Wybraniec

Chatbot IA, Serveur MCP construit avec le Protocole de Flux de Travail Agentique pour démo sur Checkatrade.com

Une démonstration complète de comment construire un serveur MCP pour l\'intégration de chatbot e-commerce, avec services de maintenance de chaudières, accès aux données en temps réel et flux de travail automatisés utilisant AWP.

Le projet MCP-in-Chat représente une démonstration complète et prête pour la production de comment les serveurs du Protocole de Contexte de Modèle (MCP) peuvent transformer les interactions de chatbots e-commerce. Cet exemple complet montre un système de maintenance et de vente de chaudières qui connecte des chatbots IA externes (Claude, ChatGPT, Cursor) à la logique métier réelle à travers une architecture sécurisée et évolutive. Construit en utilisant la méthodologie du Protocole de Flux de Travail Agentique (AWP), ce projet démontre comment créer des serveurs MCP sophistiqués qui connectent l'IA conversationnelle aux systèmes d'entreprise.

Le Protocole de Flux de Travail Agentique (AWP) est une méthodologie de développement agentique créée par Michael Wybraniec et maintenue par la communauté overvibing.com. Cette approche systématique assure des résultats de développement cohérents et de haute qualité en fournissant des flux de travail structurés qui préviennent la dérive de contexte appelée overvibing et permettent une livraison rapide et fiable de projets tout en évoluant le développement avec l'IA.

Vidéo Demo

Résultats d'Implémentation

  • Calendrier: 4 heures (incluant les tâches non planifiées)
  • Portée: 100% des fonctionnalités planifiées implémentées
  • Qualité: 100% de succès aux tests
  • Documentation: Complète et compréhensive
  • Prêt pour Demo: Entièrement fonctionnel et testé

Phases de Développement

  1. Configuration du Projet et Architecture de Sécurité (45 minutes)
    • Initialiser le projet Node.js avec TypeScript
    • Configurer l'architecture en couches (MCP → API → Services → Base de Données)
    • Créer des fichiers JSON de données simulées avec contrôles d'accès
    • Définir les interfaces TypeScript et types de sécurité
  2. Développement des Outils MCP Principaux (90 minutes)
    • Implémenter l'outil d'information de chaudières avec validation d'API
    • Implémenter l'outil de planification de maintenance avec contrôles d'accès
    • Implémenter l'outil d'inventaire avec limitation de débit
    • Implémenter l'outil d'achat avec validation de transactions
    • Implémenter l'outil email avec filtrage de contenu
  3. Tests et Préparation de Demo (45 minutes)
    • Tester le Serveur MCP avec des outils locaux
    • Créer des instructions de demo pour l'intégration de chatbot
    • Préparer des flux de conversation d'exemple
    • Créer README avec instructions de configuration et d'utilisation
  4. Intégration de Chatbot Externe (60 minutes)
    • Tester le Serveur MCP avec Claude (si disponible)
    • Tester le Serveur MCP avec ChatGPT (si disponible)
    • Documenter le processus d'intégration et les résultats
    • Créer des matériaux de présentation de demo

Aperçu du Projet

Serveur MCP de Maintenance de Chaudières

Le projet MCP-in-Chat est une démonstration complétée avec succès qui montre comment les serveurs MCP peuvent s'intégrer avec des chatbots externes pour fournir une valeur commerciale réelle. Le système gère les services de maintenance de chaudières, les informations client, la gestion d'inventaire et le traitement des achats à travers une interface conversationnelle.

Fonctionnalités Clés

  • 4 Outils MCP: Information de chaudières, planification de maintenance, traitement d'achat et confirmation par email
  • 4 Endpoints API: Backend RESTful avec authentification et validation
  • 8 Services Simulés: Simulation complète de logique métier avec données réalistes
  • Intégration Externe: Prêt pour les tests avec Claude, ChatGPT et Cursor IDE
  • 100% Couverture de Tests: Suite de tests complète avec 100% de succès
  • Prêt pour Production: Middleware de sécurité, limitation de débit et gestion d'erreurs

Aperçu de l'Architecture

---
header: MCP-in-Chat System Architecture
legend:
  - color: "#3B82F6"
    text: "External Systems"
  - color: "#8B5CF6"
    text: "MCP Protocol Layer"
  - color: "#10B981"
    text: "API & Security Layer"
  - color: "#F59E0B"
    text: "Business Services"
  - color: "#EF4444"
    text: "Data Layer"
---
graph TD
    subgraph "External Chatbots"
        A[Claude AI]
        B[ChatGPT]
        C[Cursor IDE]
    end
    
    subgraph "MCP Server Layer"
        D[MCP Server]
        E[Boiler Info Tool]
        F[Maintenance Tool]
        G[Purchase Tool]
        H[Email Tool]
    end
    
    subgraph "Backend API Layer"
        I[Express API Server]
        J[Authentication]
        K[Validation]
        L[Rate Limiting]
    end
    
    subgraph "Business Services"
        M[Customer Service]
        N[Boiler Service]
        O[Payment Service]
        P[Email Service]
    end
    
    subgraph "Mock Data Layer"
        Q[Customers JSON]
        R[Boilers JSON]
        S[Inventory JSON]
        T[Orders JSON]
    end
    
    A --> D
    B --> D
    C --> D
    D --> E
    D --> F
    D --> G
    D --> H
    E --> I
    F --> I
    G --> I
    H --> I
    I --> J
    J --> K
    K --> L
    L --> M
    L --> N
    L --> O
    L --> P
    M --> Q
    N --> R
    O --> S
    P --> T
    
    classDef external fill:#3B82F6,stroke:#1E40AF,stroke-width:2px,color:#fff
    classDef mcp fill:#8B5CF6,stroke:#7C3AED,stroke-width:2px,color:#fff
    classDef api fill:#10B981,stroke:#059669,stroke-width:2px,color:#fff
    classDef service fill:#F59E0B,stroke:#D97706,stroke-width:2px,color:#fff
    classDef data fill:#EF4444,stroke:#DC2626,stroke-width:2px,color:#fff
    
    class A,B,C external
    class D,E,F,G,H mcp
    class I,J,K,L api
    class M,N,O,P service
    class Q,R,S,T data

Le serveur MCP expose quatre outils spécialisés qui permettent aux chatbots d'interagir avec le système de maintenance de chaudières. Chaque outil est conçu avec une logique métier spécifique et des contrôles de sécurité.

Outil d'Information de Chaudières

// Outil MCP: Obtenir les détails de chaudières du client et informations de garantie
const boilerInfoTool = {
  name: "boiler-info",
  description: "Obtenir les informations de chaudières du client et détails de garantie",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" }
    },
    required: ["customer_id"]
  }
}

Cas d'Usage: Quand un client demande "Quel est le statut de garantie de ma chaudière?", le chatbot peut récupérer des informations détaillées sur son modèle de chaudière spécifique, date d'installation, couverture de garantie et historique de maintenance.

Outil de Planification de Maintenance

// Outil MCP: Planifier les services de maintenance avec considération météo
const maintenanceTool = {
  name: "maintenance",
  description: "Planifier les services de maintenance",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" },
      service_type: { type: "string", enum: ["routine", "emergency"] },
      preferred_date: { type: "string" }
    },
    required: ["customer_id", "service_type"]
  }
}

Cas d'Usage: Les clients peuvent demander la planification de maintenance, et le système considère automatiquement les conditions météorologiques, la disponibilité des techniciens et les préférences client pour réserver des rendez-vous optimaux.

Outil de Traitement d'Achat

// Outil MCP: Traiter les commandes d'achat de chaudières
const purchaseTool = {
  name: "purchase",
  description: "Traiter les commandes d'achat de chaudières",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" },
      boiler_model: { type: "string" },
      installation_date: { type: "string" }
    },
    required: ["customer_id", "boiler_model"]
  }
}

Cas d'Usage: Quand les clients veulent mettre à niveau leur chaudière, le chatbot peut montrer les modèles disponibles, comparer les spécifications, traiter les paiements et planifier l'installation.

Outil de Confirmation par Email

// Outil MCP: Envoyer des emails de confirmation
const emailTool = {
  name: "email",
  description: "Envoyer des emails de confirmation",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" },
      email_type: { type: "string", enum: ["maintenance", "purchase", "reminder"] }
    },
    required: ["customer_id", "email_type"]
  }
}

Cas d'Usage: Après toute réservation de service ou achat, le système envoie automatiquement des emails de confirmation appropriés avec des détails pertinents et les prochaines étapes.

Le projet MCP-in-Chat inclut des scénarios de demo complets qui montrent les modèles d'utilisation du monde réel et démontrent les capacités du système.

Scénario 1: Requête d'Information de Chaudière

Client: "Quel est le statut de garantie de ma chaudière?"

Réponse du Chatbot:

Je vais vérifier les informations de votre chaudière immédiatement.

Selon vos dossiers, vous avez une Worcester Bosch 8000 Style installée le 15 mars 2023. 
Votre garantie est valide jusqu'au 15 mars 2028 (garantie fabricant de 5 ans).

Détails clés:
- Modèle: Worcester Bosch 8000 Style 30kW
- Date d'Installation: 15 mars 2023
- Statut de Garantie: Actif (3 ans restants)
- Dernier Service: 12 janvier 2024
- Prochain Service: 12 janvier 2025

Voulez-vous que je planifie votre service annuel ou vérifie s'il y a des réclamations de garantie?

Scénario 2: Planification de Maintenance

Client: "J'ai besoin de planifier la maintenance de ma chaudière"

Réponse du Chatbot:

Je vais vous aider à planifier la maintenance de votre chaudière. Laissez-moi vérifier votre planning actuel et les créneaux disponibles.

Selon votre localisation et préférences, j'ai trouvé ces rendez-vous disponibles:

Semaine Prochaine:
- Mardi 21 janvier: 9h00 - 11h00
- Jeudi 23 janvier: 14h00 - 16h00

Les prévisions météo montrent des conditions claires pour les deux jours. Votre technicien préféré, John Smith (enregistré Gas Safe), est disponible mardi.

Je recommande mardi à 9h00. Le service inclura:
- Inspection complète du système
- Vérifications de sécurité
- Tests d'efficacité
- Nettoyage des filtres

Coût: £120 (inclut pièces et main d'œuvre)

Dois-je réserver ce rendez-vous pour vous?

Scénario 3: Achat de Mise à Niveau de Chaudière

Client: "Je veux mettre à niveau ma chaudière vers un modèle plus efficace"

Réponse du Chatbot:

Excellent choix! Laissez-moi vous montrer les modèles les plus efficaces disponibles et vous aider avec la mise à niveau.

Chaudières Haute Efficacité Disponibles:

1. **Worcester Bosch 8000 Style** (Classe A)
   - Efficacité: 94%
   - Prix: £2,800
   - Garantie 10 ans
   - Thermostat intelligent inclus

2. **Vaillant ecoTEC plus** (Classe A)
   - Efficacité: 92%
   - Prix: £2,600
   - Garantie 7 ans
   - Design compact

3. **Ideal Logic+** (Classe A)
   - Efficacité: 90%
   - Prix: £2,200
   - Garantie 10 ans
   - Certifié Quiet Mark

Basé sur votre système actuel, je recommande la Worcester Bosch 8000 Style pour une efficacité et fiabilité maximales.

Voulez-vous que je:
1. Montre les spécifications détaillées
2. Vérifie la disponibilité d'installation
3. Traite l'achat
4. Compare avec votre chaudière actuelle

Le projet MCP-in-Chat implémente une architecture sophistiquée en couches qui assure la sécurité, l'évolutivité et la maintenabilité.

Architecture de Sécurité

---
header: MCP Security Flow and Authentication
---
sequenceDiagram
    participant Chatbot as External Chatbot
    participant MCP as MCP Server
    participant API as Backend API
    participant Auth as Authentication
    participant Service as Business Service
    participant DB as Mock Database
    
    rect rgb(59, 130, 246)
    note right of Chatbot: External Systems
    Chatbot->>+MCP: Request with customer_id
    end
    
    rect rgb(139, 92, 246)
    note right of MCP: MCP Protocol Layer
    MCP->>+API: API call with validation
    end
    
    rect rgb(16, 185, 129)
    note right of API: Security & API Layer
    API->>+Auth: Verify authentication
    Auth-->>-API: Authentication result
    end
    
    rect rgb(245, 158, 11)
    note right of Service: Business Logic Layer
    API->>+Service: Process business logic
    Service->>+DB: Query with access controls
    end
    
    rect rgb(239, 68, 68)
    note right of DB: Data Storage Layer
    DB-->>-Service: Return filtered data
    end
    
    rect rgb(245, 158, 11)
    note right of Service: Business Logic Layer
    Service-->>-API: Processed response
    end
    
    rect rgb(16, 185, 129)
    note right of API: Security & API Layer
    API-->>-MCP: API response
    end
    
    rect rgb(139, 92, 246)
    note right of MCP: MCP Protocol Layer
    MCP-->>-Chatbot: Formatted result
    end
    
    Note over Chatbot,DB: Secure communication flow with<br/>authentication at each layer

Implémentation des Services Simulés

Le projet inclut 8 services simulés complets qui simulent des opérations métier réelles:

  1. Service Client: Gère les profils clients et préférences
  2. Service Chaudières: Gère les informations de chaudières et données de garantie
  3. Service Paiement: Traite les transactions et validation de paiements
  4. Service Email: Gère la communication et notifications
  5. Service Météo: Fournit les données météo pour la planification
  6. Service Garantie: Gère les informations de garantie et réclamations
  7. Service Prédiction IA: Simule les prédictions de maintenance
  8. Service Technicien: Gère la disponibilité et planification des techniciens

Structure de Couche de Données

{
  "customers": {
    "CUST001": {
      "name": "John Smith",
      "email": "john.smith@email.com",
      "address": "123 Main St, London",
      "phone": "+44 20 1234 5678",
      "preferences": {
        "contact_method": "email",
        "appointment_time": "morning",
        "technician_preference": "John Smith"
      }
    }
  },
  "boilers": {
    "BOIL001": {
      "customer_id": "CUST001",
      "model": "Worcester Bosch 8000 Style",
      "installation_date": "2023-03-15",
      "warranty_expiry": "2028-03-15",
      "last_service": "2024-01-12",
      "next_service_due": "2025-01-12"
    }
  }
}

Aperçu de la Structure de Données: Le système utilise des fichiers JSON pour simuler une vraie base de données, avec des données structurées pour les clients, chaudières, planning de maintenance et commandes. Chaque enregistrement inclut des informations complètes nécessaires pour les interactions du chatbot.

Le projet MCP-in-Chat inclut une suite de tests complète qui assure la fiabilité et la fonctionnalité dans tous les composants.

Couverture de Tests

  • Outils MCP: Tous les 4 outils testés avec divers scénarios d'entrée
  • Endpoints API: Tests complets d'API REST avec authentification
  • Gestion d'Erreurs: Validation des réponses d'erreur et cas limites
  • Intégration: Tests de flux de travail de bout en bout
  • Performance: Tests de temps de réponse et charge

Résumé des Résultats de Tests

📊 RÉSUMÉ DES TESTS
============================================================
Total des Tests: 5
Réussis: 5 ✅
Échoués: 0 ❌
Taux de Succès: 100.0%

📋 RÉSULTATS DÉTAILLÉS
------------------------------------------------------------
1. boiler-info: ✅ RÉUSSI
2. maintenance-get: ✅ RÉUSSI
3. maintenance-schedule: ✅ RÉUSSI
4. purchase: ✅ RÉUSSI
5. email: ✅ RÉUSSI

🎉 Tous les tests ont réussi! Les outils MCP fonctionnent correctement.

Commandes de Test Rapide

# Exécuter tous les tests d'outils MCP
npm test

# Tester des composants spécifiques
npm run test:api          # Tests API backend
npm run test:mcp          # Intégration MCP Cursor
npm run test:protocol     # Validation protocole MCP
npm run test:compiled     # Test version compilée
npm run test:connection   # Test connexion
npm run test:quick        # Vérification rapide santé

Le projet MCP-in-Chat est conçu pour être facilement accessible aux développeurs qui veulent comprendre et implémenter des serveurs MCP pour leurs propres cas d'usage.

Prérequis

  • Node.js 18+ et npm
  • Connaissance de TypeScript
  • Compréhension de base du protocole MCP
  • Accès aux chatbots externes (Claude, ChatGPT, Cursor)

Installation

# Cloner le repository
git clone https://github.com/michaelwybraniec/mcp-in-chat.git
cd mcp-in-chat

# Installer les dépendances
npm install

# Construire le projet
npm run build

# Démarrer le serveur API
npm run start:api

# Démarrer le serveur MCP (dans un autre terminal)
npm run start:mcp

Intégration avec Chatbots Externes

Le serveur MCP est conçu pour fonctionner avec n'importe quel chatbot compatible MCP:

  1. Claude Desktop: Ajouter le serveur MCP à la configuration de Claude
  2. ChatGPT: Utiliser le serveur MCP comme outil personnalisé
  3. Cursor IDE: Intégrer directement avec l'environnement de développement

Personnalisation

Le projet est conçu pour être facilement personnalisable pour différents domaines métier:

  1. Remplacer les Services Simulés: Connecter aux APIs et bases de données réelles
  2. Ajouter de Nouveaux Outils: Étendre le serveur MCP avec fonctionnalité supplémentaire
  3. Modifier la Logique Métier: Adapter les services pour votre cas d'usage spécifique
  4. Améliorer la Sécurité: Ajouter des couches supplémentaires d'authentification et autorisation

Le projet MCP-in-Chat fournit des insights précieux sur la construction de serveurs MCP prêts pour la production et leur intégration avec des chatbots externes.

Facteurs Clés de Succès

  1. Architecture en Couches: Séparation claire entre outils MCP, couche API et logique métier
  2. Tests Complets: 100% de couverture de tests assure la fiabilité
  3. Sécurité en Premier: Authentification, validation et limitation de débit dès le début
  4. Documentation: Documentation complète pour une intégration facile
  5. Services Simulés: Simulation de données réaliste pour développement et tests

Défis Communs et Solutions

  1. Complexité d'Intégration Externe
    • Défi: Tester avec des chatbots externes peut être difficile
    • Solution: Suite de tests locaux complète avec scénarios réalistes
  2. Implémentation de Sécurité
    • Défi: Assurer une communication sécurisée entre composants
    • Solution: Sécurité en couches avec authentification à chaque niveau
  3. Gestion des Données
    • Défi: Maintenir un état cohérent entre services
    • Solution: Couche de données centralisée avec contrôles d'accès
  4. Gestion d'Erreurs
    • Défi: Gestion élégante des erreurs dans les interfaces conversationnelles
    • Solution: Réponses d'erreur structurées avec orientation actionnable

Considérations de Performance

  • Temps de Réponse: Les outils MCP doivent répondre en 2-3 secondes
  • Limitation de Débit: Implémenter des limites de débit appropriées pour prévenir l'abus
  • Cache: Mettre en cache les données fréquemment accédées pour améliorer les performances
  • Monitoring: Implémenter logging et monitoring complets

Le projet MCP-in-Chat sert de base pour des implémentations plus sophistiquées de serveurs MCP et fournit une feuille de route pour le développement futur.

Améliorations Planifiées

  1. Intégration de Services Réels
    • Remplacer les services simulés par des APIs réelles
    • Intégrer avec des passerelles de paiement
    • Connecter aux bases de données clients
    • Implémenter des services email réels
  2. Fonctionnalités Avancées
    • Support multilingue
    • Intégration vocale
    • Intégration d'application mobile
    • Analyses avancées et rapports
  3. Améliorations d'Évolutivité
    • Architecture de microservices
    • Équilibrage de charge
    • Optimisation de base de données
    • Stratégies de cache
  4. Améliorations de Sécurité
    • Intégration OAuth 2.0
    • Contrôle d'accès basé sur les rôles
    • Logging d'audit
    • Fonctionnalités de conformité

Applications d'Industrie

L'architecture MCP-in-Chat peut être adaptée pour diverses industries:

  1. Santé: Planification de rendez-vous patients et accès aux dossiers médicaux
  2. Finance: Gestion de comptes et traitement de transactions
  3. Éducation: Inscription aux cours et services étudiants
  4. Immobilier: Recherche de propriétés et gestion de réservations
  5. Voyage: Réservation de vols et gestion d'itinéraires

Le projet MCP-in-Chat démontre le pouvoir et le potentiel des serveurs du Protocole de Contexte de Modèle dans la création de systèmes d'IA conversationnelle sophistiqués. En fournissant un exemple complet et prêt pour la production, il sert à la fois de ressource d'apprentissage et de base pour des implémentations du monde réel.

Points Clés

  1. Les Serveurs MCP Permettent une Valeur Commerciale Réelle: Le projet montre comment les serveurs MCP peuvent connecter l'IA conversationnelle aux systèmes d'entreprise
  2. Le Développement Systématique Fonctionne: La méthodologie AWP a assuré un développement cohérent et de haute qualité
  3. La Sécurité est Primordiale: L'architecture de sécurité en couches est essentielle pour les systèmes de production
  4. Les Tests sont Critiques: Les tests complets assurent la fiabilité et la fonctionnalité
  5. La Documentation Compte: La documentation complète permet une adoption et personnalisation faciles

Prochaines Étapes

Pour les développeurs intéressés par les serveurs MCP:

  1. Étudier le Code: Examiner le repository MCP-in-Chat pour comprendre l'implémentation
  2. Exécuter le Demo: Configurer le projet localement et tester avec des chatbots externes
  3. Personnaliser: Adapter l'architecture pour votre cas d'usage spécifique
  4. Contribuer: Partager les améliorations et améliorations avec la communauté

Le projet MCP-in-Chat représente un pas significatif vers l'avant dans la réalisation des serveurs MCP accessibles et pratiques pour les applications du monde réel. En fournissant un exemple complet et fonctionnel, il réduit la barrière d'entrée pour les développeurs qui veulent intégrer l'IA conversationnelle avec leurs systèmes métier.


Ressources:

Michael Wybraniec

Michael Wybraniec

Freelance, Serveurs MCP, Développement Full-Stack, Architecture