MCP ファイルプレビューサーバー
HTMLファイルのプレビューと分析機能を提供するモデルコンテキストプロトコル（MCP）サーバー。このサーバーは、ローカルHTMLファイルのフルページスクリーンショットをキャプチャし、その構造を分析することを可能にします。
特徴
ファイルプレビュー: 適切な CSS スタイルで HTML ファイルの全ページのスクリーンショットをキャプチャします
コンテンツ分析: HTML 構造 (見出し、段落、画像、リンク) を分析する
ローカルファイルサポート: ローカルファイルパスとリソースを処理する
スクリーンショット管理: スクリーンショットを専用のディレクトリに保存します
Related MCP server: MCP Webscan Server
インストール
リポジトリをクローンします。
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/puppeteersrc/に変更を加える建てる：
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ファイルを参照してください。