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

Related MCP server: DeepSeek MCP Server

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

1. Instalar dependencias:

pnpm install

2. Iniciar desarrollo:

# Start webpack in watch mode
pnpm run dev

# Or build for production
pnpm run build

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

1. Abra la paleta de comandos (Cmd/Ctrl + Shift + P)

2. Escriba "Herramientas MCP" y seleccione el comando

3. Se abrirá el panel WebView y mostrará las herramientas disponibles.

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