MCP File Preview Server

@seanivore

リポジトリ

基本情報

カテゴリ

その他

トランスポート

stdio

作者

seanivore

MCP File Preview Server について

MCP server for HTML file preview and analysis - Has been weird with OS but good on Cline so WIP

#css #html #mcp#file-preview#website-development

MCP File Preview Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "mcp-file-preview": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector"
      ]
    }
  }
}

MCP File Preview Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

上のボタンで一時的なサンドボックスでこのサーバーを実行し、ツール一覧を取得できます。

概要

What is MCP File Preview Server?

A Model Context Protocol (MCP) server that provides HTML file preview and analysis capabilities. It enables capturing full-page screenshots of local HTML files and analyzing their structure, intended for developers using MCP-compatible clients like Claude or Cline.

How to use MCP File Preview Server?

Install by cloning the repository, running npm install and npm run build. Then add the server to your MCP settings (Claude Desktop or Cline VSCode) using the built index.js with a STDIO transport. Use the preview_file tool to capture a screenshot and return HTML content, and the analyze_content tool to get counts of headings, paragraphs, images, and links.

Key features of MCP File Preview Server

Capture full-page screenshots of HTML files with CSS styling
Analyze HTML structure (headings, paragraphs, images, links)
Handle local file paths and resources
Save screenshots to a dedicated screenshots/ directory

Use cases of MCP File Preview Server

Preview a local HTML file and capture its visual rendering
Analyze HTML structure during development or QA
Obtain content statistics (headings, links, images) for documentation

よくある質問

What tools does MCP File Preview Server provide?

It provides `preview_file` (for capturing screenshots and returning HTML content) and `analyze_content` (for analyzing HTML structure).

How are screenshots stored?

Screenshots are saved to a `screenshots/` directory in the project folder.

What are the runtime dependencies?

Node.js, npm, and the Puppeteer package for headless browser rendering, along with the MCP SDK and TypeScript.

How do I connect the server to my MCP client?

Use a STDIO transport by specifying `node` as the command and the path to `build/index.js` as the argument, configured in the client's MCP settings (e.g., `claude_desktop_config.json`).

Does the server require authentication or network access?

No authentication is needed, and it only works with local file paths — no remote URLs are supported.

「その他」の他のコンテンツ

Handl

Handl speaks the Model Context Protocol. Your whole billing operation — projects, invoices, clients, reports, approvals — as tools any AI assistant can call, inside your autonomy rules.

ICSS

chokcoco

不止于 CSS

20.7K

Next Generation Movers: free moving quotes (remote MCP)

Next Generation Movers

Free moving quotes for AI agents from Next Generation Movers, a licensed interstate mover (USDOT 3764697). US long-distance nationwide and local DC/MD/VA. Indicative ballpark price and booking options; optional $0.01 x40