MCP 文件预览服务器
提供 HTML 文件预览和分析功能的模型上下文协议 (MCP) 服务器。该服务器支持捕获本地 HTML 文件的全页面截图并分析其结构。
特征
文件预览：使用适当的 CSS 样式捕获 HTML 文件的整页截图
内容分析：分析 HTML 结构（标题、段落、图像、链接）
本地文件支持：处理本地文件路径和资源
截图管理：将截图保存到专用目录
Related MCP server: MCP Webscan Server
安装
克隆存储库：
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文件。