MCP File Preview Server

Servidor de Vista Previa de Archivos MCP

Un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona capacidades de vista previa y análisis de archivos HTML. Este servidor permite capturar capturas de pantalla de página completa de archivos HTML locales y analizar su estructura.

Características

• Vista Previa de Archivos: Captura capturas de pantalla de página completa de archivos HTML con el estilo CSS adecuado
• Análisis de Contenido: Analiza la estructura HTML (encabezados, párrafos, imágenes, enlaces)
• Soporte de Archivos Locales: Maneja rutas de archivos locales y recursos
• Gestión de Capturas de Pantalla: Guarda capturas de pantalla en un directorio dedicado

Instalación

1. Clona el repositorio:

git clone https://github.com/your-username/mcp-file-preview.git
cd mcp-file-preview

2. Instala las dependencias:

npm install

3. Compila el proyecto:

npm run build

Configuración

Agrega el servidor a tu configuración MCP de Claude o Cline:

Aplicación de Escritorio de Claude

Agrega a ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "file-preview": {
      "command": "node",
      "args": ["/path/to/mcp-file-preview/build/index.js"]
    }
  }
}

Extensión Cline para VSCode

Agrega a la configuración MCP de VSCode:

{
  "mcpServers": {
    "file-preview": {
      "command": "node",
      "args": ["/path/to/mcp-file-preview/build/index.js"]
    }
  }
}

Uso

El servidor proporciona dos herramientas principales:

preview_file

Captura una captura de pantalla y devuelve el contenido HTML:

<use_mcp_tool>
<server_name>file-preview</server_name>
<tool_name>preview_file</tool_name>
<arguments>
{
  "filePath": "/path/to/file.html",
  "width": 1024,  // optional
  "height": 768   // optional
}
</arguments>
</use_mcp_tool>

Las capturas de pantalla se guardan en el directorio screenshots/ dentro de la carpeta del proyecto.

analyze_content

Analiza la estructura HTML:

<use_mcp_tool>
<server_name>file-preview</server_name>
<tool_name>analyze_content</tool_name>
<arguments>
{
  "filePath": "/path/to/file.html"
}
</arguments>
</use_mcp_tool>

Devuelve recuentos de:

• Encabezados
• Párrafos
• Imágenes
• Enlaces

Desarrollo

1. Instala las dependencias:

npm install @modelcontextprotocol/sdk puppeteer typescript @types/node @types/puppeteer

2. Realiza cambios en src/
3. Compila:

npm run build

4. Prueba localmente:

npm run dev

Detalles de Implementación

El servidor utiliza la clase Server del SDK de MCP con la inicialización adecuada:

this.server = new Server(
  // Metadata object
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // Options object with capabilities
  {
    capabilities: {
      tools: {
        preview_file: {
          description: 'Preview local HTML file and capture screenshot',
          inputSchema: {
            // ... schema definition
          }
        }
      }
    }
  }
);

Puntos clave:

• El constructor del servidor recibe objetos separados de metadatos y opciones
• Las herramientas se declaran en capabilities.tools
• Cada herramienta necesita una descripción y un inputSchema
• Las capturas de pantalla se guardan en un directorio local screenshots/

Depuración

1. Usa el Inspector de MCP:

npx @modelcontextprotocol/inspector

2. Conéctate con:

   • Tipo de Transporte: STDIO
   • Comando: node
   • Argumentos: /ruta/al/build/index.js

3. Revisa los registros del sistema de Claude si las herramientas no aparecen en el menú desplegable

Contribuciones

Por favor, lee CONTRIBUTING.md para obtener detalles sobre nuestro código de conducta y el proceso para enviar solicitudes de extracción.

Licencia

Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.