The MCP File Preview Server enables HTML file preview and analysis. Its capabilities include:
- Preview HTML files: Capture full-page screenshots of local HTML files with optional viewport width and height settings
- Analyze HTML content: Get structural analysis of HTML files including counts of headings, paragraphs, images, and links
- Handle local files: Process local file paths and resources
- Save screenshots: Store generated screenshots in a dedicated directory
- Integration support: Works with Claude and Cline in both desktop and VSCode environments
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:
- Install dependencies:
- Build the project:
Configuration
Add the server to your Claude or Cline MCP settings:
Claude Desktop App
Add to ~/Library/Application Support/Claude/claude_desktop_config.json
:
Cline VSCode Extension
Add to VSCode's MCP settings:
Usage
The server provides two main tools:
preview_file
Captures a screenshot and returns HTML content:
Screenshots are saved to screenshots/
directory in the project folder.
analyze_content
Analyzes HTML structure:
Returns counts of:
- Headings
- Paragraphs
- Images
- Links
Development
- Install dependencies:
- Make changes in
src/
- Build:
- Test locally:
Implementation Details
The server uses the MCP SDK's Server class with proper initialization:
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:
- 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.
local-only server
The server can only run on the client's local machine because it depends on local resources.
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
- AsecurityAlicenseAqualityThis server enables LLMs to retrieve and process content from web pages, converting HTML to markdown for easier consumption.Last updated 4 days ago161,341TypeScriptMIT License
- AsecurityAlicenseAqualityEnables 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 ago69TypeScriptMIT License
- AsecurityAlicenseAqualityProvides comprehensive document processing, including reading, converting, and manipulating various document formats with advanced text and HTML processing capabilities.Last updated 2 months ago168911TypeScriptMIT License
- -securityFlicense-qualityA demonstration server that provides tools for analyzing project structures and automatically generating comprehensive README files.Last updated 2 months agoPython