MCP File Preview Server
@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
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"mcp-file-preview": {
"command": "npx",
"args": [
"@modelcontextprotocol/inspector"
]
}
}
}Tools
No tools detected
We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.
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
FAQ from MCP File Preview Server
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.
Frequently asked questions
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.
Basic information
More Other MCP servers
IDA Pro MCP
mrexodiaAI-powered reverse engineering assistant that bridges IDA Pro with language models through MCP.
Codelf
unbugA search tool helps dev to solve the naming things problem.
Peekaboo MCP – lightning-fast macOS screenshots for AI agents
steipetePeekaboo is a macOS CLI & optional MCP server that enables AI agents to capture screenshots of applications, or the entire system, with optional visual question answering through local or remote AI models.
Awesome Mlops
visengerA curated list of references for MLOps
AutoBrowser MCP
autobrowser-aiBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser
Comments