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. 저장소를 복제합니다.

지엑스피1

  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"]
    }
  }
}

클라인 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의 서버 클래스를 사용합니다.

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에 선언됩니다.

  • 각 도구에는 설명과 inputSchema가 필요합니다.

  • 스크린샷은 로컬 screenshots/ 디렉토리에 저장됩니다.

디버깅

  1. MCP 검사기를 사용하세요:

npx @modelcontextprotocol/inspector

  1. 다음과 연결:

    • 전송 유형: STDIO

    • 명령어: 노드

    • 인수: /path/to/build/index.js

  2. 드롭다운에 도구가 나타나지 않으면 Claude OS 로그를 확인하세요.

기여하다

행동 강령과 풀 리퀘스트 제출 프로세스에 대한 자세한 내용은 CONTRIBUTING.md를 읽어보세요.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

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