语义DOM过滤器MCP服务器
A. 高通滤波器 它位于混乱的网页和干净的LLM上下文窗口之间。将~100KB的HTML转换为~2KB的带整数ID的语义Markdown，消除了选择器幻觉，大大减少了令牌的使用。
建筑
User Prompt → LLM Agent → Semantic MCP Server
↓
┌──────────────────────┐
│ Playwright (Chromium)│
│ ↓ │
│ Accessibility Tree │
│ ↓ │
│ Semantic Processor │
│ ├─ Visibility Filter │
│ ├─ Struct. Flatten │
│ └─ Intent Pruning │
│ ↓ │
│ Markdown Synthesizer │
└──────────────────────┘
↓
Clean Semantic Map → LLM Agent
↓
Action (click id=7) → Semantic Diff工具
get_semantic_view
导航到URL并获取经过筛选的语义图。
| 参数 | 类型 | 说明 |
|---|---|---|
url | string | 要导航到的URL |
task_intent | string | 你想做什么（引导过滤） |
意图引导过滤：
"read content"/"find pricing"→ 修剪导航、页脚"fill form"/"login"→ 专注于输入、按钮"find X"/"navigate"→ 保持导航，修剪长文本
perform_action
执行一个操作，只返回更改的内容（语义差异）。
| 参数 | 类型 | 说明 |
|---|---|---|
action | enum | click, type, select, hover, scroll, wait, press_key, go_back, go_forward, navigate |
id | 号码？ | 目标元素的语义ID |
value | 弦？ | 要键入的文本、要选择的选项、滚动方向、要按的键 |
url | 弦？ | 的URL navigate 行动 |
get_current_state
无需导航即可重新提取语义图。可用于在多个操作后刷新。
| 参数 | 类型 | 说明 |
|---|---|---|
task_intent | 弦？ | 可选择更改意图过滤器 |
get_screenshot
捕获当前视口的PNG屏幕截图。
| 参数 | 类型 | 说明 |
|---|---|---|
full_page | 布尔值？ | 捕获完整的可滚动页面 |
输出格式
# Example Page
**URL:** https://example.com
**Task:** find the pricing table
**Stats:** 23 semantic nodes (filtered from 847 raw nodes)
## Page Structure
- **main**: "Main Content" (312 nodes)
- **navigation**: "Primary Nav" (45 nodes)
## Semantic Map
[Heading(1): "Pricing Plans", id=1]
[Text: "Choose the plan that works for you"]
[Button: "Monthly", id=3, selected]
[Button: "Annual", id=4]
[Heading(2): "Starter", id=5]
[Text: "$9/month"]
[Button: "Get Started", id=7]
[Heading(2): "Pro", id=8]
[Text: "$29/month"]
[Button: "Get Started", id=10]语义差异（动作后）
而不是重新发送整个页面：
**Action:** click on id=3
**Result:** Changes detected
## Changes
Modified:
[Button, id=3]: state.pressed: "unset" → "true"
Added: [Text: "Billed monthly"]
Removed: [Text: "Billed annually"]设置
npm install
npm run build使用Claude Desktop
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"semantic-dom": {
"command": "node",
"args": ["path/to/browser_mcp/dist/index.js"]
}
}
}使用VS代码（复制品）
添加到您的 .vscode/mcp.json:
{
"servers": {
"semantic-dom": {
"type": "stdio",
"command": "node",
"args": ["${workspaceFolder}/dist/index.js"]
}
}
}为什么会赢
| 度量 | 原始HTML | 此MCP |
|---|---|---|
| 有效负载 | ~100KB | ~2KB |
| 代币成本 | ~25K代币 | ~500代币 |
| 选择器精度 | 幻觉CSS | 整数ID |
| 行动后更新 | 完全重新发送 | 仅限差异 |
| 意图意识 | 无 | 按任务修剪 |