📌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. 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 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

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 code of conduct and submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.