MCP File Preview

🚀 MCP File Preview Server

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

🚀 Quick Start

This MCP server offers functionalities for previewing HTML files and analyzing their content. It can capture full-page screenshots with correct CSS styling and analyze the HTML structure.

✨ Features

• File Preview: Capture full-page screenshots of HTML files with correct CSS styling.
• 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 App

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:

💻 Usage Examples

Basic Usage

<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 will be saved to the screenshots/ folder in the project directory.

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

This will return 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 initializes it appropriately:

this.server = new Server(
  // Metadata object
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // Options object containing capabilities
  {
    capabilities: {
      tools: {
        preview_file: {
          description: 'Preview local HTML files and capture screenshots',
          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.

🐞 Debugging

After the initial translation, I'll read through it to check for any omissions or errors, especially in code blocks and paths. This step is crucial as any small error can cause users to encounter issues during 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 this MCP file preview server smoothly.