MCP ファイルプレビューサーバー

HTMLファイルのプレビューと分析機能を提供するモデルコンテキストプロトコル（MCP）サーバー。このサーバーは、ローカルHTMLファイルのフルページスクリーンショットをキャプチャし、その構造を分析することを可能にします。

特徴

ファイルプレビュー: 適切な CSS スタイルで HTML ファイルの全ページのスクリーンショットをキャプチャします
コンテンツ分析: HTML 構造 (見出し、段落、画像、リンク) を分析する
ローカルファイルサポート: ローカルファイルパスとリソースを処理する
スクリーンショット管理: スクリーンショットを専用のディレクトリに保存します

インストール

リポジトリをクローンします。

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

依存関係をインストールします:

npm install

プロジェクトをビルドします。

npm run build

構成

Claude または Cline MCP 設定にサーバーを追加します。

クロードデスクトップアプリ

~/Library/Application Support/Claude/claude_desktop_config.jsonに追加します:

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

Cline VSCode 拡張機能

VSCode の MCP 設定に追加します:

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

使用法

サーバーは主に 2 つのツールを提供します。

プレビューファイル

スクリーンショットをキャプチャし、HTML コンテンツを返します。

<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/ディレクトリに保存されます。

コンテンツを分析する

HTML 構造を分析します:

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

次の数を返します:

見出し
段落
画像
リンク

発達

依存関係をインストールします:

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

src/に変更を加える
建てる：

npm run build

ローカルでテストする:

npm run dev

実装の詳細

サーバーは、適切に初期化された MCP SDK の Server クラスを使用します。

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
          }
        }
      }
    }
  }
);

要点:

サーバーコンストラクタは個別のメタデータとオプションオブジェクトを受け取ります
ツールはcapabilities.toolsで宣言されます
各ツールには説明と入力スキーマが必要です
スクリーンショットはローカルのscreenshots/ディレクトリに保存されます

デバッグ

MCP インスペクターを使用します。

npx @modelcontextprotocol/inspector

接続:
- トランスポートタイプ: STDIO
- コマンド: ノード
- 引数: /path/to/build/index.js
ドロップダウンにツールが表示されない場合は、Claude OS のログを確認してください。

貢献

行動規範とプルリクエストの送信プロセスの詳細については、 CONTRIBUTING.md をお読みください。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。

Install Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

HTMLファイルのプレビューと分析機能を提供します。このサーバーは、ローカルHTMLファイルの全ページスクリーンショットをキャプチャし、その構造を分析することを可能にします。

Related MCP Servers

MCP Screenshot Server
sethbang
-
security
F
license
-
quality
Enables capturing screenshots of web pages and local HTML files through a simple MCP tool interface using Puppeteer with configurable options for dimensions and output paths.
Last updated -
1
0
4
JavaScript
MCP Webscan Server
bsmi021
A
security
A
license
A
quality
Enables web content scanning and analysis by fetching, analyzing, and extracting information from web pages using tools like page fetching, link extraction, site crawling, and more.
Last updated -
6
7
TypeScript
MIT License
Fetch MCP Server
zcaceres
A
security
A
license
A
quality
Provides functionality to fetch web content in various formats, including HTML, JSON, plain text, and Markdown.
Last updated -
4
125,855
353
TypeScript
MIT License
MCP Image Placeholder Server
husniadil
A
security
A
license
A
quality
This server generates placeholder image URLs from various providers, supporting input validation and integration with desktop applications like Claude and Cursor.
Last updated -
1
6
MIT License

View all related MCP servers

MCP File Preview Server