MCP File Preview Server

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

HTML ファイルのプレビューおよび分析機能を提供する Model Context Protocol（MCP）サーバーです。このサーバーを使うと、ローカルの HTML ファイルの全ページスクリーンショットを撮影し、その構造を分析できます。

特長

• ファイルプレビュー：適切な CSS スタイルを適用した HTML ファイルの全ページスクリーンショットを撮影します
• コンテンツ分析：HTML 構造（見出し、段落、画像、リンク）を分析します
• ローカルファイルのサポート：ローカルのファイルパスとリソースを扱います
• スクリーンショット管理：スクリーンショットを専用ディレクトリに保存します

インストール

1. リポジトリをクローンします：

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

2. 依存関係をインストールします：

npm install

3. プロジェクトをビルドします：

npm run build

設定

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

Claude デスクトップアプリ

~/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 つのツールを提供します：

preview_file

スクリーンショットを撮影し、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/ ディレクトリに保存されます。

analyze_content

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>

以下の件数を返します：

• 見出し
• 段落
• 画像
• リンク

開発

1. 依存関係をインストールします：

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

2. src/ に変更を加えます
3. ビルドします：

npm run build

4. ローカルでテストします：

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

主なポイント：

• Server コンストラクターには、メタデータオブジェクトとオプションオブジェクトを個別に渡します
• ツールは capabilities.tools で宣言します
• 各ツールには説明と inputSchema が必要です
• スクリーンショットはローカルの screenshots/ ディレクトリに保存されます

デバッグ

1. MCP Inspector を使用します：

npx @modelcontextprotocol/inspector

2. 以下を指定して接続します：

   • トランスポートの種類：STDIO
   • コマンド：node
   • 引数：/path/to/build/index.js

3. ツールがドロップダウンに表示されない場合は、Claude OS のログを確認します

貢献

行動規範およびプルリクエストの提出手順については、CONTRIBUTING.md をお読みください。

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細については LICENSE ファイルをご覧ください。