Framework-Agnostic DOM Inspector

Click. Annotate.
Send to AI.

DOM-AI-Bridge captures any DOM element on any web stack and pipes it directly into your terminal or AI tool — no framework lock-in.

Install Extension View on GitHub Try the Demo ↓
🌐
Web Page DOM
React / Vue / JSP / Vanilla...
click
🖱️
Select + Annotate
AI · Developer · Share
Copy / Webhook
⚡
Bridge Server
localhost:4180
pull (1.5s)
🤖
Claude Code / tmux
stdout · clipboard · tmux · frontmost

Works on every framework

The extension reads the real DOM — not virtual DOM. It works everywhere.

⚛️
React
useState, hooks, virtual DOM
DO TEST →
💚
Vue
v-model, reactivity, SFC
DO TEST →
🔶
Svelte
Compiled, animations, transitions
DO TEST →
🟡
Vanilla JS
Classic HTML, no framework
DO TEST →
🔵
SolidJS
Fine-grained reactivity, no VDOM
DO TEST →
🏔️
Alpine.js
Inline x-data directives
DO TEST →
🟣
Preact
3KB React alternative
DO TEST →
💡
Lit
Web Components, shadow DOM
DO TEST →

How it works

🧩
① Install Extension
Add DOM-AI-Bridge to Chrome. Click the icon and enable element selection.
🎯
② Select & Annotate
Click any DOM element to highlight it. Add annotations to explain what needs to change.
🤖
③ Send to AI
Copy in AI format and paste into Claude. Or run the Bridge Server for auto-paste to your terminal.

Three export formats

AI
AI
Markdown optimized for Claude, Cursor, and other AI tools.
# UI Annotations
**Page:** https://example.com/dashboard
**Elements:** 2

---
**[1] BUTTON** `#submit-btn`
Text: "Submit Order"
> Change button color to red and add loading state
JSON
Developer
Full JSON with selectors, attributes, and bounding boxes.
{
  "tool": "DOM AI Bridge",
  "selections": [{
    "selector": "#submit-btn",
    "tagName": "BUTTON",
    "strategy": "id",
    "boundingBox": { "x": 120, "y": 340,
      "width": 140, "height": 40 },
    "attributes": { "id": "submit-btn",
      "class": "btn btn-primary" }
  }]
}
TXT
Share
Plain text for designers and product managers.
UI 주석 — https://example.com/dashboard
총 2개 요소

1. BUTTON (#submit-btn)
   텍스트: "Submit Order"
   주석: Change button color to red

Bridge Server Quick Start

# 1. Clone and install
git clone https://github.com/Sejin-999/agentation-dom-server
cd agentation-dom-server && npm install
# 2. Configure
cp .env.example .env
# DEFAULT_ENDPOINT_KEY=local-dev
# DEFAULT_ENDPOINT_SECRET=local-secret
# 3. Run server
npm run dev
→ http://127.0.0.1:4180
# 4. Run bridge client (auto-paste to frontmost app)
DOM_SERVER_URL=http://127.0.0.1:4180 \
DOM_BRIDGE_KEY=bridge-local \
DOM_BRIDGE_MODE=frontmost \
npm run bridge:dev