agnt
AI 코딩 에이전트에게 브라우저 슈퍼파워를 부여하세요.
👁 Go Version
👁 MCP
👁 npm
👁 PyPI
👁 License
agnt란 무엇인가요?
agnt는 AI 보조 개발 시대를 위해 설계된 새로운 유형의 도구입니다. AI 코딩 에이전트와 브라우저 사이의 가교 역할을 하며, 바이브 코딩(vibe coding) 세션 중에 가능한 작업의 범위를 확장합니다.
Claude Code, Cursor 또는 기타 AI 코딩 도구와 함께 작업할 때, agnt를 사용하면 에이전트가 다음을 수행할 수 있습니다:
사용자가 보는 것을 확인 - 스크린샷, DOM 검사 및 시각적 디버깅
직접적인 피드백 수신 - 브라우저에서 에이전트로 메시지 전송
아이디어 스케치 - UI 위에 직접 와이어프레임 그리기
실시간 디버깅 - 오류, 네트워크 트래픽 및 성능 지표 캡처
모든 기기에서 테스트 - 전체 계측 기능을 갖춘 휴대폰 및 BrowserStack으로 터널링
사고 창 확장 - 구조화된 데이터는 설명보다 적은 토큰을 사용
데모
실행 중인 앱 위에 직접 와이어프레임을 그리고 AI 에이전트로 전송하세요
비전: 에이전트의 기능 확장
기존의 AI 코딩 보조 도구는 브라우저에서 무슨 일이 일어나고 있는지 알지 못합니다. 코드는 작성할 수 있지만 다음은 불가능합니다:
변경 사항의 시각적 결과 확인
JavaScript 오류 발생 시점 파악
사용자가 겪고 있는 레이아웃 문제 이해
사용자가 직접 타이핑하지 않고 피드백 수신
agnt는 이를 변화시킵니다. 브라우저와 AI 에이전트 사이에 양방향 채널을 생성합니다:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Your Browser │ ←──► │ agnt │ ←──► │ AI Agent │
│ │ │ │ │ │
│ - See changes │ │ - Proxy traffic│ │ - Receives │
│ - Send notes │ │ - Capture errors│ │ context │
│ - Draw sketches│ │ - Inject tools │ │ - Acts on │
│ - Click to log │ │ - Route messages│ │ feedback │
└─────────────────┘ └─────────────────┘ └─────────────────┘빠른 시작
설치
npm (권장):
npm install -g @standardbeagle/agntpip/uv:
pip install agnt
# or
uv pip install agnt소스에서 빌드:
git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-localMCP 서버로 사용 (Claude Code, Cursor 등)
MCP 설정에 추가하세요:
{
"mcpServers": {
"agnt": {
"command": "agnt",
"args": ["mcp"]
}
}
}또는 Claude Code 플러그인으로 설치하세요:
/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agntPTY 래퍼로 사용 (향상된 터미널)
오버레이 기능을 위해 AI 도구를 래핑하세요:
agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider이렇게 하면 터미널 오버레이 메뉴(Ctrl+P)가 추가되고 브라우저-터미널 간 메시지 브리지가 활성화됩니다.
채널 모드 (베타 — Claude Code 전용)
베타 / 실험적: 채널 모드는 포크된 MCP SDK와 Claude Code의 개발 플래그가 필요합니다. 동작 및 스키마는 변경될 수 있습니다.
Claude Code v2.1.80 이상에서는 PTY 래퍼 없이도 실시간 브라우저 오류, 진단 및 사용자 상호작용을 컨텍스트 내 푸시 이벤트로 수신할 수 있습니다. .agnt.kdl에 channel { enabled true }를 추가하고 claude --dangerously-load-development-channels server:agnt로 실행하세요. 전체 스키마, 이벤트 형식 및 브라우저 오버레이로 메시지를 다시 보내는 channel_reply 도구에 대한 내용은 CLAUDE.md의 채널 모드 섹션을 참조하세요.
핵심 기능
1. 브라우저 슈퍼파워
프록시를 시작하면 에이전트가 브라우저를 볼 수 있게 됩니다:
proxy {action: "start", id: "app", target_url: "http://localhost:3000"}이제 에이전트는 다음을 수행할 수 있습니다:
// Take screenshots
proxy {action: "exec", id: "app", code: "__devtool.screenshot('current-state')"}
// Inspect any element
proxy {action: "exec", id: "app", code: "__devtool.inspect('#submit-button')"}
// Audit accessibility
proxy {action: "exec", id: "app", code: "__devtool.auditAccessibility()"}
// Check what the user clicked
proxy {action: "exec", id: "app", code: "__devtool.interactions.getLastClickContext()"}2. 플로팅 표시기
프록시된 모든 페이지에는 작은 플로팅 버그 아이콘이 표시됩니다. 클릭하면 다음을 수행할 수 있습니다:
AI 에이전트로 직접 메시지 전송
특정 영역의 스크린샷 촬영
요소를 선택하여 세부 정보 기록
와이어프레임을 위한 스케치 모드 열기
보는 것을 설명하기 위해 alt-tab을 누를 필요 없이, 클릭하고 전송하세요.
3. 스케치 모드
스케치 버튼을 누르고 UI 위에 직접 그리세요:
사각형, 원, 화살표 및 자유형 그리기
와이어프레임 요소: 버튼, 입력창, 스티커 메모
클릭 한 번으로 저장하고 에이전트로 전송
타이핑 없이 "여기에 버튼을 원해" 또는 "이 레이아웃이 잘못됐어"라고 말하기에 완벽합니다.
4. 실시간 오류 캡처
JavaScript 오류가 자동으로 캡처되어 에이전트가 사용할 수 있게 됩니다:
proxylog {proxy_id: "app", types: ["error"]}
→ {message: "TypeError: Cannot read property 'map' of undefined",
stack: "at ProductList (products.js:42)",
timestamp: "..."}에이전트는 사용자가 언급하기를 기다릴 필요 없이 오류가 발생하는 즉시 이를 확인합니다.
5. 사고 창 확장
구조화된 데이터는 자연어 설명보다 적은 토큰을 소비합니다:
오류 요약 -
proxylog {types: ["error"]}vs. "42번째 줄에서 TypeError가 발생했는데..."클릭 컨텍스트 -
interactions.getLastClickContext()vs. "헤더에 있는 파란색 버튼을 클릭했는데..."DOM 상태 -
inspect('#element')vs. "중첩된 span이 있는 div가 있는데..."통합 스택 추적 - React 오류 벽을 실행 가능한 요약으로 사전 처리
한눈에 보는 상태 - 에이전트가 효율적으로 파싱할 수 있는 구조화된 JSON
100줄의 중첩된 React 오류를 컨텍스트에 덤프하는 대신, agnt는 장황한 출력을 간결하고 실행 가능한 데이터로 통합합니다.
MCP 도구
도구 | 설명 |
| 프로젝트 유형 및 사용 가능한 스크립트 자동 감지 |
| 스크립트 또는 명령어 실행 (백그라운드/포그라운드) |
| 프로세스 관리: 상태, 출력, 중지, 목록 |
| 역방향 프록시: 시작, 중지, 실행, 상태 |
| 로그 쿼리: http, error, screenshot, sketch, panel_message |
| 그룹화된 리소스와 함께 활성 페이지 세션 보기 |
| 터널 관리: 모바일 테스트를 위한 Cloudflare/ngrok |
| 백그라운드 데몬 서비스 관리 |
| 개발자의 브라우저 오버레이로 메시지 전송 (채널 모드 전용) |
브라우저 API (50개 이상의 함수)
프록시는 강력한 진단 기능을 갖춘 window.__devtool을 주입합니다:
요소 검사
__devtool.inspect('#element') // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element') // Visibility check시각적 디버깅
__devtool.highlight('.items') // Highlight elements
__devtool.mutations.highlightRecent() // Show recent DOM changes
__devtool.screenshot('name') // Capture screenshot접근성
__devtool.auditAccessibility() // Full a11y audit with score
__devtool.getContrast('#text') // Color contrast check
__devtool.getTabOrder() // Tab navigation order상호작용
__devtool.interactions.getLastClick() // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement() // Interactive picker스케치 모드
__devtool.sketch.open() // Enter sketch mode
__devtool.sketch.save() // Save and send to agent
__devtool.sketch.toJSON() // Export sketch data설정
프로젝트 루트에 .agnt.kdl을 생성하여 스크립트, 프록시를 자동 시작하고 브라우저 알림을 구성하세요:
// Scripts to run via daemon process manager
scripts {
dev {
run "npm run dev" // Shell command (recommended)
autostart true
url-matchers "(Local|Network):\\s*{url}"
}
api {
command "go" // Or use command + args
args "run" "./cmd/server"
autostart true
env {
GIN_MODE "debug"
}
cwd "./backend"
}
}
// Reverse proxies with traffic logging
proxies {
frontend {
script "dev" // Link to script for URL auto-detection
}
backend {
target "http://localhost:8080"
autostart true
max-log-size 2000
}
}
// Browser notifications when AI responds
hooks {
on-response {
toast true // Show toast notification
indicator true // Flash bug indicator
sound false // Play notification sound
}
}
// Toast appearance
toast {
duration 4000
position "bottom-right" // top-right, top-left, bottom-right, bottom-left
max-visible 3
}Claude Code에서 /setup-project를 실행하여 이 설정을 대화형으로 생성하세요.
프레임워크별 URL 매처:
프레임워크 | url-matchers | |
Next.js / Vite / React | `"(Local\ | Network):\s*{url}"` |
Wails |
| |
Astro |
| |
Jekyll |
| |
Hugo |
|
아키텍처
agnt는 지속적인 상태를 위해 데몬 아키텍처를 사용합니다:
┌─────────────────────┐ ┌─────────────────────────────────────┐
│ AI Agent │ │ agnt │
│ (Claude Code, etc.)│◄─────►│ │
│ │ MCP │ ┌────────────────┐ │
└─────────────────────┘ │ │ MCP Server │ │
│ └───────┬────────┘ │
│ │ socket │
│ ▼ │
┌─────────────────────┐ │ ┌────────────────────────────────┐ │
│ Browser │◄──────┼──│ Daemon │ │
│ │ proxy │ │ ProcessManager │ ProxyManager │ │
│ __devtool API │ │ └────────────────────────────────┘ │
│ Floating Indicator │ └─────────────────────────────────────┘
│ Sketch Mode │
└─────────────────────┘주요 설계 결정:
sync.Map및 원자적 연산을 통한 락 프리(Lock-free) 동시성링 버퍼를 사용한 메모리 제한
클라이언트 연결 해제 시에도 프로세스 및 프록시 유지
의존성 없는 프론트엔드 JavaScript
문서
# Run docs locally
cd docs-site
npm install && npm start사용 사례
바이브 코딩 - 에이전트가 모든 것을 보는 동안 흐름을 유지하세요
시각적 디버깅 - 말하지 말고 보여주세요 - 무엇이 잘못되었는지 스케치하세요
모바일 테스트 - Cloudflare/ngrok + BrowserStack 통합을 통해 실제 기기 테스트를 위한 개발 서버 터널링
접근성 테스트 - 개발 중 자동화된 a11y 감사
오류 추적 - 사용자가 겪기 전에 프론트엔드 오류 포착
UI 리뷰 - 라이브 앱에서 직접 디자인 주석 달기
원격 협업 - 에이전트와 시각적 컨텍스트 공유
요구 사항
Node.js 18+ 또는 Go 1.24+
MCP 호환 AI 보조 도구
devtool-mcp에서 마이그레이션
agnt는 devtool-mcp의 새로운 이름입니다. 기존 사용자:
# npm
npm uninstall -g @standardbeagle/devtool-mcp
npm install -g @standardbeagle/agnt
# pip
pip uninstall devtool-mcp
pip install agntMCP 설정을 업데이트하여 ["mcp"] 인자와 함께 agnt 명령어를 사용하세요.
라이선스
MIT
기여
기여를 환영합니다! 아키텍처 세부 정보는 문서를 참조하세요.
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Appeared in Searches
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/standardbeagle/agnt'
If you have feedback or need assistance with the MCP directory API, please join our Discord server