MCP 파일 미리보기 서버
HTML 파일 미리보기 및 분석 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 사용하면 로컬 HTML 파일의 전체 페이지 스크린샷을 캡처하고 구조를 분석할 수 있습니다.
특징
파일 미리보기 : 적절한 CSS 스타일을 적용하여 HTML 파일의 전체 페이지 스크린샷을 캡처합니다.
콘텐츠 분석 : HTML 구조(제목, 문단, 이미지, 링크) 분석
로컬 파일 지원 : 로컬 파일 경로 및 리소스 처리
스크린샷 관리 : 스크린샷을 전용 디렉토리에 저장합니다.
Related MCP server: Website Screenshot MCP
설치
저장소를 복제합니다.
지엑스피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 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.
Maintenance
Tools
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/seanivore/mcp-file-preview'
If you have feedback or need assistance with the MCP directory API, please join our Discord server