Documentación de herramientas MCP

Una extensión de VSCode/Cursor que proporciona un servidor MCP integrado y un panel de interfaz de usuario para recuperar y mostrar la documentación de herramientas de línea de comandos. La extensión detecta automáticamente las herramientas en el espacio de trabajo y muestra su documentación a través de un panel WebView.

Características principales

🔄 Servidor MCP integrado
- Servidor Express + SSE (puertos 54321-54421)
- Validación de origen segura
- Selección automática de puerto
- Gestión y limpieza de conexiones
- Transmisión de eventos en tiempo real
🔍 Descubrimiento de herramientas
- Scripts de paquetes (npm, yarn, pnpm)
- Binarios locales (node_modules/.bin)
- Herramientas globales (git, npm, yarn, pnpm)
- Compatibilidad con el espacio de trabajo de Monorepo
Recuperación de documentación
- Ayuda a la ejecución del comando (-h, --help)
- Obtención de información de la versión
- Validación de comandos seguros
- Manejo de errores
Integración con VS Code
- Panel WebView basado en React
- Integración de la barra de estado
- Compatibilidad con la paleta de comandos
- Detección de ruta del espacio de trabajo

Arquitectura

1. Extensión de VS Code (backend)

Extension Host (src/extension.ts)
├── Activates when VS Code starts
├── Creates MCP Server
│   └── Express + SSE Server (54321-54421 port range)
└── Creates WebView Panel

2. Servidor MCP (capa intermedia)

MCP Server (src/server/*)
├── SSE Event Stream
│   ├── Real-time tool discovery updates
│   ├── Documentation streaming
│   └── Connection state management
│
└── Tool Discovery System
    ├── path-scanner.ts
    │   └── Finds tools in workspace (bin/, node_modules/.bin)
    └── package-scanner.ts
        └── Scans package.json for available tools

3. Panel WebView (Interfaz)

React WebView (src/panel/*)
├── UI Components
│   └── Shows available tools and their docs
│
└── SSE Client
    ├── Requests available tools
    └── Streams tool documentation

Estructura del proyecto

my-tools-mcp/
├── src/                      # Source code
│   ├── extension.ts          # Extension entry point
│   ├── env.ts               # Environment configuration
│   ├── server/              # Built-in MCP server
│   │   ├── index.ts         # Server setup and SSE handling
│   │   └── controllers/     # Tool discovery and execution
│   │       ├── docs/        # Documentation controllers
│   │       ├── path-scanner.ts    # Tool discovery
│   │       └── package-scanner.ts # Package.json scanning
│   ├── panel/              # WebView UI (React)
│   │   ├── index.tsx      # WebView entry point
│   │   ├── App.tsx        # Main React component
│   │   └── components/    # UI components
│   ├── types/             # Shared TypeScript types
│   └── lib/               # Shared utilities
├── dist/                  # Compiled output
└── src/__tests__/        # Test files

Configuración de desarrollo

Instalar dependencias:

pnpm install

Iniciar desarrollo:

# Start webpack in watch mode
pnpm run dev

# Or build for production
pnpm run build

Iniciar la extensión:

Presione F5 en VSCode para comenzar a depurar
La extensión iniciará tanto el servidor MCP como el panel WebView

Uso

Abra la paleta de comandos (Cmd/Ctrl + Shift + P)
Escriba "Herramientas MCP" y seleccione el comando
Se abrirá el panel WebView y mostrará las herramientas disponibles.
Seleccione una herramienta para ver su documentación

Detalles técnicos

Descubrimiento de herramientas

Scripts de paquetes
- Detecta automáticamente scripts npm/yarn/pnpm
- Muestra el código fuente del script y el directorio de trabajo
- Admite espacios de trabajo monorepo
- Valida la existencia del script
Herramientas binarias
- Encuentra herramientas en node_modules/.bin
- Detecta herramientas globales (git, npm, yarn, pnpm)
- Valida la existencia y los permisos de la herramienta.
- Maneja la resolución de ruta

Recuperación de documentación

Ejecuta comandos de ayuda (-h, --help)
Obtiene información de la versión
Maneja errores de ejecución de comandos
Valida los nombres de las herramientas y los argumentos
Implementa tiempos de espera adecuados

Comunicación de la SSE

Actualizaciones de descubrimiento de herramientas en tiempo real
Validación de origen segura
Gestión y limpieza de conexiones
Manejo y reporte de errores
Soporte de reconexión automática
Transmisión basada en eventos
Paso de mensajes bidireccional

Características de seguridad

Validación del nombre de la herramienta
Prevención de inyección de comandos
Validación de origen para conexiones SSE
Manejo y reporte adecuado de errores
Limpieza de recursos
Gestión del estado de la conexión

Pruebas

La extensión incluye pruebas completas:

Pruebas de integración para la funcionalidad del servidor
Pruebas de extensión de VS Code
Pruebas de descubrimiento de herramientas
Pruebas de validación de seguridad
Pruebas de comunicación SSE

Licencia

ISC

Integrated MCP Server

Integrations