local-only server

The server can only run on the client’s local machine because it depends on local resources.

Servidor de vista previa de archivos MCP

Un servidor de Protocolo de Contexto de Modelo (MCP) que ofrece funciones de previsualización y análisis de archivos HTML. Este servidor permite capturar capturas de pantalla completas de archivos HTML locales y analizar su estructura.

Características

Vista previa de archivo : captura capturas de pantalla de página completa de archivos HTML con el estilo CSS adecuado
Análisis de contenido : analizar la estructura HTML (encabezados, párrafos, imágenes, enlaces)
Compatibilidad con archivos locales : administre rutas y recursos de archivos locales
Gestión de capturas de pantalla : guarde las capturas de pantalla en un directorio dedicado

Instalación

Clonar el repositorio:

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

Instalar dependencias:

npm install

Construir el proyecto:

npm run build

Configuración

Agregue el servidor a su configuración de Claude o Cline MCP:

Aplicación de escritorio Claude

Agregar 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 de VSCode

Agregar 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:

archivo de vista previa

Captura una captura de pantalla y devuelve 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/ en la carpeta del proyecto.

analizar_contenido

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
Campo de golf

Desarrollo

Instalar dependencias:

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

Realizar cambios en src/
Construir:

npm run build

Prueba localmente:

npm run dev

Detalles de implementación

El servidor utiliza la clase Servidor 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 toma objetos de opciones y metadatos separados
Las herramientas se declaran en capacidades.herramientas
Cada herramienta necesita una descripción y un esquema de entrada.
Las capturas de pantalla se guardan en un directorio local screenshots/

Depuración

Utilice el inspector MCP:

npx @modelcontextprotocol/inspector

Conectar con:
- Tipo de transporte: STDIO
- Comando: nodo
- Argumentos: /ruta/a/compilar/index.js
Consulte los registros del sistema operativo Claude si las herramientas no aparecen en el menú desplegable

Contribuyendo

Lea 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: consulte el archivo de LICENCIA para obtener más detalles.

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

Proporciona funciones de previsualización y análisis de archivos HTML. Este servidor permite capturar capturas de pantalla completas de archivos HTML locales y analizar su estructura.

MCP File Preview Server