MCP File Preview Server

一个 Model Context Protocol (MCP) 服务器，提供 HTML 文件的预览和结构分析功能。

功能简介

• 📸 HTML 截图：捕获完整页面的预览
• 🔍 结构分析：获取 HTML 元素统计（标题、段落、图片、链接等）
• 📁 本地文件支持：处理本地文件和资源

安装

git clone https://github.com/your-username/mcp-file-preview.git
cd mcp-file-preview
npm install
npm run build

配置

Claude 桌面应用

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "file-preview": {
      "command": "node",
      "args": ["/path/to/mcp-file-preview/build/index.js"]
    }
  }
}

Cline VSCode 扩展

在 VSCode 的 MCP 设置中添加相同配置。

使用方法

1. 预览 HTML 文件

<use_mcp_tool>
<server_name>file-preview</server_name>
<tool_name>preview_file</tool_name>
<arguments>
{
  "filePath": "/path/to/file.html",
  "width": 1024,  // 可选
  "height": 768   // 可选
}
</arguments>
</use_mcp_tool>

2. 分析 HTML 内容

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

调试

使用 MCP 检查器：

npx @modelcontextprotocol/inspector

注意

该工具在 Cline 上运行良好，但在某些操作系统上可能表现异常，开发仍在进行中。

许可证

MIT