File Preview

MCP server for HTML file preview and analysis - Has been weird with OS but good on Cline so WIP

javascript

24

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

The MCP File Preview Server lets you preview local HTML files by capturing full-page, CSS-correct screenshots and analyzing HTML structure, including headings, paragraphs, images, and links. It supports local file paths and saves screenshots to a dedicated directory for easy review.

How to use

You run the server as a local MCP endpoint and then invoke its tools from your MCP client. Start by ensuring the server is available to your client, then use the preview_file tool to capture a screenshot of a local HTML file and obtain the HTML content back. Use the analyze_content tool to count headings, paragraphs, images, and links in a given HTML file. Screenshots are stored in the local screenshots/ directory within the project.

Before calling a tool, prepare the following: the absolute path to the HTML file you want to preview, and optional width and height to control the screenshot resolution. For example, to capture a 1024x768 screenshot of your page, specify filePath with the path to your file and width/height values. The server handles local file paths and resources, so you can inspect files stored on your machine.

How to install

Prerequisites: Node.js and npm must be installed on your machine.

Clone the project and enter the directory

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

Install dependencies

npm install

Build the project

npm run build

Additional information

Configuration options show how to connect the server to your MCP client. The server can be run in a local environment using a stdio configuration that launches the Node.js process and points to the built index file.

Usage notes: the server exposes two main tools. The preview_file tool captures a screenshot and returns HTML content, while analyze_content returns counts of headings, paragraphs, images, and links. Screenshots are saved in a screenshots/ directory within the project.

Available tools

preview_file

Capture a screenshot of a local HTML file and return the HTML content; supports optional width and height to control the screenshot size.

analyze_content

Analyze the HTML structure of a file to count headings, paragraphs, images, and links.