广告合作
MCP.so
登录

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

常见问题

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.

评论

其他 分类下的更多 MCP 服务器

FastMCP v2 🚀

jlowin

🚀 The fast, Pythonic way to build MCP servers and clients.

26.0K

Yuppsy

Yuppsy MCP: build and publish real estate websites from your AI assistant. Yuppsy lets your AI assistant create live websites for real estate agents and individual property listings. You don't need a designer or any code

EverArt

modelcontextprotocol

Model Context Protocol Servers

88.1K

🚀 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

Awesome Mlops

visenger

A curated list of references for MLOps

14.0K
广告合作