*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. Use the MCP Inspector: ```bash npx @modelcontextprotocol/inspector ``` 2. Connect with: - Transport Type: STDIO - Command: node - Arguments: /path/to/build/index.js 3. Check Claude OS logs if tools don't appear in the dropdown ## Contributing Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests. ## License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.2a:T635,## what is MCP File Preview Server? MCP File Preview Server is a Model Context Protocol (MCP) server designed to provide capabilities for HTML file preview and analysis, enabling users to capture full-page screenshots of HTML files and analyze their structures. ## how to use MCP File Preview Server? To use the MCP File Preview Server, clone the repository, install the dependencies, build the project, and then configure it for use with either the Claude desktop app or the Cline VSCode extension. ## key features of MCP File Preview Server? - Full-page screenshots of HTML files capturing the complete CSS styling. - Detailed analysis of HTML structures including counts of headings, paragraphs, images, and links. - Support for local file paths and resources, allowing the handling of files directly from the user’s system. - Organized management of screenshots saved to a designated directory. ## use cases of MCP File Preview Server? 1. Preview

#website-development

MCP File Preview Server