MCP File Preview Server

MCP File Preview Server

site icon
2024.12.27 12
JavaScriptHTML 文件预览内容分析文件管理
MCP File Preview Server 是一个基于 Model Context Protocol (MCP) 的服务,提供 HTML 文件预览和分析功能。该服务能够捕获本地 HTML 文件的完整页面截图,并分析其结构。
View on GitHub

Overview

基本能力

产品定位

MCP File Preview Server 是一个专门用于 HTML 文件预览和分析的工具,适用于开发者和内容创作者,帮助他们快速查看和分析 HTML 文件的结构和内容。

核心功能

  • 文件预览:捕获带有正确 CSS 样式的 HTML 文件的完整页面截图。
  • 内容分析:分析 HTML 结构(标题、段落、图片、链接等)。
  • 本地文件支持:处理本地文件路径和资源。
  • 截图管理:将截图保存到指定的目录。

适用场景

  • 开发者需要快速预览本地 HTML 文件的效果。
  • 内容创作者需要分析 HTML 文件的结构和内容。
  • 需要将 HTML 文件转换为截图以供进一步使用。

工具列表

  1. preview_file:捕获 HTML 文件的截图并返回 HTML 内容。
  2. 能力:支持指定文件路径、宽度和高度,生成截图并保存到指定目录。
  3. analyze_content:分析 HTML 文件的结构。
  4. 能力:返回 HTML 文件中标题、段落、图片和链接的数量。

常见问题解答

  • 问题:工具未出现在下拉列表中。 解决方案:检查 Claude OS 日志。
  • 问题:截图未生成。 解决方案:确保文件路径正确,并检查 screenshots/ 目录是否存在。

使用教程

使用依赖

  1. 确保已安装 Node.js 和 npm。
  2. 安装依赖: bash npm install @modelcontextprotocol/sdk puppeteer typescript @types/node @types/puppeteer

安装教程

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

调试方式

  1. 使用 MCP Inspector: bash npx @modelcontextprotocol/inspector
  2. 连接设置:
  3. 传输类型:STDIO
  4. 命令:node
  5. 参数:/path/to/build/index.js
  6. 检查日志:如果工具未出现在下拉列表中,检查 Claude OS 日志。

许可证

该项目遵循 MIT 开源许可条款,请参阅 MIT 了解完整条款。