Skip to main content

针对大模型生成的长HTML代码时存在语法错误,提供精准修改能力。

Project description

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模板语法只是简单字符串替换

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

html_modifier-0.1.2.tar.gz (32.3 kB view details)

Uploaded Source

Built Distribution

html_modifier-0.1.2-py3-none-any.whl (6.7 kB view details)

Uploaded Python 3

File details

Details for the file html_modifier-0.1.2.tar.gz.

File metadata

  • Download URL: html_modifier-0.1.2.tar.gz
  • Upload date:
  • Size: 32.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.1.0 CPython/3.12.4

File hashes

Hashes for html_modifier-0.1.2.tar.gz
Algorithm Hash digest
SHA256 bb64ea3f50491fc048639f303264bbec452155755951e4540fee76cb5a959ef1
MD5 6d2d25578cba1a6ad9fe58c68842f2d6
BLAKE2b-256 c0851c4b269e4f92441c65c91213b09d58dfc28389f116ddac631ed8d3f9638c

See more details on using hashes here.

File details

Details for the file html_modifier-0.1.2-py3-none-any.whl.

File metadata

  • Download URL: html_modifier-0.1.2-py3-none-any.whl
  • Upload date:
  • Size: 6.7 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.1.0 CPython/3.12.4

File hashes

Hashes for html_modifier-0.1.2-py3-none-any.whl
Algorithm Hash digest
SHA256 3caa77ca97b8d732723ffac311a4c21004fd576bf23f4d1460a2af4050d9e967
MD5 202dd99e133b10e658fb8c942388b7b2
BLAKE2b-256 0497644413803f6708921ce5592f28e75ef70c04c829168ddcf5b927ce15654d

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page