agent-devtools

페이지 안에서 바로 코드까지 고치는 in-page 에이전트 데브툴. 본인의 Claude Pro / Max 구독을 그대로 활용.

시작하기 GitHub

실제 Claude 에이전트가 망가진 Checkout 합계를 픽하고 OrderSummary.tsx · cart.ts · money.ts 를 읽어 군더더기 * 100 을 제거하면, HMR 로 합계가 그 자리에서 바로잡히는 모습 — 전부 브라우저 탭 안에서. — 틀린 합계를 픽하고 평어로 묻기만 하면, 실제 Claude 에이전트가 여러 파일을 가로질러 원인을 추적하고 그 자리에서 고칩니다 — 탭을 떠나지 않고.

UI 에서 바로 고친다

플로팅 위젯에서 자연어 프롬프트를 보내면 로컬 Claude Code 가 그 자리에서 코드를 편집합니다.

본인 구독 그대로

Anthropic API 키가 아니라 ~/.claude 의 OAuth 토큰을 재사용합니다. 새 결제 없음.

2개 provider

acp (Claude Code 자식 프로세스) 와 sdk (in-process Claude Agent SDK) 두 가지 — 위젯 설정 패널에서 전환 가능.

페이지 컨텍스트 자동 첨부

Pick 으로 element 선택 → 컴포넌트 메타 (componentName, fileName, lineNumber) 자동 첨부. React / Vue 2·3 / Angular / Svelte / SvelteKit / Next.js (App + Pages) / Nuxt 2·3 어댑터 지원.

픽이 에이전트에게 실어 보내는 것

element 를 픽하면 위젯은 스크린샷이 아니라 에이전트가 추론할 근거를 함께 실어 보냅니다:

agent-devtools composer 에 픽한 element 의 근거 tooltip — 소스 파일, 컴포넌트 체인, 고유 CSS selector 가 표시된 모습.

컴포넌트 체인 — 루트까지의 named 조상, 예: OrderSummary → App.
소스 파일 — element 가 렌더되는 실제 파일. 에이전트가 올바른 코드를 먼저 엽니다.
Selector + outerHTML — 정확한 노드. 소스 경로가 안 잡혀도 에이전트가 마크업을 찾을 수 있습니다.

IDE 불필요본인 Claude Pro / Max 구독프로덕션 번들 0바이트

다음 단계

소개에서 무엇을 하는 도구인지부터 읽기
설치에서 Vite + React 프로젝트에 5분 안에 붙이기
Provider 가이드에서 ACP vs SDK 트레이드오프 확인