MCP 파일 미리보기 서버

HTML 파일 미리보기 및 분석 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 사용하면 로컬 HTML 파일의 전체 페이지 스크린샷을 캡처하고 구조를 분석할 수 있습니다.

특징

파일 미리보기 : 적절한 CSS 스타일을 적용하여 HTML 파일의 전체 페이지 스크린샷을 캡처합니다.
콘텐츠 분석 : HTML 구조(제목, 문단, 이미지, 링크) 분석
로컬 파일 지원 : 로컬 파일 경로 및 리소스 처리
스크린샷 관리 : 스크린샷을 전용 디렉토리에 저장합니다.

설치

저장소를 복제합니다.

지엑스피1

종속성 설치:

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

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

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/ 디렉토리에 저장됩니다.

디버깅

MCP 검사기를 사용하세요:

npx @modelcontextprotocol/inspector

다음과 연결:
- 전송 유형: STDIO
- 명령어: 노드
- 인수: /path/to/build/index.js
드롭다운에 도구가 나타나지 않으면 Claude OS 로그를 확인하세요.

기여하다

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

특허

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

MCP File Preview Server