Skip to main content
Glama
enesjakozh
seanivore

MCP File Preview Server

by seanivore
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

MCP 文件预览服务器

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

特征

  • 文件预览：使用适当的 CSS 样式捕获 HTML 文件的整页截图

  • 内容分析：分析 HTML 结构（标题、段落、图像、链接）

  • 本地文件支持：处理本地文件路径和资源

  • 截图管理：将截图保存到专用目录

Related MCP server: polydoc-mcp

安装

  1. 克隆存储库：

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

  1. 安装依赖项：

npm install

  1. 构建项目：

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>

返回计数：

  • 标题

  • 段落

  • 图片

  • 链接

发展

  1. 安装依赖项：

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

  1. 在src/中进行更改

  2. 建造：

npm run build

  1. 本地测试：

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/目录

调试

  1. 使用 MCP 检查器：

npx @modelcontextprotocol/inspector

  1. 连接：

    • 传输类型：STDIO

    • 命令：node

    • 参数：/path/to/build/index.js

  2. 如果下拉菜单中没有出现工具，请检查 Claude OS 日志

贡献

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

执照

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

Available Tools

2 tools
analyze_contentC

Analyze HTML content structure

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to local HTML file

TDQS

C2.6/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It only states what the tool does ('Analyze HTML content structure') without revealing any behavioral traits—such as whether it's read-only, destructive, requires specific permissions, handles errors, or has rate limits. This is a significant gap for a tool with no annotation coverage.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and front-loaded with a single phrase, 'Analyze HTML content structure', which efficiently conveys the core purpose without unnecessary words. However, it could be improved by adding a bit more context to enhance clarity without sacrificing brevity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what the analysis returns (e.g., structure details, errors, or metadata), behavioral aspects, or usage context. For a tool with no structured data beyond the input schema, this leaves significant gaps in understanding its full functionality.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the parameter 'filePath' clearly documented as 'Path to local HTML file'. The description adds no additional meaning beyond this, as it doesn't elaborate on parameter usage or constraints. Given the high schema coverage, a baseline score of 3 is appropriate, as the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description 'Analyze HTML content structure' states a clear verb ('Analyze') and resource ('HTML content structure'), but it's vague about what 'analyze' entails—does it extract metadata, validate structure, or something else? It doesn't differentiate from the sibling tool 'preview_file', which might also handle HTML files, leaving ambiguity in purpose.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention the sibling tool 'preview_file' or any other context for usage, such as prerequisites or scenarios where this tool is preferred. This leaves the agent without direction on tool selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

preview_fileB

Preview local HTML file and capture screenshot

ParametersJSON Schema
NameRequiredDescriptionDefault
filePathYesPath to local HTML file
heightNoViewport height
widthNoViewport width

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions 'preview' and 'capture screenshot' but doesn't specify whether this is a read-only operation, if it modifies files, what permissions are needed, or how the screenshot is returned (e.g., format, storage location). This leaves significant gaps for a tool that interacts with local files and generates outputs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core functionality, making it easy to understand at a glance.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of file interaction and screenshot generation, with no annotations and no output schema, the description is insufficient. It doesn't explain what the tool returns (e.g., screenshot data, file path, error handling), behavioral traits, or integration details, leaving the agent with incomplete information for proper use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, providing clear documentation for all parameters (filePath, height, width). The description adds no additional parameter semantics beyond what the schema already states, so it meets the baseline score of 3 without compensating for any gaps.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('preview' and 'capture screenshot') and resource ('local HTML file'), distinguishing it from the sibling 'analyze_content' which likely performs content analysis rather than visual preview and capture.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. The description doesn't mention prerequisites, limitations, or comparison with the sibling tool 'analyze_content', leaving the agent without contextual usage instructions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv1.0.0
    • First observedanalyze_content
    • First observedpreview_file
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: analyze_content focuses on structural analysis of HTML content, while preview_file handles file preview and screenshot capture. There is no overlap in functionality, making it easy for an agent to select the appropriate tool without confusion.

Naming Consistency5/5

Both tools follow a consistent verb_noun naming pattern (analyze_content and preview_file), with clear, descriptive names that align with their functions. There are no deviations or mixed conventions, ensuring predictability and readability.

Tool Count2/5

With only two tools, the server feels thin for a 'File Preview Server' that might be expected to handle more file types or operations beyond HTML. While the tools are focused, the count is borderline too few for the apparent scope, limiting functionality.

Completeness2/5

The server is severely incomplete for file preview purposes, as it only supports HTML files with no coverage for other common formats (e.g., images, PDFs, text files). There are significant gaps in the tool surface that will likely cause agent failures when dealing with non-HTML content.

Maintenance

ActivityInactive
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • polydoc-mcp by polydoc-tech

    polydoc-mcpofficial

    polydoc-tech
    A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that converts HTML or URLs to PDF, captures screenshots, and generates EU-compliant e-invoices (Factur-X/ZUGFeRD).
    116 npm
    MIT

  • kage-mcp

    lxyct825-ops
    A
    license
    Not graded
    quality
    C
    maintenance
    A lightweight MCP server for parsing HTML, fetching URLs, rendering terminal-style screenshots, and executing JavaScript on static HTML without external dependencies.
    3
    MIT

  • ShotAPI

    smallhandsome
    A
    license
    Not graded
    quality
    D
    maintenance
    Screenshot and HTML Rendering MCP Server for AI Agents. Capture screenshots, render HTML to images, and generate PDFs via simple API calls. Compatible with Claude, Cursor, and any MCP client.
    1
    MIT

Appeared in Searches