{"id":27876246,"url":"https://github.com/yujiosaka/mcp-html-sync-server","last_synced_at":"2026-02-25T16:32:42.202Z","repository":{"id":290469162,"uuid":"974568581","full_name":"yujiosaka/mcp-html-sync-server","owner":"yujiosaka","description":"A real-time HTML syncing server with hot reload capabilities, built using the Model Context Protocol (MCP)","archived":false,"fork":false,"pushed_at":"2025-04-29T16:08:06.000Z","size":164,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-02T04:56:01.497Z","etag":null,"topics":["hot-reload","html","mcp","mcp-server","server","static","sync"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yujiosaka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":"docs/FUNDING.yml","license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["yujiosaka"]}},"created_at":"2025-04-29T01:28:59.000Z","updated_at":"2025-04-29T16:08:08.000Z","dependencies_parsed_at":"2025-06-28T13:39:41.402Z","dependency_job_id":"9830242f-83b7-4cc9-b256-395065620ba1","html_url":"https://github.com/yujiosaka/mcp-html-sync-server","commit_stats":null,"previous_names":["yujiosaka/mcp-html-sync-server"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/yujiosaka/mcp-html-sync-server","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujiosaka%2Fmcp-html-sync-server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujiosaka%2Fmcp-html-sync-server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujiosaka%2Fmcp-html-sync-server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujiosaka%2Fmcp-html-sync-server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yujiosaka","download_url":"https://codeload.github.com/yujiosaka/mcp-html-sync-server/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yujiosaka%2Fmcp-html-sync-server/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29830163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T15:41:19.027Z","status":"ssl_error","status_checked_at":"2026-02-25T15:40:47.150Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hot-reload","html","mcp","mcp-server","server","static","sync"],"created_at":"2025-05-05T02:45:19.878Z","updated_at":"2026-02-25T16:32:42.171Z","avatar_url":"https://github.com/yujiosaka.png","language":"TypeScript","funding_links":["https://github.com/sponsors/yujiosaka"],"categories":["🌐 Web Development"],"sub_categories":[],"readme":"# MCP HTML Sync Server ![npm version](https://img.shields.io/npm/v/mcp-html-sync-server) ![Docker Pulls](https://img.shields.io/docker/pulls/yujiosaka/mcp-html-sync-server)\n\n###### [Code of Conduct](https://github.com/yujiosaka/mcp-html-sync-server/blob/main/docs/CODE_OF_CONDUCT.md) | [Contributing](https://github.com/yujiosaka/mcp-html-sync-server/blob/main/docs/CONTRIBUTING.md) | [Security](https://github.com/yujiosaka/mcp-html-sync-server/blob/main/docs/SECURITY.md)\n\nA real-time HTML syncing server with hot reload capabilities, built using the Model Context Protocol (MCP). This server enables AI agents to create, update, and destroy HTML pages dynamically, with all connected clients receiving updates in real-time.\n\n## Features\n\n\u003cimg src=\"https://github.com/user-attachments/assets/7dd50f5e-958d-4c09-8a6f-462a50bbd98e\" alt=\"MCP HTML Sync Server\" width=\"300\" align=\"right\"\u003e\n\n- **Real-time HTML Syncing**: Create and update HTML content with instant updates to all connected clients\n- **WebSocket Hot Reload**: All connected browsers automatically refresh when content changes\n- **Script Management**: Add JavaScript scripts to pages, either via CDN URLs or inline content\n- **Stylesheet Management**: Add CSS stylesheets to pages via CDN URLs\n- **MCP Integration**: Designed specifically for AI agents using the Model Context Protocol\n- **Page Lifecycle Management**: Automatic expiration of pages after configurable time periods\n- **Connection Limits**: Configurable maximum page count with automatic cleanup of oldest pages\n- **Simple API**: Easy-to-use MCP tools for page creation, updating, and destruction\n- **Lightweight**: Minimal dependencies and efficient resource usage\n\n## Architecture\n\n```mermaid\nflowchart LR\n    AI[AI Agent] --\u003e|MCP Protocol| MCP[MCP HTML Sync Server]\n    MCP --\u003e|Create/Update/Destroy/AddScripts/AddStylesheets| PM[Page Manager]\n    PM --\u003e|Store| Pages[(HTML Pages, Scripts \u0026 Stylesheets)]\n    User[User Browser] --\u003e|HTTP Request| HTTP[HTTP Server]\n    HTTP --\u003e|Fetch Page, Scripts \u0026 Stylesheets| PM\n    User \u003c--\u003e|WebSocket| WS[WebSocket Server]\n    WS \u003c--\u003e|Real-time Updates| PM\n```\n\n## Installation\n\n### Using Docker\n\n```bash\ndocker pull yujiosaka/mcp-html-sync-server\ndocker run -p 3000:3000 yujiosaka/mcp-html-sync-server\n```\n\n#### Docker Environment Variables\n\nInstead of using an `.env` file, you can pass environment variables directly to the Docker container at runtime:\n\n```bash\ndocker run -p 3000:3000 \\\n  -e SERVER_PORT=3000 \\\n  -e BASE_URL=http://localhost:3000/ \\\n  -e PAGE_MAX_AGE=1h \\\n  -e PAGE_MAX_COUNT=1000 \\\n  yujiosaka/mcp-html-sync-server\n```\n\nThis approach is recommended for production deployments as it allows you to configure the server without modifying the container image.\n\n### Using NPX\n\n```bash\nNODE_ENV=production npx mcp-html-sync-server\n```\n\n### From Source\n\n```bash\n# Clone the repository\ngit clone https://github.com/yujiosaka/mcp-html-sync-server.git\ncd mcp-html-sync-server\n\n# Install dependencies\nbun install\n\n# Copy the example environment file\nbun run config\n\n# Start the server\nbun run start\n```\n\n## Configuration\n\nEdit the `.env` file to configure the server:\n\n```\n# Host address for the HTTP server (used for binding the server)\nSERVER_HOST=localhost\n# Port number for the HTTP server (used for binding the server)\nSERVER_PORT=3000\n# Base URL for the application (used for generating view URLs)\nBASE_URL=http://localhost:3000/\n# Maximum age of pages before they expire (e.g., 1h = 1 hour, uses ms library format)\nPAGE_MAX_AGE=1h\n# Maximum number of pages that can be stored (oldest pages are removed when limit is reached)\nPAGE_MAX_COUNT=1000\n```\n\n### Configuration Options\n\n| Option | Description | Default | Format |\n|--------|-------------|---------|--------|\n| SERVER_HOST | Host address for binding the HTTP server | localhost | hostname |\n| SERVER_PORT | Port number for the HTTP server | 3000 | number |\n| BASE_URL | Base URL for generating view URLs | http://localhost:3000/ | URL |\n| PAGE_MAX_AGE | Maximum age of pages before expiration | 1h | time string (e.g., 1h, 30m, 1d) |\n| PAGE_MAX_COUNT | Maximum number of pages to keep | 1000 | number |\n\n## Usage with MCP\n\n### Integration with Claude Desktop\n\nAdd this to your `claude_desktop_config.json`:\n\n#### Docker\n\n```json\n{\n  \"mcpServers\": {\n    \"html-sync-server\": {\n      \"command\": \"docker\",\n      \"args\": [\n        \"run\",\n        \"-i\",\n        \"--rm\",\n        \"-p\",\n        \"3000:3000\",\n        \"-e\", \"SERVER_PORT=3000\",\n        \"-e\", \"BASE_URL=http://localhost:3000/\",\n        \"-e\", \"PAGE_MAX_AGE=1h\",\n        \"-e\", \"PAGE_MAX_COUNT=1000\",\n        \"yujiosaka/mcp-html-sync-server\"\n      ]\n    }\n  }\n}\n```\n\n#### NPX\n\n```json\n{\n  \"mcpServers\": {\n    \"html-sync-server\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-html-sync-server\"],\n      \"env\": {\n        \"NODE_ENV\": \"production\"\n      }\n    }\n  }\n}\n```\n\n### Integration with VS Code\n\nFor quick installation, use one of the one-click install buttons below:\n\n[![Install with NPX in VS Code](https://img.shields.io/badge/VS_Code-NPM-0098FF?style=flat-square\u0026logo=visualstudiocode\u0026logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=html-sync-server\u0026config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22mcp-html-sync-server%22%5D%2C%22env%22%3A%7B%22NODE_ENV%22%3A%22production%22%7D%7D) [![Install with NPX in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-NPM-24bfa5?style=flat-square\u0026logo=visualstudiocode\u0026logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=html-sync-server\u0026config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22mcp-html-sync-server%22%5D%2C%22env%22%3A%7B%22NODE_ENV%22%3A%22production%22%7D%7D\u0026quality=insiders)\n\n[![Install with Docker in VS Code](https://img.shields.io/badge/VS_Code-Docker-0098FF?style=flat-square\u0026logo=visualstudiocode\u0026logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=html-sync-server\u0026config=%7B%22command%22%3A%22docker%22%2C%22args%22%3A%5B%22run%22%2C%22-i%22%2C%22--rm%22%2C%22-p%22%2C%223000%3A3000%22%2C%22-e%22%2C%22SERVER_PORT%3D3000%22%2C%22-e%22%2C%22BASE_URL%3Dhttp%3A%2F%2Flocalhost%3A3000%2F%22%2C%22-e%22%2C%22PAGE_MAX_AGE%3D1h%22%2C%22-e%22%2C%22PAGE_MAX_COUNT%3D1000%22%2C%22yujiosaka%2Fmcp-html-sync-server%22%5D%7D) [![Install with Docker in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Docker-24bfa5?style=flat-square\u0026logo=visualstudiocode\u0026logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=html-sync-server\u0026config=%7B%22command%22%3A%22docker%22%2C%22args%22%3A%5B%22run%22%2C%22-i%22%2C%22--rm%22%2C%22-p%22%2C%223000%3A3000%22%2C%22-e%22%2C%22SERVER_PORT%3D3000%22%2C%22-e%22%2C%22BASE_URL%3Dhttp%3A%2F%2Flocalhost%3A3000%2F%22%2C%22-e%22%2C%22PAGE_MAX_AGE%3D1h%22%2C%22-e%22%2C%22PAGE_MAX_COUNT%3D1000%22%2C%22yujiosaka%2Fmcp-html-sync-server%22%5D%7D\u0026quality=insiders)\n\n#### Manual Installation\n\nFor manual installation, add the following JSON block to your User Settings (JSON) file in VS Code. You can do this by pressing `Ctrl + Shift + P` and typing `Preferences: Open Settings (JSON)`.\n\nOptionally, you can add it to a file called `.vscode/mcp.json` in your workspace. This will allow you to share the configuration with others.\n\n\u003e Note that the `mcp` key is not needed in the `.vscode/mcp.json` file.\n\n```json\n{\n  \"mcp\": {\n    \"servers\": {\n      \"html-sync-server\": {\n        \"command\": \"npx\",\n        \"args\": [\"-y\", \"mcp-html-sync-server\"],\n        \"env\": {\n          \"NODE_ENV\": \"production\"\n        }\n      }\n    }\n  }\n}\n```\n\nFor Docker installation:\n\n```json\n{\n  \"mcp\": {\n    \"servers\": {\n      \"html-sync-server\": {\n        \"command\": \"docker\",\n        \"args\": [\n          \"run\",\n          \"-i\",\n          \"--rm\",\n          \"-p\", \"3000:3000\",\n          \"-e\", \"SERVER_PORT=3000\",\n          \"-e\", \"BASE_URL=http://localhost:3000/\",\n          \"-e\", \"PAGE_MAX_AGE=1h\",\n          \"-e\", \"PAGE_MAX_COUNT=1000\",\n          \"yujiosaka/mcp-html-sync-server\"\n        ]\n      }\n    }\n  }\n}\n```\n\n## MCP Tools\n\nThe server provides the following MCP tools that can be used by AI agents:\n\n### 1. Create a Page\n\nCreates a new HTML page with the specified content.\n\n**Tool Name**: `create_page`\n\n**Input Schema**:\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"body\": {\n      \"type\": \"string\",\n      \"description\": \"HTML content for the page body (only the inner content)\"\n    },\n    \"scripts\": {\n      \"type\": \"array\",\n      \"description\": \"Optional array of JavaScript scripts to include in the page\",\n      \"items\": {\n        \"type\": \"object\",\n        \"properties\": {\n          \"src\": {\n            \"type\": \"string\",\n            \"description\": \"URL for external script\"\n          },\n          \"content\": {\n            \"type\": \"string\",\n            \"description\": \"Content for inline script\"\n          }\n        },\n        \"description\": \"Either src or content must be provided\",\n        \"oneOf\": [\n          { \"required\": [\"src\"] },\n          { \"required\": [\"content\"] }\n        ]\n      }\n    },\n    \"stylesheets\": {\n      \"type\": \"array\",\n      \"description\": \"Optional array of CSS stylesheets to include in the page\",\n      \"items\": {\n        \"type\": \"object\",\n        \"properties\": {\n          \"href\": {\n            \"type\": \"string\",\n            \"description\": \"URL for external stylesheet\"\n          }\n        },\n        \"required\": [\"href\"]\n      }\n    }\n  },\n  \"required\": [\"body\"]\n}\n```\n\n**Example Request**:\n```json\n{\n  \"name\": \"create_page\",\n  \"arguments\": {\n    \"body\": \"\u003ch1\u003eHello World\u003c/h1\u003e\u003cp\u003eThis is my page content.\u003c/p\u003e\u003cbutton id='confetti-btn'\u003eClick for Confetti!\u003c/button\u003e\",\n    \"scripts\": [\n      { \"src\": \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js\" }\n    ],\n    \"stylesheets\": [\n      { \"href\": \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css\" }\n    ]\n  }\n}\n```\n\n**Example Response**:\n```json\n{\n  \"content\": [\n    {\n      \"type\": \"text\",\n      \"text\": \"Page created successfully! A URL is provided below to view your page.\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"View your HTML page in URL: http://localhost:3000/abc123\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"ID: abc123\\nExpires at: 2023-04-15T12:34:56.789Z\\n\\nUse this ID for future updates before expiration.\"\n    }\n  ],\n  \"metadata\": {\n    \"id\": \"abc123\",\n    \"url\": \"http://localhost:3000/abc123\",\n    \"expires_at\": \"2023-04-15T12:34:56.789Z\"\n  }\n}\n```\n\n### 2. Update a Page\n\nUpdates an existing page with new content. All connected clients will see the updates in real-time. If the page does not exist (has been removed or expired), an error response will be returned.\n\n**Tool Name**: `update_page`\n\n**Input Schema**:\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"id\": {\n      \"type\": \"string\",\n      \"description\": \"ID of the page to update\"\n    },\n    \"body\": {\n      \"type\": \"string\",\n      \"description\": \"New HTML content for the page body (only the inner content)\"\n    }\n  },\n  \"required\": [\"id\", \"body\"]\n}\n```\n\n**Example Request**:\n```json\n{\n  \"name\": \"update_page\",\n  \"arguments\": {\n    \"id\": \"abc123\",\n    \"body\": \"\u003ch1\u003eUpdated Content\u003c/h1\u003e\u003cp\u003eThis content has been updated.\u003c/p\u003e\"\n  }\n}\n```\n\n**Example Response**:\n```json\n{\n  \"content\": [\n    {\n      \"type\": \"text\",\n      \"text\": \"Page updated successfully! A URL is provided below to view your updated page.\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"View your HTML page in URL: http://localhost:3000/abc123\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"ID: abc123\\nExpires at: 2023-04-15T12:34:56.789Z\\n\\nUse this ID for future updates before expiration.\"\n    }\n  ],\n  \"metadata\": {\n    \"id\": \"abc123\",\n    \"url\": \"http://localhost:3000/abc123\",\n    \"expires_at\": \"2023-04-15T12:34:56.789Z\"\n  }\n}\n```\n\n### 3. Destroy a Page\n\nRemoves a page and disconnects all clients.\n\n**Tool Name**: `destroy_page`\n\n**Input Schema**:\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"id\": {\n      \"type\": \"string\",\n      \"description\": \"ID of the page to destroy\"\n    }\n  },\n  \"required\": [\"id\"]\n}\n```\n\n**Example Request**:\n```json\n{\n  \"name\": \"destroy_page\",\n  \"arguments\": {\n    \"id\": \"abc123\"\n  }\n}\n```\n\n**Example Response**:\n```json\n{\n  \"success\": true\n}\n```\n\n### 4. Add Scripts to a Page\n\nAdds JavaScript scripts to an existing page. All connected clients will receive the scripts in real-time.\n\n**Tool Name**: `add_scripts`\n\n**Input Schema**:\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"id\": {\n      \"type\": \"string\",\n      \"description\": \"ID of the page to add scripts to\"\n    },\n    \"scripts\": {\n      \"type\": \"array\",\n      \"description\": \"Array of JavaScript scripts to add to the page\",\n      \"items\": {\n        \"type\": \"object\",\n        \"properties\": {\n          \"src\": {\n            \"type\": \"string\",\n            \"description\": \"URL for external script\"\n          },\n          \"content\": {\n            \"type\": \"string\",\n            \"description\": \"Content for inline script\"\n          }\n        },\n        \"description\": \"Either src or content must be provided\",\n        \"oneOf\": [\n          { \"required\": [\"src\"] },\n          { \"required\": [\"content\"] }\n        ]\n      }\n    }\n  },\n  \"required\": [\"id\", \"scripts\"]\n}\n```\n\n**Example Request**:\n```json\n{\n  \"name\": \"add_scripts\",\n  \"arguments\": {\n    \"id\": \"abc123\",\n    \"scripts\": [\n      { \"content\": \"alert('Hello World!')\" }\n    ]\n  }\n}\n```\n\n**Example Response**:\n```json\n{\n  \"content\": [\n    {\n      \"type\": \"text\",\n      \"text\": \"Scripts added successfully! A URL is provided below to view your page.\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"View your HTML page in URL: http://localhost:3000/abc123\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"ID: abc123\\nExpires at: 2023-04-15T12:34:56.789Z\\n\\nUse this ID for future updates before expiration.\"\n    }\n  ],\n  \"metadata\": {\n    \"id\": \"abc123\",\n    \"url\": \"http://localhost:3000/abc123\",\n    \"expires_at\": \"2023-04-15T12:34:56.789Z\"\n  }\n}\n```\n\n### 5. Add Stylesheets to a Page\n\nAdds CSS stylesheets to an existing page. All connected clients will receive the stylesheets in real-time.\n\n**Tool Name**: `add_stylesheets`\n\n**Input Schema**:\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"id\": {\n      \"type\": \"string\",\n      \"description\": \"ID of the page to add stylesheets to\"\n    },\n    \"stylesheets\": {\n      \"type\": \"array\",\n      \"description\": \"Array of CSS stylesheets to add to the page\",\n      \"items\": {\n        \"type\": \"object\",\n        \"properties\": {\n          \"href\": {\n            \"type\": \"string\",\n            \"description\": \"URL for external stylesheet\"\n          }\n        },\n        \"required\": [\"href\"]\n      }\n    }\n  },\n  \"required\": [\"id\", \"stylesheets\"]\n}\n```\n\n**Example Request**:\n```json\n{\n  \"name\": \"add_stylesheets\",\n  \"arguments\": {\n    \"id\": \"abc123\",\n    \"stylesheets\": [\n      { \"href\": \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css\" }\n    ]\n  }\n}\n```\n\n**Example Response**:\n```json\n{\n  \"content\": [\n    {\n      \"type\": \"text\",\n      \"text\": \"Stylesheets added successfully! A URL is provided below to view your page.\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"View your HTML page in URL: http://localhost:3000/abc123\"\n    },\n    {\n      \"type\": \"text\",\n      \"text\": \"ID: abc123\\nExpires at: 2023-04-15T12:34:56.789Z\\n\\nUse this ID for future updates before expiration.\"\n    }\n  ],\n  \"metadata\": {\n    \"id\": \"abc123\",\n    \"url\": \"http://localhost:3000/abc123\",\n    \"expires_at\": \"2023-04-15T12:34:56.789Z\"\n  }\n}\n```\n\n## How It Works\n\n1. AI agents interact with the server through the Model Context Protocol (MCP)\n2. The MCP server processes requests to create, update, or destroy HTML pages\n3. Users view these pages through URLs provided by the AI agent\n4. Real-time updates are delivered to all connected clients via WebSockets\n\n## Manual Testing\n\nThe project includes a manual test script (`manual-test.ts`) that demonstrates how to use the MCP server. This script:\n\n1. Creates a new HTML page with canvas-confetti from CDN\n2. Updates the page content\n3. Adds stylesheets to trigger text animations\n4. Adds scripts to trigger confetti animations\n5. Deletes the page\n\nTo run the manual test:\n\n```bash\n# Run the test script\nbun manual-test.ts\n```\n\nThe script will provide URLs that you can open in your browser to see the page and observe real-time updates. It uses an interactive approach with confirmation prompts between each step, allowing you to verify the changes in your browser before proceeding to the next step.\n\nThis test script is particularly useful for:\n- Verifying that the MCP server is working correctly\n- Understanding the flow of creating, updating, and destroying pages\n- Observing real-time WebSocket updates in the browser\n\n## Development\n\n```bash\n# Run in development mode with auto-reload\nbun run dev\n\n# Build the project\nbun run build\n\n# Run linting\nbun run check\n\n# Fix linting issues\nbun run check:write\n```\n\n## Troubleshooting\n\n### Port Already in Use\n\nIf you see an error like the following when starting the server:\n\n```\n[2025-04-28 18:28:48.370 +0900] ERROR: Error starting server\n    err: {\n      \"type\": \"Error\",\n      \"message\": \"Failed to start server. Is port 3000 in use?\",\n      \"stack\":\n          Error\n              at serve (unknown)\n              at [kRealListen] (node:http:565:41)\n              at listen (node:http:542:35)\n              at \u003canonymous\u003e (/Users/yujiisobe/work/mcp-html-sync-server/node_modules/fastify/lib/server.js:265:12)\n              at processTicksAndRejections (unknown:7:39)\n      \"code\": \"EADDRINUSE\",\n      \"syscall\": \"listen\",\n      \"errno\": 0\n    }\n```\n\nThis means that port 3000 (or whatever port you've configured) is already being used by another application. To resolve this:\n\n1. **Change the port**: Edit the `.env` file and change the `SERVER_PORT` to a different value (e.g., 3001, 8080, etc.)\n\n2. **Stop the other application**: Find and stop the application that's using port 3000. You can use one of these commands to find processes using the port:\n   \n   ```bash\n   # On macOS/Linux\n   lsof -i :3000\n   \n   # On Windows\n   netstat -ano | findstr :3000\n   ```\n\n3. **Restart your computer**: In some cases, a restart can clear orphaned processes that might be holding onto the port.\n\nWhen using the server with Claude Desktop or VS Code, you may also see JSON parsing errors if the port is already in use. These errors occur because the server can't start properly and is returning error messages instead of valid JSON responses.\n\n## Building Docker Image\n\n```bash\ndocker build -t yujiosaka/mcp-html-sync-server .\n```\n\n## License\n\nThis project is licensed under the MIT License. See [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyujiosaka%2Fmcp-html-sync-server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyujiosaka%2Fmcp-html-sync-server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyujiosaka%2Fmcp-html-sync-server/lists"}