agent-devtools

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

시작하기 GitHub

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 어댑터 지원.

다음 단계

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