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

Model Context Protocol (MCP) サーバで、HTML ファイルのプレビューと分析機能を提供します。このサーバは、ローカルの 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 設定に追加します：

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,  // オプション
  "height": 768   // オプション
}
</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>

以下の内容のカウントを返します：

見出し
段落
画像
リンク

🚧 開発

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

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

src/ 内の内容を変更します。
プロジェクトをビルドします：

npm run build

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

npm run dev

🔧 技術詳細

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

this.server = new Server(
  // メタデータオブジェクト
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // 機能を含むオプションオブジェクト
  {
    capabilities: {
      tools: {
        preview_file: {
          description: 'ローカルの HTML ファイルをプレビューし、スクリーンショットを取得する',
          inputSchema: {
            // ... スキーマ定義
          }
        }
      }
    }
  }
);