mcp-html-sync-server

MCP HTML Sync Server

A 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.

Features

• Real-time HTML Syncing: Create and update HTML content with instant updates to all connected clients
• WebSocket Hot Reload: All connected browsers automatically refresh when content changes
• Script Management: Add JavaScript scripts to pages, either via CDN URLs or inline content
• Stylesheet Management: Add CSS stylesheets to pages via CDN URLs
• MCP Integration: Designed specifically for AI agents using the Model Context Protocol
• Page Lifecycle Management: Automatic expiration of pages after configurable time periods
• Connection Limits: Configurable maximum page count with automatic cleanup of oldest pages
• Simple API: Easy-to-use MCP tools for page creation, updating, and destruction
• Lightweight: Minimal dependencies and efficient resource usage

Installation

Using Docker

• Pull the Docker image and run the server.

Using NPX

• Install and run the server directly.

From Source

• Clone the repository, install dependencies, and start the server.

Usage with MCP

Integrate with applications like Claude Desktop and VS Code using JSON configuration.

MCP Tools

create_page

Creates a new HTML page with specified content.

update_page

Updates an existing page with new content for real-time updates.

destroy_page

Removes a page and disconnects all clients.

add_scripts

Adds JavaScript scripts to an existing page.

add_stylesheets

Adds CSS stylesheets to an existing page.

Troubleshooting

Port Already in Use

Resolve port conflicts by changing ports or stopping other applications.