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

Chatbot IA, Servidor MCP construido con Protocolo de Flujo de Trabajo Agéntico para demo en Checkatrade.com

Una demostración completa de cómo construir un servidor MCP para integración de chatbot de e-commerce, con servicios de mantenimiento de calderas, acceso a datos en tiempo real y flujos de trabajo automatizados usando AWP.

El proyecto MCP-in-Chat representa una demostración completa y lista para producción de cómo los servidores del Protocolo de Contexto del Modelo (MCP) pueden transformar las interacciones de chatbots de e-commerce. Este ejemplo integral muestra un sistema de mantenimiento y ventas de calderas que conecta chatbots de IA externos (Claude, ChatGPT, Cursor) con lógica de negocio real a través de una arquitectura segura y escalable. Construido usando la metodología del Protocolo de Flujo de Trabajo Agéntico (AWP), este proyecto demuestra cómo crear servidores MCP sofisticados que conectan la IA conversacional con sistemas empresariales.

El Protocolo de Flujo de Trabajo Agéntico (AWP) es una metodología de desarrollo agéntico creada por Michael Wybraniec y mantenida por la comunidad overvibing.com. Este enfoque sistemático asegura resultados de desarrollo consistentes y de alta calidad al proporcionar flujos de trabajo estructurados que previenen la deriva de contexto llamada overvibing y permiten entrega rápida y confiable de proyectos mientras escalan el desarrollo con IA.

Video Demo

Resultados de Implementación

  • Cronograma: 4 horas (incluyendo tareas no planificadas)
  • Alcance: 100% de características planificadas implementadas
  • Calidad: 100% de éxito en pruebas
  • Documentación: Completa y comprensiva
  • Listo para Demo: Totalmente funcional y probado

Fases de Desarrollo

  1. Configuración del Proyecto y Arquitectura de Seguridad (45 minutos)
    • Inicializar proyecto Node.js con TypeScript
    • Configurar arquitectura en capas (MCP → API → Servicios → Base de Datos)
    • Crear archivos JSON de datos simulados con controles de acceso
    • Definir interfaces TypeScript y tipos de seguridad
  2. Desarrollo de Herramientas MCP Principales (90 minutos)
    • Implementar herramienta de información de calderas con validación de API
    • Implementar herramienta de programación de mantenimiento con controles de acceso
    • Implementar herramienta de inventario con limitación de tasa
    • Implementar herramienta de compra con validación de transacciones
    • Implementar herramienta de email con filtrado de contenido
  3. Pruebas y Preparación de Demo (45 minutos)
    • Probar Servidor MCP con herramientas locales
    • Crear instrucciones de demo para integración de chatbot
    • Preparar flujos de conversación de muestra
    • Crear README con instrucciones de configuración y uso
  4. Integración de Chatbot Externo (60 minutos)
    • Probar Servidor MCP con Claude (si está disponible)
    • Probar Servidor MCP con ChatGPT (si está disponible)
    • Documentar proceso de integración y resultados
    • Crear materiales de presentación de demo

Resumen del Proyecto

Servidor MCP de Mantenimiento de Calderas

El proyecto MCP-in-Chat es una demostración completada exitosamente que muestra cómo los servidores MCP pueden integrarse con chatbots externos para proporcionar valor comercial real. El sistema maneja servicios de mantenimiento de calderas, información del cliente, gestión de inventario y procesamiento de compras a través de una interfaz conversacional.

Características Principales

  • 4 Herramientas MCP: Información de calderas, programación de mantenimiento, procesamiento de compras y confirmación por email
  • 4 Endpoints API: Backend RESTful con autenticación y validación
  • 8 Servicios Simulados: Simulación completa de lógica de negocio con datos realistas
  • Integración Externa: Listo para pruebas con Claude, ChatGPT y Cursor IDE
  • 100% Cobertura de Pruebas: Suite de pruebas comprensiva con 100% de éxito
  • Listo para Producción: Middleware de seguridad, limitación de tasa y manejo de errores

Resumen de Arquitectura

---
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

El servidor MCP expone cuatro herramientas especializadas que permiten a los chatbots interactuar con el sistema de mantenimiento de calderas. Cada herramienta está diseñada con lógica de negocio específica y controles de seguridad.

Herramienta de Información de Calderas

// Herramienta MCP: Obtener detalles de calderas del cliente e información de garantía
const boilerInfoTool = {
  name: "boiler-info",
  description: "Obtener información de calderas del cliente y detalles de garantía",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" }
    },
    required: ["customer_id"]
  }
}

Caso de Uso: Cuando un cliente pregunta "¿Cuál es el estado de garantía de mi caldera?", el chatbot puede recuperar información detallada sobre su modelo específico de caldera, fecha de instalación, cobertura de garantía e historial de mantenimiento.

Herramienta de Programación de Mantenimiento

// Herramienta MCP: Programar servicios de mantenimiento con consideración del clima
const maintenanceTool = {
  name: "maintenance",
  description: "Programar servicios de mantenimiento",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" },
      service_type: { type: "string", enum: ["routine", "emergency"] },
      preferred_date: { type: "string" }
    },
    required: ["customer_id", "service_type"]
  }
}

Caso de Uso: Los clientes pueden solicitar programación de mantenimiento, y el sistema automáticamente considera condiciones climáticas, disponibilidad de técnicos y preferencias del cliente para reservar citas óptimas.

Herramienta de Procesamiento de Compra

// Herramienta MCP: Procesar órdenes de compra de calderas
const purchaseTool = {
  name: "purchase",
  description: "Procesar órdenes de compra de calderas",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" },
      boiler_model: { type: "string" },
      installation_date: { type: "string" }
    },
    required: ["customer_id", "boiler_model"]
  }
}

Caso de Uso: Cuando los clientes quieren actualizar su caldera, el chatbot puede mostrar modelos disponibles, comparar especificaciones, procesar pagos y programar instalación.

Herramienta de Confirmación por Email

// Herramienta MCP: Enviar emails de confirmación
const emailTool = {
  name: "email",
  description: "Enviar emails de confirmación",
  inputSchema: {
    type: "object",
    properties: {
      customer_id: { type: "string" },
      email_type: { type: "string", enum: ["maintenance", "purchase", "reminder"] }
    },
    required: ["customer_id", "email_type"]
  }
}

Caso de Uso: Después de cualquier reserva de servicio o compra, el sistema automáticamente envía emails de confirmación apropiados con detalles relevantes y próximos pasos.

El proyecto MCP-in-Chat incluye escenarios de demo comprensivos que muestran patrones de uso del mundo real y demuestran las capacidades del sistema.

Escenario 1: Consulta de Información de Caldera

Cliente: "¿Cuál es el estado de garantía de mi caldera?"

Respuesta del Chatbot:

Revisaré la información de tu caldera inmediatamente.

Según tus registros, tienes una Worcester Bosch 8000 Style instalada el 15 de marzo de 2023. 
Tu garantía es válida hasta el 15 de marzo de 2028 (garantía del fabricante de 5 años).

Detalles clave:
- Modelo: Worcester Bosch 8000 Style 30kW
- Fecha de Instalación: 15 de marzo de 2023
- Estado de Garantía: Activa (3 años restantes)
- Último Servicio: 12 de enero de 2024
- Próximo Servicio: 12 de enero de 2025

¿Te gustaría que programe tu servicio anual o verifique si hay reclamos de garantía?

Escenario 2: Programación de Mantenimiento

Cliente: "Necesito programar mantenimiento para mi caldera"

Respuesta del Chatbot:

Te ayudo a programar mantenimiento para tu caldera. Déjame revisar tu horario actual y espacios disponibles.

Según tu ubicación y preferencias, encontré estas citas disponibles:

Próxima Semana:
- Martes, 21 de enero: 9:00 AM - 11:00 AM
- Jueves, 23 de enero: 2:00 PM - 4:00 PM

El pronóstico del clima muestra condiciones claras para ambos días. Tu técnico preferido, John Smith (registrado Gas Safe), está disponible el martes.

Recomiendo martes a las 9:00 AM. El servicio incluirá:
- Inspección completa del sistema
- Verificaciones de seguridad
- Pruebas de eficiencia
- Limpieza de filtros

Costo: £120 (incluye repuestos y mano de obra)

¿Reservo esta cita para ti?

Escenario 3: Compra de Actualización de Caldera

Cliente: "Quiero actualizar mi caldera a un modelo más eficiente"

Respuesta del Chatbot:

¡Excelente elección! Déjame mostrarte los modelos más eficientes disponibles y ayudarte con la actualización.

Calderas de Alta Eficiencia Disponibles:

1. **Worcester Bosch 8000 Style** (Clasificación A)
   - Eficiencia: 94%
   - Precio: £2,800
   - Garantía de 10 años
   - Termostato inteligente incluido

2. **Vaillant ecoTEC plus** (Clasificación A)
   - Eficiencia: 92%
   - Precio: £2,600
   - Garantía de 7 años
   - Diseño compacto

3. **Ideal Logic+** (Clasificación A)
   - Eficiencia: 90%
   - Precio: £2,200
   - Garantía de 10 años
   - Certificado Quiet Mark

Basándome en tu sistema actual, recomiendo la Worcester Bosch 8000 Style para máxima eficiencia y confiabilidad.

¿Te gustaría que:
1. Muestre especificaciones detalladas
2. Verifique disponibilidad de instalación
3. Procese la compra
4. Compare con tu caldera actual

El proyecto MCP-in-Chat implementa una arquitectura sofisticada en capas que asegura seguridad, escalabilidad y mantenibilidad.

Arquitectura de Seguridad

---
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

Implementación de Servicios Simulados

El proyecto incluye 8 servicios simulados comprensivos que simulan operaciones de negocio reales:

  1. Servicio de Cliente: Gestiona perfiles de clientes y preferencias
  2. Servicio de Calderas: Maneja información de calderas y datos de garantía
  3. Servicio de Pago: Procesa transacciones y validación de pagos
  4. Servicio de Email: Gestiona comunicación y notificaciones
  5. Servicio de Clima: Proporciona datos climáticos para programación
  6. Servicio de Garantía: Maneja información de garantía y reclamos
  7. Servicio de Predicción IA: Simula predicciones de mantenimiento
  8. Servicio de Técnico: Gestiona disponibilidad y programación de técnicos

Estructura de Capa de Datos

{
  "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"
    }
  }
}

Resumen de Estructura de Datos: El sistema usa archivos JSON para simular una base de datos real, con datos estructurados para clientes, calderas, horarios de mantenimiento y órdenes. Cada registro incluye información comprensiva necesaria para las interacciones del chatbot.

El proyecto MCP-in-Chat incluye una suite de pruebas comprensiva que asegura confiabilidad y funcionalidad en todos los componentes.

Cobertura de Pruebas

  • Herramientas MCP: Todas las 4 herramientas probadas con varios escenarios de entrada
  • Endpoints API: Pruebas completas de API REST con autenticación
  • Manejo de Errores: Validación de respuestas de error y casos extremos
  • Integración: Pruebas de flujo de trabajo de extremo a extremo
  • Rendimiento: Pruebas de tiempo de respuesta y carga

Resumen de Resultados de Pruebas

📊 RESUMEN DE PRUEBAS
============================================================
Total de Pruebas: 5
Pasadas: 5 ✅
Fallidas: 0 ❌
Tasa de Éxito: 100.0%

📋 RESULTADOS DETALLADOS
------------------------------------------------------------
1. boiler-info: ✅ PASÓ
2. maintenance-get: ✅ PASÓ
3. maintenance-schedule: ✅ PASÓ
4. purchase: ✅ PASÓ
5. email: ✅ PASÓ

🎉 ¡Todas las pruebas pasaron! Las herramientas MCP están funcionando correctamente.

Comandos de Prueba Rápida

# Ejecutar todas las pruebas de herramientas MCP
npm test

# Probar componentes específicos
npm run test:api          # Pruebas de API backend
npm run test:mcp          # Integración MCP de Cursor
npm run test:protocol     # Validación de protocolo MCP
npm run test:compiled     # Prueba de versión compilada
npm run test:connection   # Prueba de conexión
npm run test:quick        # Verificación rápida de salud

El proyecto MCP-in-Chat está diseñado para ser fácilmente accesible para desarrolladores que quieren entender e implementar servidores MCP para sus propios casos de uso.

Prerrequisitos

  • Node.js 18+ y npm
  • Conocimiento de TypeScript
  • Comprensión básica del protocolo MCP
  • Acceso a chatbots externos (Claude, ChatGPT, Cursor)

Instalación

# Clonar el repositorio
git clone https://github.com/michaelwybraniec/mcp-in-chat.git
cd mcp-in-chat

# Instalar dependencias
npm install

# Construir el proyecto
npm run build

# Iniciar el servidor API
npm run start:api

# Iniciar el servidor MCP (en otra terminal)
npm run start:mcp

Integración con Chatbots Externos

El servidor MCP está diseñado para funcionar con cualquier chatbot compatible con MCP:

  1. Claude Desktop: Agregar el servidor MCP a la configuración de Claude
  2. ChatGPT: Usar el servidor MCP como herramienta personalizada
  3. Cursor IDE: Integrar directamente con el entorno de desarrollo

Personalización

El proyecto está diseñado para ser fácilmente personalizable para diferentes dominios de negocio:

  1. Reemplazar Servicios Simulados: Conectar a APIs y bases de datos reales
  2. Agregar Nuevas Herramientas: Extender el servidor MCP con funcionalidad adicional
  3. Modificar Lógica de Negocio: Adaptar los servicios para tu caso de uso específico
  4. Mejorar Seguridad: Agregar capas adicionales de autenticación y autorización

El proyecto MCP-in-Chat proporciona información valiosa sobre la construcción de servidores MCP listos para producción y su integración con chatbots externos.

Factores Clave de Éxito

  1. Arquitectura en Capas: Separación clara entre herramientas MCP, capa de API y lógica de negocio
  2. Pruebas Comprensivas: 100% de cobertura de pruebas asegura confiabilidad
  3. Seguridad Primero: Autenticación, validación y limitación de tasa desde el inicio
  4. Documentación: Documentación completa para fácil incorporación
  5. Servicios Simulados: Simulación de datos realista para desarrollo y pruebas

Desafíos Comunes y Soluciones

  1. Complejidad de Integración Externa
    • Desafío: Probar con chatbots externos puede ser difícil
    • Solución: Suite de pruebas locales comprensiva con escenarios realistas
  2. Implementación de Seguridad
    • Desafío: Asegurar comunicación segura entre componentes
    • Solución: Seguridad en capas con autenticación en cada nivel
  3. Gestión de Datos
    • Desafío: Mantener estado consistente entre servicios
    • Solución: Capa de datos centralizada con controles de acceso
  4. Manejo de Errores
    • Desafío: Manejo elegante de errores en interfaces conversacionales
    • Solución: Respuestas de error estructuradas con orientación accionable

Consideraciones de Rendimiento

  • Tiempo de Respuesta: Las herramientas MCP deben responder dentro de 2-3 segundos
  • Limitación de Tasa: Implementar límites de tasa apropiados para prevenir abuso
  • Caché: Cachear datos frecuentemente accedidos para mejorar rendimiento
  • Monitoreo: Implementar logging y monitoreo comprensivos

El proyecto MCP-in-Chat sirve como base para implementaciones más sofisticadas de servidores MCP y proporciona una hoja de ruta para desarrollo futuro.

Mejoras Planificadas

  1. Integración de Servicios Reales
    • Reemplazar servicios simulados con APIs reales
    • Integrar con pasarelas de pago
    • Conectar a bases de datos de clientes
    • Implementar servicios de email reales
  2. Características Avanzadas
    • Soporte multiidioma
    • Integración de voz
    • Integración de aplicación móvil
    • Análisis avanzados y reportes
  3. Mejoras de Escalabilidad
    • Arquitectura de microservicios
    • Balanceo de carga
    • Optimización de base de datos
    • Estrategias de caché
  4. Mejoras de Seguridad
    • Integración OAuth 2.0
    • Control de acceso basado en roles
    • Logging de auditoría
    • Características de cumplimiento

Aplicaciones de la Industria

La arquitectura MCP-in-Chat puede adaptarse para varias industrias:

  1. Salud: Programación de citas de pacientes y acceso a registros médicos
  2. Finanzas: Gestión de cuentas y procesamiento de transacciones
  3. Educación: Registro de cursos y servicios estudiantiles
  4. Bienes Raíces: Búsqueda de propiedades y gestión de reservas
  5. Viajes: Reserva de vuelos y gestión de itinerarios

El proyecto MCP-in-Chat demuestra el poder y potencial de los servidores del Protocolo de Contexto del Modelo en la creación de sistemas de IA conversacional sofisticados. Al proporcionar un ejemplo completo y listo para producción, sirve tanto como recurso de aprendizaje como base para implementaciones del mundo real.

Puntos Clave

  1. Los Servidores MCP Habilitan Valor Comercial Real: El proyecto muestra cómo los servidores MCP pueden conectar la IA conversacional con sistemas empresariales
  2. El Desarrollo Sistemático Funciona: La metodología AWP aseguró desarrollo consistente y de alta calidad
  3. La Seguridad es Primordial: La arquitectura de seguridad en capas es esencial para sistemas de producción
  4. Las Pruebas son Críticas: Las pruebas comprensivas aseguran confiabilidad y funcionalidad
  5. La Documentación Importa: La documentación completa permite adopción y personalización fáciles

Próximos Pasos

Para desarrolladores interesados en servidores MCP:

  1. Estudiar el Código: Revisar el repositorio MCP-in-Chat para entender la implementación
  2. Ejecutar el Demo: Configurar el proyecto localmente y probar con chatbots externos
  3. Personalizar: Adaptar la arquitectura para tu caso de uso específico
  4. Contribuir: Compartir mejoras y mejoras con la comunidad

El proyecto MCP-in-Chat representa un paso significativo hacia adelante en hacer los servidores MCP accesibles y prácticos para aplicaciones del mundo real. Al proporcionar un ejemplo completo y funcional, reduce la barrera de entrada para desarrolladores que quieren integrar IA conversacional con sus sistemas de negocio.


Recursos:

Michael Wybraniec

Michael Wybraniec

Freelance, Servidores MCP, Desarrollo Full-Stack, Arquitectura