💡 Feature Request: UI Simplificada para Integración de MCPs

[olivermontes]

🎯 Objetivo Principal

Simplificar la experiencia de añadir MCPs para usuarios no técnicos, eliminando la barrera de entrada que supone entender y configurar archivos JSON manualmente.

🚨 Problema Actual

Actualmente, para integrar un MCP como [MCP-BOE de Victor](https://github.com/ComputingVictor/MCP-BOE) o el [Looker MCP Toolbox](https://cloud.google.com/looker/docs/connect-ide-to-looker-using-mcp-toolbox), los usuarios deben:

1. Entender configuración JSON técnica:

{
  "mcpServers": {
    "mcp-boe": {
      "command": "/ruta/a/tu/conda/envs/tu_env/bin/python",
      "args": ["-m", "mcp_boe.server"],
      "env": {
        "PYTHONPATH": "/ruta/a/tu/MCP-BOE/src"
      }
    }
  }
}

2. Navegar documentación técnica compleja
3. Comprender rutas de sistema, variables de entorno y comandos de terminal

Experiencia real: Una compañera no técnica quería integrar el Looker MCP pero se sintió abrumada por la cantidad de configuración técnica requerida.

💡 Propuesta de Solución

Interfaz de Usuario Simplificada

Implementar una UI intuitiva con los siguientes componentes:

1. Campo de Entrada Inteligente

• Textarea/Input donde el usuario puede pegar:
  • Una URL de GitHub (ej: https://github.com/ComputingVictor/MCP-BOE)
  • Una descripción en lenguaje natural (ej: "Quiero conectar mi Looker para hacer consultas de datos")
  • URL de documentación (ej: documentación de Google Cloud)

2. Procesamiento Inteligente con LLM

• Fetch automático del contenido del repositorio/documentación
• Análisis con LLM para extraer:
  • Comando de instalación
  • Configuración necesaria
  • Variables de entorno requeridas
  • Dependencias del sistema
• Generación automática del JSON de configuración MCP

3. Formulario Dinámico Asistido

• Campos generados automáticamente basados en el análisis
• Tooltips explicativos para cada campo
• Valores por defecto cuando sea posible
• Validación en tiempo real

🛠️ Flujo Propuesto

Usuario ingresa URL/descripción
          ↓
    Fetch + Análisis LLM
          ↓
  Generación JSON automática
          ↓
   Formulario simplificado
          ↓
  Configuración lista para usar

🎨 Mockup de UI

┌─────────────────────────────────────────────┐
│  🔧 Añadir Nueva Herramienta MCP           │
├─────────────────────────────────────────────┤
│                                             │
│  Describe qué herramienta quieres añadir:   │
│  ┌─────────────────────────────────────────┐ │
│  │ Ej: https://github.com/user/mcp-tool   │ │
│  │ o "Quiero conectar Google Sheets"      │ │
│  │                                       │ │
│  └─────────────────────────────────────────┘ │
│                                             │
│          [🤖 Analizar con IA]               │
│                                             │
│  ─── Configuración Detectada ───           │
│                                             │
│  Nombre: BOE España 📋                     │
│  Descripción: Acceso al Boletín Oficial... │
│                                             │
│  Variables requeridas:                      │
│  • No requiere configuración adicional ✅   │
│                                             │
│         [✅ Instalar Herramienta]           │
│                                             │
└─────────────────────────────────────────────┘

📝 Ejemplos de Uso

Caso 1: GitHub URL

Input: "https://github.com/ComputingVictor/MCP-BOE"
Output: Configuración automática para MCP-BOE con todos los parámetros

Caso 2: Descripción Natural

Input: "Quiero consultar el boletín oficial del estado español"
Output: Sugerencia de MCP-BOE + configuración automática

Caso 3: Documentación

Input: "https://cloud.google.com/looker/docs/connect-ide-to-looker-using-mcp-toolbox"
Output: Formulario con campos para Looker credentials y configuración

🔧 Implementación Técnica

Fase 1: Backend LLM Integration

• Endpoint para procesar URLs/descripciones
• Integración Claude/OpenAI para análisis de repos
• Parser para generar configuraciones MCP válidas

Fase 2: UI Components

• Component React para el formulario inteligente
• Validación de configuraciones generadas
• Preview del JSON antes de aplicar

Fase 3: Store Integration

• Conexión con MCP Store existente
• Instalación automática de dependencias
• Estado de conexión en tiempo real

🎯 Beneficios

• ✅ Democratización: Usuarios no técnicos pueden usar MCPs
• ✅ Reducción de errores: Menos configuración manual
• ✅ Experiencia fluida: De idea a herramienta funcionando en minutos
• ✅ Escalabilidad: Funciona con cualquier MCP nuevo
• ✅ Mantenibilidad: Menos soporte técnico requerido

🤔 Preguntas para la Comunidad

1. ¿Qué otros métodos de entrada considerarían útiles? (además de URL/descripción)

2. ¿Qué nivel de validación debería incluir la UI? (básica vs completa)

3. ¿Prefieren un wizard paso a paso o una interfaz de una sola página?

4. ¿Qué información adicional necesitarían para sentirse cómodos usando esta funcionalidad?

📋 Próximos Pasos

• Feedback de la comunidad sobre la propuesta
• Prototipo de la UI propuesta
• PoC del procesamiento LLM
• Análisis de MCPs populares para casos de uso común
• Integración con el sistema de herramientas existente

🤝 ¿Cómo Puedes Contribuir?

• 💬 Comparte tu experiencia añadiendo MCPs manualmente
• 🎨 Sugiere mejoras a la UI propuesta
• 🧪 Propón casos de uso que deberíamos considerar
• 🔧 Contribuye con code cuando tengamos el PoC listo

---

¿Qué opinan? ¿Esta aproximación resolvería el problema de usabilidad que hemos identificado? 🚀

[ESJavadex]

Yo también estoy muy a favor de la idea y me parece un approach potentísimo para bajar la barrera de entrada a los MCPs. Dicho esto, siendo parte del repo, veo un riesgo claro en el Caso 2 (descripción natural).

Me gusta mucho el “wow factor” de que alguien escriba “Quiero consultar el boletín oficial del estado español” y la interfaz sugiera automáticamente el MCP-BOE con su configuración. Pero al mismo tiempo lo veo peligroso:

• Puede inducir a instalar cosas que el usuario no ha elegido conscientemente.
• La ambigüedad de una frase natural abre la puerta a errores, suposiciones equivocadas o incluso repositorios maliciosos.
• No hay un vínculo explícito entre lo que el usuario pidió y la procedencia del MCP.

Por eso yo limitaría el flujo a Caso 1 (URL) y Caso 3 (documentación oficial), donde al menos el usuario ya ha elegido qué MCP quiere usar y nuestra herramienta sólo le simplifica la configuración. El “Caso 2” lo dejaría, como mucho, en modo exploración/sugerencia (lista de posibles MCPs), pero nunca generando ni instalando automáticamente nada sin una confirmación explícita.

De esa manera mantenemos la magia de la automatización, pero con un marco más seguro y controlado.

Por lo menos para el MVP.