MCP File Preview

🚀 MCP 文件預覽服務器

MCP 文件預覽服務器是一個基於 Model Context Protocol (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: {
            // ... 模式定義
          }
        }
      }
    }
  }
);

關鍵點：

• Server 構造函數接受單獨的元數據和選項對象。
• 工具在 capabilities.tools 中聲明。
• 每個工具需要描述和 inputSchema。
• 截圖保存到本地 screenshots/ 目錄。

調試

完成初步翻譯後，我會通讀一遍，檢查是否有遺漏或錯誤的地方，特別是代碼塊和路徑是否正確無誤。這一步非常重要，因為任何小錯誤都可能導致用戶在實際操作中遇到問題。

最後，確保整個翻譯結果流暢自然，沒有語法錯誤，並且完全符合用戶的要求——只返回翻譯後的內容，不添加其他信息。這樣，用戶就能獲得一份高質量的中文技術文檔，幫助他們順利理解和使用該 MCP 文件預覽服務器。