AI导哈

HTML修改工具

MCP工具提供HTML精准修改能力，支持含Vue语法的HTML，适用于前端开发和自动化修改场景。

  • by AriesYB
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 ariesyb/html-modifier

使用说明

MCP HTML修改

MCP工具接口说明

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

1. 修改HTML内容 modify_html

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

请求参数：

{
  "html": "<!DOCTYPE html><html lang=\"zh-CN\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>企业级管理后台 - 项目构建</title><link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\"><script src=\"https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js\"></script><script src=\"https://unpkg.com/element-ui/lib/index.js\"></script><div class=\"container\">原始HTML内容</div></body></html>",
  "modifications": [
    {
      "description": "替换容器类名",
      "xpath": "//div[@class='container']",
      "new_html": "<section class=\"main-content\" @click=\"modifyContent\" :active>新内容</section>"
    }
  ]
}

原页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级管理后台 - 项目构建</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <div class="container">原始HTML内容</div>
    </body>
</html>

响应结果：


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级管理后台 - 项目构建</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div>
    <section class="main-content" @click="modifyContent" :active>新内容</section>
</div>
</body>
</html>

2. 存储HTML内容 save_html

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

请求参数：

{
  "html": "<div>原始HTML内容</div>",
  "key": "unique_identifier"
}

响应结果：

"unique_identifier"

3. 通过key修改HTML modify_html_by_key

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

请求参数：

{
  "key": "unique_identifier",
  "modifications": [
    {
      "description": "添加样式",
      "xpath": "//section",
      "new_html": "<section style='color:red'></section>"
    }
  ]
}

响应结果：

"修改成功"

4. 导出HTML到文件 export_html_to_file

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

请求参数：

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

响应结果：

true

参数详细说明

通用参数说明

modifications数组元素结构

参数名 类型 必选 说明 示例
description string 否 修改操作描述（调试用） "替换容器类名"
xpath string 是 XML路径表达式，用于定位元素 "//div[@class='container']"
new_html string 是 替换后的HTML片段 ""

各工具专用参数

save_html

参数名 类型 必选 说明 示例
html string 是 原始HTML字符串 "需要存储的内容"
key string 是 唯一标识，用于后续操作引用 "page_content_123"

modify_html

参数名 类型 必选 说明 示例
html string 是 待修改的原始HTML字符串 ""
modifications array 是 修改任务数组 见通用参数说明中的modifications结构

modify_html_by_key

参数名 类型 必选 说明 示例
key string 是 已存储HTML的标识 "page_content_123"
modifications array 是 修改任务数组 见通用参数说明中的modifications结构

export_html_to_file

参数名 类型 必选 说明 示例
key string 是 已存储HTML的标识 "page_content_123"
path string 是 目标文件路径 "/data/output/result.html"

注意事项

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

DEBUG

npx @modelcontextprotocol/inspector uvx .

相关 MCP