HTML Canvas MCP Server

A persistent, locally hosted HTML server for AI agents to render and iterate on web interfaces.

Features

• Live Server: Hosts content on http://localhost:17456 (or next available port).
• Session Persistence: Keeps the server running between tool calls.
• Incremental Edits: Allows replacing specific substrings to avoid re-sending large HTML files.
• File Sync: Mirrors current content to canvas.html in the working directory for easy debugging/viewing.

Usage

Run via NPX

npx -y html-canvas-mcp

MCP Client Configuration

Add this to your MCP settings file:

{
  "mcpServers": {
    "html-canvas": {
      "command": "npx",
      "args": ["-y", "html-canvas-mcp"]
    }
  }
}

Tools

serve_html

Arguments: html (string) Starts the server with the provided content. Returns the URL.

replace_full_html

Arguments: html (string) Overwrites the current content entirely.

edit_html_fragment

Arguments: old_text (string), new_text (string) Finds and replaces a text fragment. Useful for small tweaks.

get_current_html

Returns the current full HTML string.

stop_server

Stops the running HTTP server.

Development

1. Install Dependencies:

   npm install

2. Build:

   npm run build

3. Run (stdio):

   node build/index.js

Configuration

• Base Port: Default is 17456. Automatically increments if occupied.