项目简介

该项目是一个基于 Model Context Protocol (MCP) 构建的服务器，专注于提供 HTML 文件的预览和分析能力。它可以捕获本地 HTML 文件的完整页面截图，并分析其内容结构，例如标题、段落、图片和链接等信息。此服务器旨在作为 Claude 或 Cline 等 MCP 客户端的后端，扩展其处理本地 HTML 文件的能力。

主要功能点

HTML 文件预览: 能够为本地 HTML 文件生成包含 CSS 样式的完整页面截图，方便查看网页的实际渲染效果。
内容结构分析: 可以分析 HTML 文件的结构，提取标题、段落、图片和链接的数量，帮助理解页面内容概况。
本地文件支持: 专注于处理本地文件路径的 HTML 文件，无需联网即可工作。
截图管理: 生成的屏幕截图会保存在服务器项目目录下的 'screenshots/' 文件夹中，方便管理和查找。

安装步骤

克隆仓库:

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

安装依赖:
```
npm install
```
构建项目:
```
npm run build
```

服务器配置

要将此 MCP 服务器添加到 Claude Desktop App 或 Cline VSCode Extension，您需要配置 MCP 客户端，指定服务器的启动命令和参数。以下是配置信息，请根据您的实际项目路径进行调整。请注意，您只需复制以下 JSON 配置到 MCP 客户端的配置文件中，无需修改代码。

Claude Desktop App 配置

打开 Claude Desktop App 的配置文件 '~/Library/Application Support/Claude/claude_desktop_config.json'，在 'mcpServers' 字段中添加以下配置：

{
  "mcpServers": {
    "file-preview": {  // 服务器名称，可以自定义
      "command": "node", // 启动命令，这里使用 node
      "args": ["/path/to/mcp-file-preview/build/index.js"] // 启动参数，指向构建后的 index.js 文件，请将 "/path/to/mcp-file-preview" 替换为您的项目实际路径
    }
  }
}

请务必将 '/path/to/mcp-file-preview' 替换为您 'mcp-file-preview' 项目在您电脑上的实际路径。

Cline VSCode Extension 配置

打开 VSCode 的设置 (Settings)，搜索 "Cline MCP Servers"，点击 "Edit in settings.json"，在 'mcpServers' 字段中添加与 Claude Desktop App 相同的配置：

{
  "mcpServers": {
    "file-preview": {  // 服务器名称，可以自定义
      "command": "node", // 启动命令，这里使用 node
      "args": ["/path/to/mcp-file-preview/build/index.js"] // 启动参数，指向构建后的 index.js 文件，请将 "/path/to/mcp-file-preview" 替换为您的项目实际路径
    }
  }
}

同样，请务必将 '/path/to/mcp-file-preview' 替换为您 'mcp-file-preview' 项目在您电脑上的实际路径。

基本使用方法

配置完成后，在 Claude 或 Cline 中，您可以使用以下工具与该 MCP 服务器交互：

预览 HTML 文件 (preview_file)

使用 '<use_mcp_tool>' 标签调用 'preview_file' 工具，指定要预览的 HTML 文件路径。

<use_mcp_tool>
<server_name>file-preview</server_name>  // 服务器名称，与配置中的名称一致
<tool_name>preview_file</tool_name>   // 工具名称：预览文件
<arguments>
{
  "filePath": "/path/to/file.html",  //  要预览的 HTML 文件路径，请替换为实际文件路径
  "width": 1024,   // 可选：截图宽度，默认为 1024
  "height": 768    // 可选：截图高度，默认为 768
}
</arguments>
</use_mcp_tool>

服务器会返回截图保存路径和 HTML 文件内容。截图会保存在 'screenshots/' 目录下。

分析 HTML 内容结构 (analyze_content)

使用 '<use_mcp_tool>' 标签调用 'analyze_content' 工具，指定要分析的 HTML 文件路径。

<use_mcp_tool>
<server_name>file-preview</server_name>  // 服务器名称，与配置中的名称一致
<tool_name>analyze_content</tool_name>  // 工具名称：分析内容
<arguments>
{
  "filePath": "/path/to/file.html"   // 要分析的 HTML 文件路径，请替换为实际文件路径
}
</arguments>
</use_mcp_tool>

服务器会返回 JSON 格式的分析结果，包含 HTML 文件中标题、段落、图片和链接的数量。

请确保将 '<arguments>' 中的 'filePath' 替换为您的本地 HTML 文件的实际路径。

关键词