MCP Manager

MCP Manager

Interfaz web moderna y herramienta CLI para gestionar configuraciones de servidores MCP (Model Context Protocol).

🌐 Vista previa de la interfaz web

Diseño moderno

La interfaz web presenta un diseño moderno y elegante con la fuente JetBrains Mono, proporcionando un aspecto limpio y profesional:

📦 Explorador de servidores - Vista principal

Explora e instala desde más de 35 servidores MCP preconfigurados con categorización inteligente e indicadores visuales de estado:

🏷️ Organización por categorías

Organiza los servidores por funcionalidad para facilitar la navegación y el descubrimiento:

⚙️ Gestión de servidores

Gestiona tus servidores instalados con información detallada de configuración:

🔧 Variables de entorno

Gestión centralizada de variables de entorno con integración de archivos .env:

📝 Editor de configuración en vivo

Edita archivos .mcp.json directamente en el navegador con resaltado de sintaxis:

Funciones interactivas

📦 Explorador de servidores

• Instalación con un clic: Simplemente haz clic en cualquier tarjeta de servidor para instalarlo al instante
• Organización por categorías: Servidores agrupados por funcionalidad (IA/ML, Bases de datos, Servicios en la nube, etc.)
• Búsqueda inteligente: Filtrado en tiempo real por nombre, descripción o categoría
• Indicadores de estado: Puntos visuales que muestran el estado de instalación (verde = instalado, gris = no instalado)

⚡ Instalación Supafast

Los servidores especiales "S1-S14" se instalan con cero configuración:

• S1-S7: Utilidades principales (Everything, Fetch, Filesystem, Git, Memory, Sequential Thinking, Time)
• S8-S11: Herramientas de desarrollo (Playwright, Context7, Task Master, Xcode Build)
• S12-S14: Herramientas especializadas (NixOS, shadcn/ui, Just Prompt)

🔧 Gestión de configuración

• Editor de configuración visual: Edita .mcp.json directamente en el navegador con resaltado de sintaxis
• Variables de entorno: Gestiona variables con integración de archivos .env y botones "Fetch"
• Servidores actuales: Ve, edita y elimina servidores instalados con controles intuitivos

🚀 Sistema de actualización automática

• Actualizaciones obligatorias: Verificación automática de versiones con actualizaciones forzadas
• Seguimiento de progreso: Retroalimentación visual durante el proceso de actualización
• Experiencia fluida: Recarga automática después de actualizaciones exitosas

Prueba la demo en vivo

# Install globally
npm install -g @oglabs/mcp

# Launch web interface
@oglabs/mcp --web

La interfaz se abre automáticamente en http://localhost:3333 con funcionalidad completa.

Instalación

Instalación global (recomendada)

npm install -g @oglabs/mcp

Instalación local

npm install @oglabs/mcp

Uso

🚀 Modo servidor MCP (¡NUEVO!)

Detección de stack tecnológico y recomendaciones de servidores MCP

Transforma tu paquete en un servidor MCP inteligente que detecta automáticamente los stacks tecnológicos del proyecto y recomienda los mejores servidores MCP para tu proyecto:

@oglabs/mcp --server

🔧 Herramientas disponibles del servidor MCP

El servidor MCP proporciona 4 potentes herramientas para agentes de IA:

1. recommend-mcp-servers - Sugiere servidores MCP óptimos según el stack tecnológico proporcionado
2. search-mcp-servers - Busca entre más de 52 servidores MCP disponibles
3. get-mcp-server-info - Obtén información detallada sobre servidores específicos
4. install-mcp-server - Instala servidores MCP directamente en .mcp.json con flujo de confirmación

📝 Prompts inteligentes disponibles

El servidor MCP también proporciona prompts inteligentes para análisis guiado del stack tecnológico:

1. analyze-tech-stack - Análisis integral del proyecto con profundidad personalizable
2. discover-mcp-servers - Descubrimiento de servidores MCP específicos por tecnología
3. setup-project-mcp - Asistente de configuración de proyectos con consideraciones de equipo
4. quick-tech-assessment - Evaluación rápida del stack tecnológico a partir de información mínima
5. confirm-installation - Flujo de confirmación interactivo para la instalación de servidores MCP

🧪 Pruebas con MCP Inspector

# Start server with MCP Inspector for interactive testing
npm run debug-mcp

# Opens browser at http://localhost:6274
# Provides visual interface to test all MCP tools

📦 Añadir a Claude Desktop

Añade esta configuración a tu mcp.json de Claude Desktop:

{
  "mcpServers": {
    "tech-stack-recommender": {
      "command": "npx",
      "args": ["-y", "@oglabs/mcp", "--server"],
      "env": {}
    }
  }
}

🎯 Casos de uso del servidor MCP

• Análisis de stack tecnológico guiado por prompts: Usa prompts inteligentes para un análisis integral del proyecto
• Recomendaciones MCP inteligentes: Obtén sugerencias personalizadas de servidores basadas en palabras clave extraídas por LLM
• Descubrimiento de servidores: Busca y explora servidores MCP disponibles por tecnología
• Instalación interactiva: Confirma e instala servidores uno por uno con validación de entorno
• Configuración de proyectos: Identifica rápidamente qué servidores MCP serían más útiles para cualquier proyecto

🌐 Modo interfaz web (recomendado)

Lanza la interfaz web moderna para la mejor experiencia:

@oglabs/mcp --web

O si está instalado localmente:

npx @oglabs/mcp --web

La interfaz web se abre automáticamente en tu navegador predeterminado en http://localhost:3333 y proporciona:

🖥️ Modo CLI interactivo

Para uso tradicional desde línea de comandos:

@oglabs/mcp

O si está instalado localmente:

npx @oglabs/mcp

🚀 Características principales:

• ⚡ Instalación Supafast: 14 servidores (S1-S14) se pueden instalar al instante sin configuración
• 🖱️ Instalación con un clic: Haz clic directamente en las tarjetas de servidor para instalar servidores sin configuración requerida
• 📦 Explorador de servidores: Busca y navega por más de 26 servidores MCP preconfigurados por categoría
• ⚙️ Servidores actuales: Ve, edita y gestiona tus servidores configurados
• ➕ Servidores personalizados: Añade configuraciones de servidores MCP personalizadas con formularios guiados
• 📝 Edición directa de configuración: Edita archivos .mcp.json directamente en el navegador
• 🔍 Búsqueda avanzada: Filtra servidores por nombre, categoría o descripción
• 📱 Diseño responsivo: Funciona en escritorio, tabletas y dispositivos móviles
• 🎨 UI moderna: Diseño limpio con fuente JetBrains Mono en toda la interfaz

🎯 Servidores Supafast (sin configuración necesaria):

• S1-S7: Herramientas principales (Everything, Fetch, Filesystem, Git, Memory, Sequential Thinking, Time)
• S8-S11: Herramientas de desarrollo (Playwright, Context7, Task Master, Xcode Build)
• S12-S14: Herramientas especializadas (NixOS, shadcn/ui, Just Prompt)

🌐 Endpoints de API:

• GET /api/config - Recupera la configuración MCP actual
• POST /api/config - Guarda la configuración MCP
• GET /api/servers - Obtiene la base de datos de servidores preconfigurados
• GET /api/variables - Obtiene las variables de entorno guardadas
• POST /api/variables - Guarda las variables de entorno
• GET /api/env-variables - Obtiene las variables del archivo .env
• GET /api/version-check - Comprueba si hay actualizaciones disponibles
• POST /api/auto-update - Realiza la actualización automática

🎮 Experiencia web interactiva:

1. Flujo de instalación de servidores:

Browse Servers → Click Card → Instant Install → Status Updates → Ready to Use

2. Flujo de trabajo de configuración:

Current Servers Tab → Edit Server → Update Config → Auto-Save → Live Reload

3. Configuración del entorno:

Variables Tab → Add Variables → Fetch from .env → Auto-Fill → Save

4. Proceso de actualización automática:

Version Check → Update Available → Mandatory Modal → Progress Bar → Auto-Reload

Características

🚀 Modo servidor MCP (¡NUEVO!)

• 🧠 Análisis guiado por prompts: Usa prompts inteligentes para un análisis integral del stack tecnológico
• 🎯 Recomendaciones inteligentes: Sugerencias de servidores MCP impulsadas por IA basadas en palabras clave extraídas por LLM
• 🔍 Descubrimiento de servidores: Busca entre más de 52 servidores MCP disponibles por tecnología
• 📋 Instalación interactiva: Confirma e instala servidores uno por uno con validación
• 🔧 4 herramientas MCP: recommend-mcp-servers, search-mcp-servers, get-mcp-server-info, install-mcp-server
• 📝 5 prompts inteligentes: Análisis guiado, descubrimiento, configuración, evaluación y confirmación de instalación
• 🧪 Soporte de MCP Inspector: Pruebas interactivas con interfaz visual
• 📦 Listo para Claude Desktop: Integración fácil con la configuración MCP de Claude Desktop
• 🚀 Flujo de trabajo impulsado por LLM: Primero prompts, luego herramientas para recomendaciones óptimas

🌐 Modo web (recomendado)

• 🎨 Diseño moderno: UI basada en profundidad con sombras suaves y fuente JetBrains Mono
• 📱 Totalmente responsivo: Optimizado para escritorio, tabletas y dispositivos móviles
• 🖱️ Tarjetas de servidor interactivas: Haz clic en cualquier tarjeta para instalar, pasa el cursor para animaciones
• ⚡ Instalación instantánea: Los servidores Supafast (S1-S14) se instalan con cero configuración
• 🎯 Indicadores de estado inteligentes: Puntos con código de colores que muestran el estado de instalación
• 🔍 Búsqueda en tiempo real: Filtra más de 26 servidores por nombre, categoría o descripción
• 📊 Panel visual: Gestiona servidores instalados con controles intuitivos
• 📝 Editor de configuración en vivo: Edita .mcp.json directamente con resaltado de sintaxis
• 🔗 Integración de entorno: Soporte de archivos .env con botones de obtención convenientes
• 🚀 Sistema de actualización automática: Actualizaciones obligatorias con seguimiento de progreso
• 🎨 Animaciones suaves: Interacciones de tarjetas con transiciones y transformaciones CSS

🖥️ Modo CLI

• 📋 Interfaz interactiva basada en menús
• ⚡ Instalación Supafast (servidores S1-S14 con cero configuración)
• 🔧 Más de 35 servidores MCP preconfigurados
• ➕ Añadir servidores MCP personalizados
• ✏️ Editar servidores existentes
• ❌ Eliminar servidores
• 📄 Ver configuración actual
• 🔍 Buscar servidores MCP
• 🎯 Gestión automática de archivos .mcp.json

Servidores preconfigurados

MCP Manager incluye más de 35 servidores MCP preconfigurados y verificados, incluyendo:

• 🗄️ Bases de datos: Supabase, PostgreSQL, Redis, SQLite
• 🛠️ Herramientas de desarrollo: Git, Playwright, Xcode Build, PR Reviewer, NixOS
• ☁️ Servicios en la nube: AWS, Google Drive Enhanced, SharePoint
• 📁 Sistemas de archivos: Filesystem, Memory, Fetch
• 🤖 IA/ML: Everything, Sequential Thinking, Context7, Just Prompt, GPT Researcher
• 🎯 Productividad: Task Master, ClickUp, shadcn/ui
• 🎵 Entretenimiento: Spotify
• 🔐 Autenticación: Clerk
• 🚀 Automatización: Skyvern
• 📚 Conocimiento: Obsidian

Configuración

MCP Manager gestiona archivos .mcp.json en tu directorio de trabajo actual. El formato de configuración es:

{
  "mcpServers": {
    "serverName": {
      "command": "npx",
      "args": ["-y", "@package/name"],
      "env": {"KEY": "value"}
    }
  }
}

Ejemplos

🌐 Ejemplos de interfaz web

Instalación de un servidor Supafast (configuración cero)

1. Lanza la interfaz web: @oglabs/mcp --web
2. Pestaña Explorar servidores → Encuentra cualquier servidor marcado como S1-S14
3. Un clic en la tarjeta del servidor → Instalación instantánea ⚡
4. Punto de estado verde aparece → Servidor listo para usar

Instalación de un servidor regular (con configuración)

1. Pestaña Explorar servidores → Encuentra el servidor deseado (por ejemplo, "Supabase")
2. Haz clic en el botón Configurar → Se abre el modal de configuración
3. Completa las variables de entorno requeridas (DATABASE_URL, API_KEY, etc.)
4. Haz clic en Instalar → El servidor se instala con tu configuración
5. Pestaña Servidores actuales → Gestiona tu nuevo servidor

Gestión de variables de entorno

1. Pestaña Variables → Ve todas las variables guardadas
2. Botón Obtener de .env → Autocompleta desde el archivo .env local
3. Añadir/Editar variables → Configura claves de API, URLs, tokens
4. Guardar → Las variables están disponibles en todas las configuraciones de servidores

Edición de configuración en vivo

1. Pestaña Servidores actuales → Ve todos los servidores instalados
2. Botón Editar → Modifica la configuración del servidor en el navegador
3. Pestaña Configuración en bruto → Edición directa de .mcp.json con resaltado de sintaxis
4. Guardar → Los cambios se aplican inmediatamente

Experiencia de actualización automática

1. Verificación automática al cargar la aplicación → Comparación de versiones con npm
2. Modal de actualización obligatoria → No se puede cerrar si se requiere actualización
3. Botón "Actualizar ahora" → La barra de progreso muestra el estado de la actualización
4. Recarga automática → La última versión se carga automáticamente

🚀 Ejemplos del modo servidor MCP

Uso con Claude Desktop

1. Añade a la configuración de Claude Desktop (~/.config/claude-desktop/mcp.json):

{
  "mcpServers": {
    "tech-stack-recommender": {
      "command": "npx", 
      "args": ["-y", "@oglabs/mcp", "--server"],
      "env": {}
    }
  }
}

2. Reinicia Claude Desktop para cargar el nuevo servidor

3. Ejemplos de interacciones en Claude:

User: "Analyze my current project and recommend MCP servers"
Claude: [uses analyze-tech-stack prompt to guide user analysis] → [user provides tech stack] → [uses recommend-mcp-servers tool with LLM-extracted keywords]
Result: Personalized recommendations based on prompt-guided analysis

User: "I have a React, TypeScript, PostgreSQL project. What MCP servers should I use?"
Claude: [uses recommend-mcp-servers with keywords: languages=["TypeScript"], frameworks=["React"], databases=["PostgreSQL"]]
Result: Curated recommendations for React/TypeScript/PostgreSQL development

User: "Find MCP servers for working with databases" 
Claude: [uses search-mcp-servers with query "database"]
Result: List of database-related MCP servers (PostgreSQL, MongoDB, SQLite, etc.)

User: "What does the postgres MCP server do?"
Claude: [uses get-mcp-server-info with serverKey "postgres"]
Result: Detailed information about PostgreSQL MCP server

User: "Install the recommended servers for me"
Claude: [uses confirm-installation prompt with recommended servers] → [guides through confirmation]
User: "Yes, install the filesystem and git servers"
Claude: [uses install-mcp-server tool with confirmed: true for each server]
Result: Servers installed to .mcp.json with success confirmation

**Recommended Workflow (Prompt-First Approach):**
1. Start with analyze-tech-stack prompt for guided analysis
2. LLM extracts keywords from user's project description  
3. Use recommend-mcp-servers tool with extracted keywords
4. Use confirm-installation prompt for user approval
5. Install servers one-by-one with install-mcp-server tool

User: "Help me analyze my React project thoroughly"
Claude: [uses analyze-tech-stack prompt with comprehensive depth]
Result: Structured tech stack analysis with MCP recommendations

User: "I need MCP servers for Python development"
Claude: [uses discover-mcp-servers prompt with technology "Python"]
Result: Curated list of Python-specific MCP servers with setup instructions

Pruebas con MCP Inspector

1. Inicia el inspector:

npm run debug-mcp

2. Abre el navegador en http://localhost:6274

3. Prueba herramientas y prompts interactivamente:

   Herramientas:

   • recommend-mcp-servers: Proporciona datos del stack tecnológico y obtén recomendaciones de servidores
   • search-mcp-servers: Prueba consultas como "ai", "database", "github"
   • get-mcp-server-info: Explora detalles de servidores específicos
   • install-mcp-server: Prueba el flujo de instalación con pasos de confirmación Prompts:
   • analyze-tech-stack: Obtén prompts estructurados para un análisis integral del proyecto
   • discover-mcp-servers: Encuentra prompts para descubrimiento de servidores específicos por tecnología
   • setup-project-mcp: Obtén prompts guiados de configuración del proyecto con consideraciones del equipo
   • quick-tech-assessment: Prompts de evaluación rápida para información mínima del proyecto
   • confirm-installation: Flujo de trabajo interactivo de confirmación para instalación de servidores

Uso Directo del Servidor MCP

# Start server (connects via stdio)
@oglabs/mcp --server

# Alternative: Use npm script
npm run mcp-server

Ejemplo de Salida de Recomendación del Servidor MCP

{
  "providedTechStack": {
    "languages": ["JavaScript", "TypeScript"],
    "frameworks": ["React", "Express.js"], 
    "databases": ["PostgreSQL"],
    "tools": ["Git", "Docker"],
    "deployment": ["Docker"]
  },
  "recommendations": [
    {
      "name": "PostgreSQL MCP Server",
      "key": "postgres",
      "description": "Connect to PostgreSQL databases",
      "reason": "Recommended for PostgreSQL",
      "confidence": 0.9,
      "package": "@modelcontextprotocol/server-postgres",
      "installCommand": "npx -y @modelcontextprotocol/server-postgres"
    },
    {
      "name": "GitHub MCP Server", 
      "key": "github",
      "description": "Interact with GitHub repositories",
      "reason": "Recommended for Git",
      "confidence": 0.8,
      "package": "@modelcontextprotocol/server-github",
      "installCommand": "npx -y @modelcontextprotocol/server-github"
    }
  ]
}

Ejemplo de Uso de Prompts

1. Análisis Integral del Stack Tecnológico:

Prompt: analyze-tech-stack
Parameters: {
  "projectPath": ".",
  "analysisDepth": "comprehensive", 
  "includeRecommendations": true
}
Result: Detailed structured analysis with MCP server recommendations

2. Descubrimiento Específico por Tecnología:

Prompt: discover-mcp-servers
Parameters: {
  "technology": "React",
  "projectType": "web",
  "includeSetup": true
}
Result: Curated React-specific MCP servers with setup instructions

3. Guía de Configuración del Proyecto:

Prompt: setup-project-mcp
Parameters: {
  "projectDescription": "E-commerce platform with React frontend and Node.js backend",
  "teamSize": "small",
  "experience": "intermediate",
  "priorities": ["productivity", "testing", "deployment"]
}
Result: Phased MCP server implementation plan with team considerations

4. Evaluación Rápida:

Prompt: quick-tech-assessment
Parameters: {
  "indicators": "package.json, Dockerfile, .github/workflows, cypress.json",
  "purpose": "mcp-recommendations"
}
Result: Rapid tech stack inference with immediate MCP opportunities

🖥️ Ejemplos de Modo CLI

Agregar un Servidor Preconfigurado

1. Ejecuta @oglabs/mcp
2. Selecciona "Agregar un servidor MCP preconfigurado"
3. Elige de la lista (por ejemplo, "PostgreSQL")
4. Sigue los prompts para cualquier configuración requerida

Agregar un Servidor Personalizado

1. Ejecuta @oglabs/mcp
2. Selecciona "Agregar un servidor MCP personalizado"
3. Ingresa el nombre del servidor, el comando y los argumentos
4. Opcionalmente, agrega variables de entorno

Eliminar un Servidor

1. Ejecuta @oglabs/mcp
2. Selecciona "Eliminar un servidor MCP"
3. Elige el servidor a eliminar

🖥️ Interfaz CLI

Para usuarios que prefieren interfaces de línea de comandos, MCP Manager ofrece una experiencia CLI integral:

El CLI ofrece:

• Menú Interactivo: Navega por las opciones con el teclado
• Gestión de Servidores: Agrega, elimina y configura servidores
• Funcionalidad de Búsqueda: Encuentra servidores por nombre o categoría
• Edición de Configuración: Modifica ajustes mediante prompts
• Multiplataforma: Funciona en Windows, macOS y Linux

Scripts Disponibles

📦 Scripts del Paquete

# MCP Server Mode
npm run mcp-server          # Start MCP server directly
npm run debug-mcp           # Start MCP server with inspector

# Star Data Management  
npm run fetch-stars         # Fetch GitHub stars for all servers
npm run update-stale-stars  # Update servers with stale star data
npm run update-stars-7d     # Update stars older than 7 days
npm run update-stars-14d    # Update stars older than 14 days

🚀 Comandos de Inicio Rápido

# Install globally and use
npm install -g @oglabs/mcp

# Different modes
@oglabs/mcp                 # CLI mode
@oglabs/mcp --web           # Web interface  
@oglabs/mcp --server        # MCP server mode

# Local development
npx @oglabs/mcp --server    # Local MCP server
npx @oglabs/mcp --web       # Local web interface

Desarrollo

# Clone the repository
git clone https://github.com/kmhari/mcp-simple.git
cd mcp-simple

# Install dependencies
npm install

# Available development commands
node mcp-manager.js         # CLI mode
node mcp-manager.js --web   # Web mode  
node mcp-manager.js --server # MCP server mode
npm run debug-mcp           # MCP server with inspector

🧪 Pruebas de Desarrollo del Servidor MCP

# Start MCP Inspector for development
npm run debug-mcp

# In another terminal, test specific tools
echo '{"tool": "detect-tech-stack", "projectPath": "."}' | node mcp-server.js

Licencia

MIT

Contribuciones

¡Las contribuciones son bienvenidas! No dudes en enviar un Pull Request.

Autor

Hari (@kmhari)