MCP File Preview

🚀 MCP File Preview Server

A Model Context Protocol (MCP) server that provides HTML file preview and analysis functions. This server can capture full-page screenshots of local HTML files and analyze their structures.

🚀 Quick Start

The MCP File Preview Server offers HTML file preview and analysis capabilities. It can capture full-page screenshots of local HTML files with correct CSS styles and analyze their structures.

✨ Features

• File Preview: Capture full-page screenshots of HTML files with correct CSS styles.
• Content Analysis: Analyze HTML structures (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

📚 Documentation

Configuration

Add the server to your Claude or Cline MCP settings:

Claude Desktop Application

Add the following 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 the following to the MCP settings in VSCode:

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

Usage

The server provides two main tools:

preview_file

Capture a screenshot and return 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>

The screenshot is saved to the screenshots/ folder in the project directory.

analyze_content

Analyze the 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 the counts of the following:

• Headings
• Paragraphs
• Images
• Links

Development

1. Install dependencies:

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

2. Modify the content in src/.
3. Build the project:

npm run build

4. Test locally:

npm run dev

🔧 Technical Details

The server uses the Server class from the MCP SDK and performs appropriate initialization:

this.server = new Server(
  // Metadata object
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // Options object containing capabilities
  {
    capabilities: {
      tools: {
        preview_file: {
          description: 'Preview a local HTML file and capture a screenshot',
          inputSchema: {
            // ... Schema definition
          }
        }
      }
    }
  }
);

Key points:

• The Server constructor accepts separate metadata and options objects.
• Tools are declared in capabilities.tools.
• Each tool requires a description and an inputSchema.
• Screenshots are saved to the local screenshots/ directory.

💡 Usage Tip

After completing the initial translation, read through it carefully to check for any omissions or errors, especially in code blocks and paths. This step is crucial because any small error can cause users to encounter problems in actual operations.

Finally, ensure that the entire translation is smooth and natural, free of grammar errors, and fully meets the user's requirements - only return the translated content without adding other information. In this way, users can obtain a high-quality English technical document to help them understand and use the MCP File Preview Server smoothly.