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

Installation

Clone the repository:

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

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

Install dependencies:

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

Make changes in src/
Build:

npm run build

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

Use the MCP Inspector:

npx @modelcontextprotocol/inspector

Connect with:
- Transport Type: STDIO
- Command: node
- Arguments: /path/to/build/index.js
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.

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

Provides HTML file preview and analysis capabilities. This server enables capturing full-page screenshots of local HTML files and analyzing their structure.

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 4 days ago
1
61,341
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 7 days ago
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 2 months ago
16
89
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 2 months ago
Python

View all related MCP servers

MCP File Preview Server