mcp-file-preview

Name: mcp-file-preview
Availability: InStock
Author: seanivore

MCPファイルプレビューサーバーは、HTMLファイルのプレビューと分析機能を提供します。ローカルHTMLファイルの全ページスクリーンショットをキャプチャし、その構造を分析することができます。特に、見出し、段落、画像、リンクの分析が可能で、スクリーンショットを専用のディレクトリに保存する機能も備えています。

GitHub 公式サイト

GitHubスター

ユーザー評価

未評価

フォーク

イシュー

閲覧数

お気に入り

README

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