██████╗ ██████╗  ██████╗ 
██╔════╝ ██╔══██╗██╔════╝ 
██║  ███╗██║  ██║██║  ███╗
██║   ██║██║  ██║██║   ██║
╚██████╔╝██████╔╝╚██████╔╝
 ╚═════╝ ╚═════╝  ╚═════╝ 

Every browser agent today — OpenAI Operator, Anthropic Computer Use, Google Mariner — takes a screenshot, feeds it to a vision model, and hopes the model can figure out where the buttons are. This costs 10,000-15,000 tokens per page view and introduces OCR hallucinations, spatial reasoning errors, and mandatory vision model dependencies.

What if the page representation was text that looks like the page? A character grid where element density encodes type — buttons render as ████, inputs as ╔══╗, links as ▸, and layout is preserved spatially. Any text model reads it natively. No vision encoder needed.

         [1]              [2]  [3]
  
  ╔══[4]═══════════════════════════╗
  ╚════════════════════════════════╝

     [5]         [6]         [7]

     [8]         [9]         [10]

              [11]██████████████
              █ + New Project █
              ██████████████████

The model sees spatial layout, element types, and numbered targets in ~1,000 tokens. It says {"action": "click", "element": 11} and the extension executes it.

We tested graphic density output on 11 different products — GitHub, ChatGPT, Gmail, Google Docs, Reddit, Namecheap, Convex, Supabase, Cloudflare, and more. A text-only model with zero instructions correctly identified every product, located primary actions, and understood visual hierarchy.

Then we benchmarked against WebArena-style tasks:

0% to 60% in one day. Same token budget. No task-specific tuning.

Fourteen properties fall out of the spatial text encoding:

git clone https://github.com/Badgerion/GDG-browser.git

1. Open Chrome → chrome://extensions/
2. Enable Developer Mode (top right)
3. Click Load unpacked → select the cloned folder
4. Navigate to any website → click the extension icon → Scan Page

cd bridge
chmod +x install.sh server.js
./install.sh <your-extension-id>  # ID from chrome://extensions

Reload the extension. Test the connection:

curl http://127.0.0.1:7080/health

pip install requests anthropic

from gd_client import GraphicDensity

gd = GraphicDensity()

# See the page
gd.print_state(mode="read")

# Navigate and interact
gd.navigate("https://github.com")
gd.fill(3, "search query")
gd.click(4)

# Read data from the page
state = gd.read()
print(state["content"])   # visible text
print(state["tables"])    # extracted table data

1. GET /state?mode=numbered  →  model sees spatial map + element registry
2. Model decides             →  {"action": "click", "element": 11}
3. POST /action              →  extension executes, waits for DOM to settle
4. Returns new state         →  model sees what happened
5. Repeat

Navigate Phase (numbered mode — cheap, spatial)
  → Click menus, fill search bars, navigate to target page

Read Phase (read mode — rich, content-aware)
  → Extract text, read tables, find specific data values

The model switches modes mid-task: {"action": "switch_mode", "mode": "read"}

Interaction hints — every element shows what actions it supports:

[5]  button  "Submit"           click → submit
[12] input   "Search"           fill, clear
[17] link    "Documentation"    click → nav
[22] select  "Country"          select

Form grouping — elements inside <form> tags are linked:

[7]  input   "Email"            fill    {form:login}
[8]  input   "Password"         fill    {form:login}
[9]  button  "Sign in"          click → submit  {form:login}

Layer awareness — modals and overlays are detected:

⚠ MODAL ACTIVE — interact with elements 41, 42 first

[41] button  "Cancel"     click     [modal]
[42] button  "Confirm"    click     [modal]
[1]  button  "Menu"       click     [blocked]

Table extraction — structured data with pagination:

── Table 1 (Showing 1-20 of 2,048 results) ──
| Name | Email | Status |
|---|---|---|
| Veronica Costello | veronica@example.com | Active |
| ...

The bridge exposes a local HTTP API on 127.0.0.1:7080:

{"action": "click", "element": 5}
{"action": "fill", "element": 3, "value": "hello"}
{"action": "clear", "element": 3}
{"action": "select", "element": 7, "value": "Option text"}
{"action": "hover", "element": 12}
{"action": "scroll", "direction": "down"}
{"action": "scroll", "container": 14, "direction": "down"}
{"action": "keypress", "key": "Enter"}
{"action": "keypress", "key": "a", "modifiers": {"ctrl": true}}
{"action": "back"}
{"action": "forward"}
{"action": "wait", "duration": 1000}

Connect GDG to Claude Desktop, Cursor, or any MCP client:

{
  "mcpServers": {
    "gdg-browser": {
      "command": "node",
      "args": ["/path/to/bridge/mcp-server.js"]
    }
  }
}

Tools: gdg_get_state, gdg_click, gdg_fill, gdg_select, gdg_scroll, gdg_navigate, gdg_keypress, gdg_back, gdg_hover, gdg_tabs

One script, any AI provider:

python bridge/gdg-agent.py "What's trending on GitHub?"
python bridge/gdg-agent.py -m openai/gpt-4o "Find flights to Tokyo"
python bridge/gdg-agent.py -m ollama/llama3 "Check Hacker News"
python bridge/gdg-agent.py -m groq/llama-3.3-70b-versatile "Search Amazon"
python bridge/gdg-agent.py -m gemini/gemini-2.0-flash "Go to Reddit"
python bridge/gdg-agent.py -m sambanova/Meta-Llama-3.1-70B-Instruct "Check weather"

Supports: Anthropic, OpenAI, Groq, Ollama (local), Sambanova, Gemini

Tested against WebArena-style tasks on a Magento admin panel (multi-step navigation, data retrieval, form interaction):

WebArena — Magento admin panel (multi-step navigation, data retrieval, form interaction):

0% to 60% in one day. Same token budget. No task-specific tuning.

WebVoyager — GitHub tasks:

Score: 80% (4/5) — three tasks completed in just 2 steps.

Comparison to screenshot-based agents:

External Process (Python, curl, any language)
  ↕ HTTP (localhost:7080)
bridge/server.js         ← Native messaging host + HTTP server
  ↕ stdin/stdout (Chrome native messaging)
background.js            ← Service worker, tab routing, navigation
  ↕ chrome.tabs.sendMessage
renderer.js              ← Scanner + classifier + renderer + executor
  ↕ DOM / accessibility tree
Web Page

Extension-based, not CDP. Chrome Extension APIs are first-class browser citizens — sandboxed execution, no automation fingerprint, session persistence across crashes. CDP (Puppeteer/Playwright) is a debugging backdoor with detectable fingerprints.

Text output, not images. Any model that reads text can drive the browser. No vision encoder, no image preprocessing, no OCR. Token cost scales with page complexity, not pixel count.

Semantic density, not raw DOM. Elements are classified by role and rendered with visual weight. Buttons are heavy (████), inputs have borders (╔══╗), links are light (▸). The model perceives UI hierarchy from character density without needing CSS or computed styles.

GDG-browser/
├── manifest.json           Chrome extension manifest (MV3)
├── renderer.js             Core: scanner + classifier + 5 render modes + action executor
├── background.js           Service worker: message routing, native messaging, tab management
├── popup.html              Testing UI with State/Actions/History tabs
├── popup.js                Popup controller
├── icons/                  Extension icons
├── bridge/
│   ├── server.js           Native messaging host + HTTP API server
│   ├── mcp-server.js       MCP server for Claude Desktop / Cursor integration
│   ├── install.sh          One-time setup for native messaging registration
│   ├── gd_client.py        Python client library
│   ├── gdg-agent.py        Universal multi-model browser agent CLI
│   ├── agent_example.py    Example AI agent loop
│   └── benchmark.py        WebArena benchmark harness
└── README.md

• v0.1 — Spatial renderer + action executor + popup testing UI
• v0.2 — Read mode, interaction hints, form grouping, layer awareness, table extraction
• API — HTTP bridge + Python client + agent example
• v0.2.1 — MCP server (Claude Desktop / Cursor), multi-model CLI (Anthropic, OpenAI, Groq, Ollama, Gemini, Sambanova)
• v0.3 — State diff (send only changes), hidden DOM flow scan, iframe pipelining
• Sessions — Checkpoint/restore across model context resets
• Desktop — macOS/Windows accessibility tree → spatial text (same technique, native apps)
• Framework integrations — Browser Use, LangChain adapters

This is early-stage infrastructure. If you're building AI agents and hit a page the renderer can't handle, open an issue with the URL and what broke. Edge cases are how this gets better.

AGPL-3.0 — Use it, modify it, build on it. If you run it as a service, share your changes.

For commercial licensing, open an issue or reach out.