MCP File Preview Server logo

MCP File Preview Server

by seanivore

The MCP File Preview Server provides HTML file preview and analysis capabilities. It enables capturing full-page screenshots of local HTML files and analyzing their structure.

View on GitHub

Last updated: N/A

What is MCP File Preview Server?

An MCP server designed to preview and analyze local HTML files. It allows users to capture screenshots of HTML files with CSS styling and analyze their structure.

How to use MCP File Preview Server?

  1. Clone the repository. 2. Install dependencies using npm install. 3. Build the project using npm run build. 4. Configure the server in your Claude or Cline MCP settings, providing the path to the built index.js file. 5. Use the preview_file tool to capture screenshots and the analyze_content tool to analyze HTML structure.

Key features of MCP File Preview Server

  • File Preview

  • Content Analysis

  • Local File Support

  • Screenshot Management

Use cases of MCP File Preview Server

  • Previewing HTML files for Claude or Cline

  • Analyzing HTML structure for content extraction

  • Generating screenshots of HTML content

  • Debugging HTML rendering issues

FAQ from MCP File Preview Server

What is MCP?

MCP stands for Model Context Protocol, a framework for integrating external tools with language models.

Where are the screenshots saved?

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

What analysis does analyze_content perform?

The analyze_content tool counts the number of headings, paragraphs, images, and links in the HTML file.

How do I debug the server?

Use the MCP Inspector and check Claude OS logs if tools don't appear in the dropdown.

What are the requirements for development?

Install the development dependencies listed in the README and use the npm run build command to build the project.