Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Semantic DOM Filter MCP Server Navigate to https://example.com and find the pricing section"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
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 DiffRelated MCP server: urltomarkdown-mcp
get_semantic_viewNavigate to a URL and get a filtered semantic map.
Parameter | Type | Description |
| string | URL to navigate to |
| 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_actionExecute an action and get back only what changed (semantic diff).
Parameter | Type | Description |
| enum |
|
| number? | Semantic ID of the target element |
| string? | Text to type, option to select, scroll direction, key to press |
| string? | URL for |
get_current_stateRe-extract the semantic map without navigating. Useful to refresh after multiple actions.
Parameter | Type | Description |
| string? | Optionally change the intent filter |
get_screenshotCapture a PNG screenshot of the current viewport.
Parameter | Type | Description |
| boolean? | Capture the full scrollable 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]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"]npm install
npm run buildAdd to your claude_desktop_config.json:
{
"mcpServers": {
"semantic-dom": {
"command": "node",
"args": ["path/to/browser_mcp/dist/index.js"]
}
}
}Add to your .vscode/mcp.json:
{
"servers": {
"semantic-dom": {
"type": "stdio",
"command": "node",
"args": ["${workspaceFolder}/dist/index.js"]
}
}
}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 |
This server cannot be deployed
Turn any web page URL or HTML into clean Markdown or plain text for an LLM to read.
Convert any webpage to clean LLM-ready markdown, extraction-first, with article and news modes.
Web pages as clean Markdown and JSON for AI agents, in fewer tokens, with an Evidence Record.
Web scraping for AI agents. Converts URLs to clean, LLM-ready Markdown with anti-bot bypass.