🌐
웹 페이지 DOM
React / Vue / JSP / Vanilla...
클릭
🖱️
선택 + 주석
AI · Developer · Share
Copy / Webhook
⚡
브리지 서버
localhost:4180
pull (1.5s)
🤖
Claude Code / tmux
stdout · clipboard · tmux · frontmost
모든 프레임워크에서 동작합니다
익스텐션은 가상 DOM이 아닌 실제 DOM을 읽습니다. 어디서나 작동합니다.
작동 방식
🧩
① 익스텐션 설치
Chrome에 DOM-AI-Bridge를 추가하세요. 아이콘을 클릭하고 요소 선택을 활성화하세요.
🎯
② 선택 & 주석
DOM 요소를 클릭해서 하이라이트하세요. 변경이 필요한 내용을 주석으로 설명하세요.
🤖
③ AI로 전송
AI 포맷으로 복사해서 Claude에 붙여넣기 하세요. 또는 브리지 서버를 실행해서 터미널에 자동 붙여넣기하세요.
세 가지 내보내기 포맷
AI
AI
Claude, Cursor 등 AI 도구에 최적화된 Markdown.
# 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
개발자
셀렉터, 속성, 위치 정보가 포함된 전체 JSON.
{
"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
공유
디자이너, 기획자와 공유하는 Plain text.
UI 주석 — https://example.com/dashboard
총 2개 요소
1. BUTTON (#submit-btn)
텍스트: "Submit Order"
주석: Change button color to red브리지 서버 시작하기
# 1. 클론 및 설치
git clone https://github.com/Sejin-999/agentation-dom-server
cd agentation-dom-server && npm install
# 2. 환경 설정
cp .env.example .env
# DEFAULT_ENDPOINT_KEY=local-dev
# DEFAULT_ENDPOINT_SECRET=local-secret
# 3. 서버 실행
npm run dev
→ http://127.0.0.1:4180
# 4. 브리지 클라이언트 실행 (전면 앱 자동 붙여넣기)
DOM_SERVER_URL=http://127.0.0.1:4180 \
DOM_BRIDGE_KEY=bridge-local \
DOM_BRIDGE_MODE=frontmost \
npm run bridge:dev