Advertise
MCP.so
Sign In

MCP File Preview Server

@seanivore

Repository

Basic information

Category

Other

Transports

stdio

Author

seanivore

About 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 config

Add this server to your MCP-compatible client using the configuration below.

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

MCP File Preview Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

Fetch the live tool list by running this server in a temporary sandbox using the button above.

Overview

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

Frequently asked questions

1

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).

2

How are screenshots stored?

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

3

What are the runtime dependencies?

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

4

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`).

5

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.

Comments

More Other MCP servers

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K

Health by Dr Brad

Dr Brad Stanfield

Health by Dr Brad works out a health plan from your own results: which screening is due at your age, and evidence-based suggestions, each with the reason and the published guideline or study behind it. Your record is one

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K

Screenpipe

screenpipe

YC (S26) | Open Computer History | Continuously record your company computer work, map your workflows, help you find work worth automating, and power your agents' context

22.0K

MaxKB

1Panel-dev

🔥 MaxKB is an open-source platform for building enterprise-grade agents. 强大易用的开源企业级智能体平台。

22.0K
Advertise