📌Overview

Purpose: The MCP File Preview Server aims to provide robust HTML file preview and analysis capabilities through a streamlined Model Context Protocol interface.

Overview: This server enables users to capture full-page screenshots of local HTML files while also analyzing their structure, including various content types, thus enhancing the workflow of web development and design.

Key Features:

• File Preview: Captures full-page screenshots of HTML files with accurate CSS styling, allowing for visual verification of content.

• Content Analysis: Analyzes the HTML structure, returning counts of headings, paragraphs, images, and links, which aids in content organization and optimization.

• Local File Support: Allows for seamless handling of local file paths and resources, making it easy to integrate with existing projects and workflows.

• Screenshot Management: Automatically saves screenshots to a dedicated directory, ensuring organized storage and easy access.

---

MCP File Preview Server

A Model Context Protocol (MCP) server that provides HTML file preview and analysis capabilities.

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

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Build the project:

   npm run build
   

Configuration

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

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

2. Make changes in src/.

3. Build:

   npm run build
   

4. Test locally:

   npm run dev
   

Debugging

1. Use the MCP Inspector:

   npx @modelcontextprotocol/inspector
   

2. Connect with:

   • Transport Type: STDIO
   • Command: node
   • Arguments: /path/to/build/index.js

Contributing

Please read 1 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.