MCP 文件预览服务器

一个模型上下文协议 (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: {
            // ... schema definition
          }
        }
      }
    }
  }
);

要点：

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

调试

1. 使用 MCP Inspector:

npx @modelcontextprotocol/inspector

2. 连接方式:

   • 传输类型: STDIO
   • 命令: node
   • 参数: /path/to/build/index.js

3. 如果工具未出现在下拉列表中，请检查 Claude OS 日志

贡献

请阅读 CONTRIBUTING.md 以了解我们的行为准则以及提交拉取请求的流程。

许可证

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE 文件。