local-only server

The server can only run on the client’s local machine because it depends on local resources.

MCP 文件预览服务器

提供 HTML 文件预览和分析功能的模型上下文协议 (MCP) 服务器。该服务器支持捕获本地 HTML 文件的全页面截图并分析其结构。

特征

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

安装

克隆存储库：

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

安装依赖项：

npm install

构建项目：

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"]
    }
  }
}

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

返回计数：

标题
段落
图片
链接

发展

安装依赖项：

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

在src/中进行更改
建造：

npm run build

本地测试：

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 中声明
每个工具都需要一个描述和输入模式
屏幕截图保存到本地screenshots/目录

调试

使用 MCP 检查器：

npx @modelcontextprotocol/inspector

连接：
- 传输类型：STDIO
- 命令：node
- 参数：/path/to/build/index.js
如果下拉菜单中没有出现工具，请检查 Claude OS 日志

贡献

请阅读CONTRIBUTING.md了解我们的行为准则和提交拉取请求的流程的详细信息。

执照

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

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

提供 HTML 文件预览和分析功能。该服务器可以捕获本地 HTML 文件的整页截图并分析其结构。

MCP File Preview Server