Skip to main content
Glama
enesjakozh
seanivore

MCP File Preview Server

by seanivore
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

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

Related MCP server: polydoc-mcp

Instalación

  1. Clonar el repositorio:

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

  1. Instalar dependencias:

npm install

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

  1. Instalar dependencias:

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

  1. Realizar cambios en src/

  2. Construir:

npm run build

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

  1. Utilice el inspector MCP:

npx @modelcontextprotocol/inspector

  1. Conectar con:

    • Tipo de transporte: STDIO

    • Comando: nodo

    • Argumentos: /ruta/a/compilar/index.js

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

Available Tools

2 tools
analyze_contentC

Analyze HTML content structure

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to local HTML file

TDQS

C2.6/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It only states what the tool does ('Analyze HTML content structure') without revealing any behavioral traits—such as whether it's read-only, destructive, requires specific permissions, handles errors, or has rate limits. This is a significant gap for a tool with no annotation coverage.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and front-loaded with a single phrase, 'Analyze HTML content structure', which efficiently conveys the core purpose without unnecessary words. However, it could be improved by adding a bit more context to enhance clarity without sacrificing brevity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what the analysis returns (e.g., structure details, errors, or metadata), behavioral aspects, or usage context. For a tool with no structured data beyond the input schema, this leaves significant gaps in understanding its full functionality.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the parameter 'filePath' clearly documented as 'Path to local HTML file'. The description adds no additional meaning beyond this, as it doesn't elaborate on parameter usage or constraints. Given the high schema coverage, a baseline score of 3 is appropriate, as the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description 'Analyze HTML content structure' states a clear verb ('Analyze') and resource ('HTML content structure'), but it's vague about what 'analyze' entails—does it extract metadata, validate structure, or something else? It doesn't differentiate from the sibling tool 'preview_file', which might also handle HTML files, leaving ambiguity in purpose.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention the sibling tool 'preview_file' or any other context for usage, such as prerequisites or scenarios where this tool is preferred. This leaves the agent without direction on tool selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

preview_fileB

Preview local HTML file and capture screenshot

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to local HTML file
heightNoViewport height
widthNoViewport width

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions 'preview' and 'capture screenshot' but doesn't specify whether this is a read-only operation, if it modifies files, what permissions are needed, or how the screenshot is returned (e.g., format, storage location). This leaves significant gaps for a tool that interacts with local files and generates outputs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core functionality, making it easy to understand at a glance.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of file interaction and screenshot generation, with no annotations and no output schema, the description is insufficient. It doesn't explain what the tool returns (e.g., screenshot data, file path, error handling), behavioral traits, or integration details, leaving the agent with incomplete information for proper use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, providing clear documentation for all parameters (filePath, height, width). The description adds no additional parameter semantics beyond what the schema already states, so it meets the baseline score of 3 without compensating for any gaps.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('preview' and 'capture screenshot') and resource ('local HTML file'), distinguishing it from the sibling 'analyze_content' which likely performs content analysis rather than visual preview and capture.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention prerequisites, limitations, or comparison with the sibling tool 'analyze_content', leaving the agent without contextual usage instructions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv1.0.0
    • First observedanalyze_content
    • First observedpreview_file
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: analyze_content focuses on structural analysis of HTML content, while preview_file handles file preview and screenshot capture. There is no overlap in functionality, making it easy for an agent to select the appropriate tool without confusion.

Naming Consistency5/5

Both tools follow a consistent verb_noun naming pattern (analyze_content and preview_file), with clear, descriptive names that align with their functions. There are no deviations or mixed conventions, ensuring predictability and readability.

Tool Count2/5

With only two tools, the server feels thin for a 'File Preview Server' that might be expected to handle more file types or operations beyond HTML. While the tools are focused, the count is borderline too few for the apparent scope, limiting functionality.

Completeness2/5

The server is severely incomplete for file preview purposes, as it only supports HTML files with no coverage for other common formats (e.g., images, PDFs, text files). There are significant gaps in the tool surface that will likely cause agent failures when dealing with non-HTML content.

Maintenance

ActivityInactive
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • polydoc-mcp by polydoc-tech

    polydoc-mcpofficial

    polydoc-tech
    A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that converts HTML or URLs to PDF, captures screenshots, and generates EU-compliant e-invoices (Factur-X/ZUGFeRD).
    116 npm
    MIT

  • kage-mcp

    lxyct825-ops
    A
    license
    Not graded
    quality
    C
    maintenance
    A lightweight MCP server for parsing HTML, fetching URLs, rendering terminal-style screenshots, and executing JavaScript on static HTML without external dependencies.
    3
    MIT

  • ShotAPI

    smallhandsome
    A
    license
    Not graded
    quality
    D
    maintenance
    Screenshot and HTML Rendering MCP Server for AI Agents. Capture screenshots, render HTML to images, and generate PDFs via simple API calls. Compatible with Claude, Cursor, and any MCP client.
    1
    MIT

Appeared in Searches