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.

Install Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

local-only server

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

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.

Related MCP Servers

Fetch MCP Serverofficial
modelcontextprotocol
A
security
A
license
A
quality
This server enables LLMs to retrieve and process content from web pages, converting HTML to markdown for easier consumption.
Last updated -
1
63,134
TypeScript
MIT License
MCP Webscan Server
bsmi021
A
security
A
license
A
quality
Enables web content scanning and analysis by fetching, analyzing, and extracting information from web pages using tools like page fetching, link extraction, site crawling, and more.
Last updated -
6
9
TypeScript
MIT License
Simple Document Processing MCP Server
cablate
A
security
A
license
A
quality
Provides comprehensive document processing, including reading, converting, and manipulating various document formats with advanced text and HTML processing capabilities.
Last updated -
16
46
11
TypeScript
MIT License
MCP Server Demo
DuttaAyush
-
security
F
license
-
quality
A demonstration server that provides tools for analyzing project structures and automatically generating comprehensive README files.
Last updated -
Python

View all related MCP servers

MCP File Preview Server