AI导哈

语义DOM过滤服务

一个位于混乱网页和干净LLM上下文窗口之间的高通滤波器，将HTML转换为语义Markdown，显著减少令牌使用并消除选择器幻觉。

  • by krishankb-de
  • TypeScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 krishankb-de/AxonMCP

使用说明

语义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
行动后更新 完全重新发送 仅限差异
意图意识 无 按任务修剪

相关 MCP