AI导哈

HTML文件预览分析服务器

一个提供HTML文件预览和分析功能的MCP服务器，支持捕获本地HTML文件的全页截图并分析其结构。

  • by seanivore
  • JavaScript
  • 本地部署
  • 24 星标
  • 更新于
在 GitHub 查看 seanivore/mcp-file-preview

使用说明

MCP文件预览服务器

提供HTML文件预览和分析功能的模型上下文协议（MCP）服务器。此服务器可以捕获本地HTML文件的全页屏幕截图并分析其结构。

特性

  • 文件预览：使用适当的CSS样式捕获HTML文件的整页截图
  • 内容分析：分析HTML结构（标题、段落、图像、链接）
  • 本地文件支持：处理本地文件路径和资源
  • 屏幕截图管理：将屏幕截图保存到专用目录

安装

  1. 克隆存储库：
git clone https://github.com/your-username/mcp-file-preview.git
cd mcp-file-preview
  1. 安装依赖项：
npm install
  1. 构建项目：
npm run build

配置

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

克劳德桌面应用程序

增添 ~/Library/Application Support/Claude/claude_desktop_config.json:

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

临床VSCode扩展

添加到VSCode的MCP设置中：

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

用法

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

预览文件

捕获屏幕截图并返回HTML内容：

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

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

分析内容

分析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
  1. 进行更改 src/
  2. 构建：
npm run build
  1. 本地测试：
npm run dev

实现细节

服务器使用具有正确初始化的MCP SDK的server类：

this.server = new Server(
  // Metadata object
  {
    name: 'file-preview-server',
    version: '0.1.0'
  },
  // Options object with capabilities
  {
    capabilities: {
      tools: {
        preview_file: {
          description: 'Preview local HTML file and capture screenshot',
          inputSchema: {
            // ... schema definition
          }
        }
      }
    }
  }
);

要点：

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

调试

  1. 使用MCP检查器：
npx @modelcontextprotocol/inspector

  1. 连接：

    • 传输类型：STDIO
    • 命令：节点
    • 参数：/path/to/build/index.js

  2. 如果下拉列表中没有显示工具，请检查Claude OS日志

贡献

请阅读 贡献.md 有关我们的行为准则和提交pull请求流程的详细信息。

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

相关 MCP