MCP ファイルプレビューサーバー
HTMLファイルのプレビューと分析機能を提供するモデルコンテキストプロトコル（MCP）サーバー。このサーバーは、ローカルHTMLファイルのフルページスクリーンショットをキャプチャし、その構造を分析することを可能にします。
特徴
ファイルプレビュー: 適切な CSS スタイルで HTML ファイルの全ページのスクリーンショットをキャプチャします
コンテンツ分析: HTML 構造 (見出し、段落、画像、リンク) を分析する
ローカルファイルサポート: ローカルファイルパスとリソースを処理する
スクリーンショット管理: スクリーンショットを専用のディレクトリに保存します
Related MCP server: MCP Webscan Server
インストール
リポジトリをクローンします。
依存関係をインストールします:
プロジェクトをビルドします。
構成
Claude または Cline MCP 設定にサーバーを追加します。
クロードデスクトップアプリ
~/Library/Application Support/Claude/claude_desktop_config.jsonに追加します:
Cline VSCode 拡張機能
VSCode の MCP 設定に追加します:
使用法
サーバーは主に 2 つのツールを提供します。
プレビューファイル
スクリーンショットをキャプチャし、HTML コンテンツを返します。
スクリーンショットはプロジェクト フォルダーのscreenshots/ディレクトリに保存されます。
コンテンツを分析する
HTML 構造を分析します:
次の数を返します:
見出し
段落
画像
リンク
発達
依存関係をインストールします:
src/に変更を加える建てる：
ローカルでテストする:
実装の詳細
サーバーは、適切に初期化された MCP SDK の Server クラスを使用します。
要点:
サーバーコンストラクタは個別のメタデータとオプションオブジェクトを受け取ります
ツールはcapabilities.toolsで宣言されます
各ツールには説明と入力スキーマが必要です
スクリーンショットはローカルの
screenshots/ディレクトリに保存されます
デバッグ
MCP インスペクターを使用します。
接続:
トランスポートタイプ: STDIO
コマンド: ノード
引数: /path/to/build/index.js
ドロップダウンにツールが表示されない場合は、Claude OS のログを確認してください。
貢献
行動規範とプル リクエストの送信プロセスの詳細については、 CONTRIBUTING.md をお読みください。
ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。