MCP server for previewing local HTML files and capturing screenshots
MCP server for previewing local HTML files and capturing screenshots. Exposed over MCP by the mcp file preview mcp server, that capability becomes something an assistant can invoke while it works, not something you go and do afterwards.
A Model Context Protocol (MCP) server that provides HTML file preview and analysis capabilities. This server enables capturing full-page screenshots of local HTML files and analyzing their structure.
Everything the assistant can do here goes through one of these:
preview_file — Captures a screenshot and returns HTML content: typescript <use_mcp_tool> <server_name>file-preview</server_name> <tool_name>preview_file</tool_name>analyze_content — Analyzes HTML structure: typescript <use_mcp_tool> <server_name>file-preview</server_name> <tool_name>analyze_content</tool_name> {@modelcontextprotocol/inspector on npm is all you need. Most clients run it directly, so configuration is a few lines and a restart.
Plenty of browser automation servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. MCP File Preview's toolset — preview_file, analyze_content — is a fair guide to whether it matches your workflow. It is maintained by seanivore; worth a glance at recent repository activity before you build anything load-bearing on it.
SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.
| Tool | What it does |
|---|---|
| preview_file | Captures a screenshot and returns HTML content: typescript <use_mcp_tool> <server_name>file-preview</server_name> <tool_name>preview_file</tool_name> <arguments> { "filePath": "/path/to/file.html", "width": 1024, // opti |
| analyze_content | Analyzes HTML structure: typescript <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> |
{
"mcpServers": {
"file-preview": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/inspector"]
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.