drio
Open app

MCP File Preview Server

Source

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

Catalog onlyCatalog onlySTDIO

Overview

MCP File Preview Server is a Model Context Protocol (MCP) server designed to provide capabilities for HTML file preview and analysis, enabling users to capture full-page screenshots of HTML files and analyze their structures.

To use the MCP File Preview Server, clone the repository, install the dependencies, build the project, and then configure it for use with either the Claude desktop app or the Cline VSCode extension.

  • Full-page screenshots of HTML files capturing the complete CSS styling. - Detailed analysis of HTML structures including counts of headings, paragraphs, images, and links. - Support for local file paths and resources, allowing the handling of files directly from the user’s system. - Organized management of screenshots saved to a designated directory.
  1. Previewing and capturing screenshots of local HTML documents for web development.
  2. Analyzing the structure of HTML files for documentation or development purposes.
  3. Testing and debugging web pages using local resources.

Add to your AI client

Use these steps to connect MCP File Preview Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

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

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

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

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-file-preview-seanivore": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-file-preview-seanivore"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

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

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

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

FAQ

What types of files can be previewed?

The server primarily supports local HTML files for previewing and analyzing.

Can I customize the screenshot dimensions?

Yes, you can specify optional width and height parameters when capturing screenshots.

Is the server free to use?

Yes, the MCP File Preview Server is open-source and can be used for free.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":538,"uuid":"9f7554bb-f553-43dc-a4fc-ecbded612e9c","name":"mcp-file-preview","title":"MCP File Preview Server","description":"MCP server for HTML file preview and analysis - Has been weird with OS but good on Cline so WIP","avatar_url":"https://avatars.githubusercontent.com/u/54866212?v=4","created_at":"2024-12-30T02:55:02.405Z","updated_at":"2025-01-05T02:55:35.937Z","status":"created","author_name":"seanivore","author_avatar_url":"https://avatars.githubusercontent.com/u/54866212?v=4","tags":"css,html,mcp,file-preview,website-development","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/seanivore/mcp-file-preview","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":null,"user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools