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" |
注意事项
- Vue模板语法只是简单字符串替换
- 给HTML元素id，大模型生成的XPath会更准确
DEBUG
npx @modelcontextprotocol/inspector uvx .
1 maintainer
Metadata
1 maintainer
Release files for html-modifier 0.1.3
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | Provenance | Actions |
|---|---|---|---|---|
| html_modifier-0.1.3.tar.gz | 32.4 kB | Without provenance | Details for html_modifier-0.1.3.tar.gz |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Actions Reset |
|---|---|---|---|---|
| html_modifier-0.1.3-py3-none-any.whl | Python 3 | none | any | Details for html_modifier-0.1.3-py3-none-any.whl |
Total release size: 39.2 kB
Release files / html_modifier-0.1.3.tar.gz
| Download URL | html_modifier-0.1.3.tar.gz |
|---|---|
| Size | 32.4 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
d919d0c0767bb28e6513ea337dd49b09f7b529453186ee8e9460f06098add279
|
|
BLAKE2b-256 checksum How to use checksums |
2c7f7d2718245faa15cc816fb94b2b3ee1de146378de653c17345de0df06e340
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
twine/6.1.0 CPython/3.12.4
|
Release files / html_modifier-0.1.3-py3-none-any.whl
| Download URL | html_modifier-0.1.3-py3-none-any.whl |
|---|---|
| Size | 6.9 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
2f0ce5be10998cdaf058a42e4c8d9f39b263e49290b5d1539d3bc2896a08e8ee
|
|
BLAKE2b-256 checksum How to use checksums |
1a5d198a10d370d4bada172fc74315a39f089390bdb81fc707f268778fcc129a
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
twine/6.1.0 CPython/3.12.4
|
Security for html-modifier 0.1.3
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
No provenance found
None of the files in this release were uploaded with provenance metadata.
A note on package security
PyPI is a repository for distributing packages, not a service for auditing them. While third-party security researchers and our staff do their best to detect and remove malicious packages, PyPI cannot guarantee the quality, security or suitability of any given package.
To learn more about protecting yourself from malicious actors, visit our package security documentation.
