MCP 파일 미리보기 서버
HTML 파일 미리보기 및 분석 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 사용하면 로컬 HTML 파일의 전체 페이지 스크린샷을 캡처하고 구조를 분석할 수 있습니다.
특징
파일 미리보기 : 적절한 CSS 스타일을 적용하여 HTML 파일의 전체 페이지 스크린샷을 캡처합니다.
콘텐츠 분석 : HTML 구조(제목, 문단, 이미지, 링크) 분석
로컬 파일 지원 : 로컬 파일 경로 및 리소스 처리
스크린샷 관리 : 스크린샷을 전용 디렉토리에 저장합니다.
Related MCP server: MCP Webscan Server
설치
저장소를 복제합니다.
지엑스피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/puppeteersrc/에서 변경하세요짓다:
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 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.