Skip to main content
Glama
enesjakozh
seanivore

MCP File Preview Server

by seanivore
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Local

MCP File Preview Server

A Model Context Protocol (MCP) server that provides HTML file preview and analysis capabilities. This server enables capturing full-page screenshots of local HTML files and analyzing their structure.

Features

  • File Preview: Capture full-page screenshots of HTML files with proper CSS styling

  • Content Analysis: Analyze HTML structure (headings, paragraphs, images, links)

  • Local File Support: Handle local file paths and resources

  • Screenshot Management: Save screenshots to a dedicated directory

Related MCP server: polydoc-mcp

Installation

  1. Clone the repository:

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

  1. Install dependencies:

npm install

  1. Build the project:

npm run build

Configuration

Add the server to your Claude or Cline MCP settings:

Claude Desktop App

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Cline VSCode Extension

Add to VSCode's MCP settings:

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

Usage

The server provides two main tools:

preview_file

Captures a screenshot and returns HTML content:

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

Screenshots are saved to screenshots/ directory in the project folder.

analyze_content

Analyzes HTML structure:

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

Returns counts of:

  • Headings

  • Paragraphs

  • Images

  • Links

Development

  1. Install dependencies:

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

  1. Make changes in src/

  2. Build:

npm run build

  1. Test locally:

npm run dev

Implementation Details

The server uses the MCP SDK's Server class with proper initialization:

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
          }
        }
      }
    }
  }
);

Key points:

  • Server constructor takes separate metadata and options objects

  • Tools are declared in capabilities.tools

  • Each tool needs a description and inputSchema

  • Screenshots are saved to a local screenshots/ directory

Debugging

  1. Use the MCP Inspector:

npx @modelcontextprotocol/inspector

  1. Connect with:

    • Transport Type: STDIO

    • Command: node

    • Arguments: /path/to/build/index.js

  2. Check Claude OS logs if tools don't appear in the dropdown

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

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.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

B3/5.0
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

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

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).
    65
    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
    C
    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

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/seanivore/mcp-file-preview'

If you have feedback or need assistance with the MCP directory API, please join our Discord server