Skip to main content
Glama
krishankb-de

Semantic DOM Filter MCP Server

by krishankb-de

Semantic DOM Filter MCP Server

A high-pass filter that sits between chaotic web pages and clean LLM context windows. Converts ~100KB HTML into ~2KB Semantic Markdown with integer IDs, eliminating selector hallucination and dramatically reducing token usage.

Architecture

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

Related MCP server: readdown-mcp

Tools

get_semantic_view

Navigate to a URL and get a filtered semantic map.

Parameter

Type

Description

url

string

URL to navigate to

task_intent

string

What you're trying to do (guides filtering)

Intent-guided filtering:

  • "read content" / "find pricing" → prunes navigation, footers

  • "fill form" / "login" → focuses on inputs, buttons

  • "find X" / "navigate" → keeps navigation, prunes long text

perform_action

Execute an action and get back only what changed (semantic diff).

Parameter

Type

Description

action

enum

click, type, select, hover, scroll, wait, press_key, go_back, go_forward, navigate

id

number?

Semantic ID of the target element

value

string?

Text to type, option to select, scroll direction, key to press

url

string?

URL for navigate action

get_current_state

Re-extract the semantic map without navigating. Useful to refresh after multiple actions.

Parameter

Type

Description

task_intent

string?

Optionally change the intent filter

get_screenshot

Capture a PNG screenshot of the current viewport.

Parameter

Type

Description

full_page

boolean?

Capture the full scrollable page

Output Format

# 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]

Semantic Diff (after actions)

Instead of re-sending the whole page:

**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"]

Setup

npm install
npm run build

Usage with Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "semantic-dom": {
      "command": "node",
      "args": ["path/to/browser_mcp/dist/index.js"]
    }
  }
}

Usage with VS Code (Copilot)

Add to your .vscode/mcp.json:

{
  "servers": {
    "semantic-dom": {
      "type": "stdio",
      "command": "node",
      "args": ["${workspaceFolder}/dist/index.js"]
    }
  }
}

Why This Wins

Metric

Raw HTML

This MCP

Payload

~100KB

~2KB

Token cost

~25K tokens

~500 tokens

Selector accuracy

Hallucinated CSS

Integer IDs

After-action update

Full re-send

Diff only

Intent awareness

None

Prunes by task

F
license - not found
-
quality - not tested
D
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/krishankb-de/AxonMCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server