1a745fd53a10850.js","9732","static/chunks/9732-8158987224fdfa35.js","1358","static/chunks/1358-51104e2af656c119.js","2439","static/chunks/app/%5Blocale%5D/(default)/tag/%5Bname%5D/page-e01bef69b5169e46.js"],"PageTitleTabs"] 23:I[85939,["7626","static/chunks/f6ab4fea-4425dae3da7674a3.js","5232","static/chunks/5232-db5923cda78a4960.js","6465","static/chunks/6465-6b79f1dc957ae3f4.js","9388","static/chunks/9388-d1a745fd53a10850.js","9732","static/chunks/9732-8158987224fdfa35.js","1358","static/chunks/1358-51104e2af656c119.js","2439","static/chunks/app/%5Blocale%5D/(default)/tag/%5Bname%5D/page-e01bef69b5169e46.js"],"default"] 26:I[41664,["7626","static/chunks/f6ab4fea-4425dae3da7674a3.js","5232","static/chunks/5232-db5923cda78a4960.js","6465","static/chunks/6465-6b79f1dc957ae3f4.js","9388","static/chunks/9388-d1a745fd53a10850.js","9732","static/chunks/9732-8158987224fdfa35.js","1358","static/chunks/1358-51104e2af656c119.js","2439","static/chunks/app/%5Blocale%5D/(default)/tag/%5Bname%5D/page-e01bef69b5169e46.js"],"Pagination"] 24:Tdd5,# MCP File Preview Server A Model Context Protocol (MCP) server that provides HTML file preview and analysis capabilities. This server enables capturing full-page screenshots of local HTML files and analyzing their structure. ## Features - **File Preview**: Capture full-page screenshots of HTML files with proper CSS styling - **Content Analysis**: Analyze HTML structure (headings, paragraphs, images, links) - **Local File Support**: Handle local file paths and resources - **Screenshot Management**: Save screenshots to a dedicated directory ## Installation 1. Clone the repository: ```bash git clone https://github.com/your-username/mcp-file-preview.git cd mcp-file-preview ``` 2. Install dependencies: ```bash npm install ``` 3. Build the project: ```bash npm run build ``` ## Configuration Add the server to your Claude or Cline MCP settings: ### Claude Desktop App Add to `~/Library/Application Support/Claude/claude_desktop_config.json`: ```json { "mcpServers": { "file-preview": { "command": "node", "args": ["/path/to/mcp-file-preview/build/index.js"] } } } ``` ### Cline VSCode Extension Add to VSCode's MCP settings: ```json { "mcpServers": { "file-preview": { "command": "node", "args": ["/path/to/mcp-file-preview/build/index.js"] } } } ``` ## Usage The server provides two main tools: ### preview_file Captures a screenshot and returns HTML content: ```typescript file-preview preview_file { "filePath": "/path/to/file.html", "width": 1024, // optional "height": 768 // optional } ``` Screenshots are saved to `screenshots/` directory in the project folder. ### analyze_content Analyzes HTML structure: ```typescript file-preview analyze_content { "filePath": "/path/to/file.html" } ``` Returns counts of: - Headings - Paragraphs - Images - Links ## Development 1. Install dependencies: ```bash npm install @modelcontextprotocol/sdk puppeteer typescript @types/node @types/puppeteer ``` 2. Make changes in `src/` 3. Build: ```bash npm run build ``` 4. Test locally: ```bash npm run dev ``` ## Implementation Details The server uses the MCP SDK's Server class with proper initialization: ```typescript 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 } } } } } ); ``` Key points: - Server constructor takes separate metadata and options objects - Tools are declared in capabilities.tools - Each tool needs a description and inputSchema - Screenshots are saved to a local `screenshots/` directory ## Debugging 1

#website-development

MCP File Preview Server