Html Modifier

MCP HTML修改

MCP工具接口说明

本项目作为MCP工具提供HTML精准修改能力(支持含vue语法的HTML)，包含以下工具函数，可通过MCP框架直接调用：

1. 修改HTML内容 modify_html

功能：直接接收HTML字符串和修改指令，返回修改后的HTML

请求参数：

{
  "html": "企业级管理后台 - 项目构建

原始HTML内容
",
  "modifications": [
    {
      "description": "替换容器类名",
      "xpath": "//div[@class='container']",
      "new_html": "
新内容
"
    }
  ]
}

原页面

    
    
    企业级管理后台 - 项目构建
    

    
    
    
原始HTML内容

    

响应结果：

    
    
    企业级管理后台 - 项目构建
    

    
    

    
新内容

2. 存储HTML内容 save_html

功能：临时存储HTML内容并关联唯一标识key，避免大模型重复传递大型HTML字符串消耗token

请求参数：

{
  "html": "
原始HTML内容
",
  "key": "unique_identifier"
}

响应结果：

"unique_identifier"

3. 通过key修改HTML modify_html_by_key

功能：使用已存储的HTML内容（通过key引用）进行修改，适合多次修改场景

请求参数：

{
  "key": "unique_identifier",
  "modifications": [
    {
      "description": "添加样式",
      "xpath": "//section",
      "new_html": "

"
    }
  ]
}

响应结果：

"修改成功"

4. 导出HTML到文件 export_html_to_file

功能：将存储的HTML内容导出为本地文件，减少token消耗

请求参数：

{
  "key": "unique_identifier",
  "path": "/output/path/result.html"
}

响应结果：

true

参数详细说明

通用参数说明

modifications数组元素结构

" |

各工具专用参数

save_html

需要存储的内容 " | | key | string | 是 | 唯一标识，用于后续操作引用 | "page_content_123" |

modify_html

" | | modifications | array | 是 | 修改任务数组 | 见通用参数说明中的modifications结构 |

modify_html_by_key

export_html_to_file

注意事项

1. Vue模板语法只是简单字符串替换
2. 给HTML元素id，大模型生成的XPath会更准确

DEBUG

npx @modelcontextprotocol/inspector uvx .