Skip to main content
Glama
enesjakozh
seanivore

MCP File Preview Server

by seanivore
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

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

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

特徴

  • ファイルプレビュー: 適切な CSS スタイルで HTML ファイルの全ページのスクリーンショットをキャプチャします

  • コンテンツ分析: HTML 構造 (見出し、段落、画像、リンク) を分析する

  • ローカルファイルサポート: ローカルファイルパスとリソースを処理する

  • スクリーンショット管理: スクリーンショットを専用のディレクトリに保存します

Related MCP server: polydoc-mcp

インストール

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

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

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

npm install

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

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>

次の数を返します:

  • 見出し

  • 段落

  • 画像

  • リンク

発達

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

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

  1. src/に変更を加える

  2. 建てる：

npm run build

  1. ローカルでテストする:

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

デバッグ

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

npx @modelcontextprotocol/inspector

  1. 接続:

    • トランスポートタイプ: STDIO

    • コマンド: ノード

    • 引数: /path/to/build/index.js

  2. ドロップダウンにツールが表示されない場合は、Claude OS のログを確認してください。

貢献

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

ライセンス

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

Available Tools

2 tools
analyze_contentC

Analyze HTML content structure

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to local HTML file

TDQS

C2.6/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It only states what the tool does ('Analyze HTML content structure') without revealing any behavioral traits—such as whether it's read-only, destructive, requires specific permissions, handles errors, or has rate limits. This is a significant gap for a tool with no annotation coverage.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and front-loaded with a single phrase, 'Analyze HTML content structure', which efficiently conveys the core purpose without unnecessary words. However, it could be improved by adding a bit more context to enhance clarity without sacrificing brevity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what the analysis returns (e.g., structure details, errors, or metadata), behavioral aspects, or usage context. For a tool with no structured data beyond the input schema, this leaves significant gaps in understanding its full functionality.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the parameter 'filePath' clearly documented as 'Path to local HTML file'. The description adds no additional meaning beyond this, as it doesn't elaborate on parameter usage or constraints. Given the high schema coverage, a baseline score of 3 is appropriate, as the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description 'Analyze HTML content structure' states a clear verb ('Analyze') and resource ('HTML content structure'), but it's vague about what 'analyze' entails—does it extract metadata, validate structure, or something else? It doesn't differentiate from the sibling tool 'preview_file', which might also handle HTML files, leaving ambiguity in purpose.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention the sibling tool 'preview_file' or any other context for usage, such as prerequisites or scenarios where this tool is preferred. This leaves the agent without direction on tool selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

preview_fileB

Preview local HTML file and capture screenshot

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to local HTML file
heightNoViewport height
widthNoViewport width

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions 'preview' and 'capture screenshot' but doesn't specify whether this is a read-only operation, if it modifies files, what permissions are needed, or how the screenshot is returned (e.g., format, storage location). This leaves significant gaps for a tool that interacts with local files and generates outputs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core functionality, making it easy to understand at a glance.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of file interaction and screenshot generation, with no annotations and no output schema, the description is insufficient. It doesn't explain what the tool returns (e.g., screenshot data, file path, error handling), behavioral traits, or integration details, leaving the agent with incomplete information for proper use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, providing clear documentation for all parameters (filePath, height, width). The description adds no additional parameter semantics beyond what the schema already states, so it meets the baseline score of 3 without compensating for any gaps.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('preview' and 'capture screenshot') and resource ('local HTML file'), distinguishing it from the sibling 'analyze_content' which likely performs content analysis rather than visual preview and capture.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention prerequisites, limitations, or comparison with the sibling tool 'analyze_content', leaving the agent without contextual usage instructions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv1.0.0
    • First observedanalyze_content
    • First observedpreview_file
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: analyze_content focuses on structural analysis of HTML content, while preview_file handles file preview and screenshot capture. There is no overlap in functionality, making it easy for an agent to select the appropriate tool without confusion.

Naming Consistency5/5

Both tools follow a consistent verb_noun naming pattern (analyze_content and preview_file), with clear, descriptive names that align with their functions. There are no deviations or mixed conventions, ensuring predictability and readability.

Tool Count2/5

With only two tools, the server feels thin for a 'File Preview Server' that might be expected to handle more file types or operations beyond HTML. While the tools are focused, the count is borderline too few for the apparent scope, limiting functionality.

Completeness2/5

The server is severely incomplete for file preview purposes, as it only supports HTML files with no coverage for other common formats (e.g., images, PDFs, text files). There are significant gaps in the tool surface that will likely cause agent failures when dealing with non-HTML content.

Maintenance

ActivityInactive
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • polydoc-mcp by polydoc-tech

    polydoc-mcpofficial

    polydoc-tech
    A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that converts HTML or URLs to PDF, captures screenshots, and generates EU-compliant e-invoices (Factur-X/ZUGFeRD).
    116 npm
    MIT

  • kage-mcp

    lxyct825-ops
    A
    license
    Not graded
    quality
    C
    maintenance
    A lightweight MCP server for parsing HTML, fetching URLs, rendering terminal-style screenshots, and executing JavaScript on static HTML without external dependencies.
    3
    MIT

  • ShotAPI

    smallhandsome
    A
    license
    Not graded
    quality
    D
    maintenance
    Screenshot and HTML Rendering MCP Server for AI Agents. Capture screenshots, render HTML to images, and generate PDFs via simple API calls. Compatible with Claude, Cursor, and any MCP client.
    1
    MIT

Appeared in Searches