🚀 MCP 文件预览服务器
MCP 文件预览服务器是一个基于 Model Context Protocol (MCP) 的服务器，它具备 HTML 文件预览和分析功能。该服务器不仅能捕获本地 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 设置中：
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 内容：
<server_name>file-previewserver_name>
<tool_name>preview_filetool_name>
<arguments>
{
"filePath": "/path/to/file.html",
"width": 1024, // 可选
"height": 768 // 可选
}
arguments>
截图保存到项目目录中的 screenshots/ 文件夹。
analyze_content
分析 HTML 结构：
<server_name>file-previewserver_name>
<tool_name>analyze_contenttool_name>
<arguments>
{
"filePath": "/path/to/file.html"
}
arguments>
返回以下内容的计数：
- 标题
- 段落
- 图片
- 链接
开发
- 安装依赖项：
npm install @modelcontextprotocol/sdk puppeteer typescript @types/node @types/puppeteer
- 修改
src/中的内容。 - 构建项目：
npm run build
- 本地测试：
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 文件预览服务器。