MCP File Preview

🚀 MCP 文件预览服务器

MCP 文件预览服务器是一个基于 Model Context Protocol (MCP) 的服务器，它具备 HTML 文件预览和分析功能。该服务器不仅能捕获本地 HTML 文件的全页面截图，还能对其结构进行详细分析。

✨ 主要特性

• 文件预览：可捕获带有正确 CSS 样式的 HTML 文件的全页面截图。
• 内容分析：能够分析 HTML 结构，涵盖标题、段落、图片、链接等元素。
• 本地文件支持：支持处理本地文件路径和资源。
• 截图管理：将截图保存到专用目录。

📦 安装指南

1. 克隆仓库：

git clone https://github.com/your-username/mcp-file-preview.git
cd mcp-file-preview

2. 安装依赖项：

npm install

3. 构建项目：

npm run build

📚 详细文档

配置

将服务器添加到您的 Claude 或 Cline MCP 设置中：

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 设置中添加：

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

使用方法

该服务器提供两个主要工具：

基础用法

preview_file

捕获截图并返回 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>

截图保存到项目目录中的 screenshots/ 文件夹。

analyze_content

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

返回以下内容的计数：

• 标题
• 段落
• 图片
• 链接

开发

1. 安装依赖项：

npm install @modelcontextprotocol/sdk puppeteer typescript @types/node @types/puppeteer

2. 修改 src/ 中的内容。
3. 构建项目：

npm run build

4. 本地测试：

npm run dev

🔧 技术细节

该服务器使用 MCP SDK 的 Server 类，并进行适当的初始化：

this.server = new Server(
  // 元数据对象
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // 选项对象，包含功能
  {
    capabilities: {
      tools: {
        preview_file: {
          description: '预览本地 HTML 文件并捕获截图',
          inputSchema: {
            // ... 模式定义
          }
        }
      }
    }
  }
);

关键点：

• Server 构造函数接受单独的元数据和选项对象。
• 工具在 capabilities.tools 中声明。
• 每个工具需要描述和 inputSchema。
• 截图保存到本地 screenshots/ 目录。

调试

完成初步翻译后，我会通读一遍，检查是否有遗漏或错误的地方，特别是代码块和路径是否正确无误。这一步非常重要，因为任何小错误都可能导致用户在实际操作中遇到问题。

最后，确保整个翻译结果流畅自然，没有语法错误，并且完全符合用户的要求——只返回翻译后的内容，不添加其他信息。这样，用户就能获得一份高质量的中文技术文档，帮助他们顺利理解和使用该 MCP 文件预览服务器。