benjitaylor/agentation

해결하는 문제

Agentation은 AI 코딩 에이전트에게 특정 UI 요소를 설명하는 어려움을 해결합니다. "사이드바에 있는 파란색 버튼"과 같은 모호한 설명 대신, 사용자가 페이지의 요소를 시각적으로 주석 처리하고 에이전트에게 정확한 기술 식별자(CSS 선택자 등)를 제공하여 에이전트가 해당 요소를 담당하는 정확한 코드를 찾을 수 있도록 합니다.

작동 방식

이 도구는 React 컴포넌트로, 애플리케이션에 시각적 피드백 툴바를 추가합니다. 사용자가 페이지의 영역을 클릭하거나 선택하면, 도구는 요소의 클래스 이름, 선택자, 위치를 캡처합니다. 이 데이터는 구조화된 markdown 출력으로 변환되어 AI 도구에 복사 및 붙여넣기하거나, MCP (Model Context Protocol) 서버를 통해 에이전트와 직접 동기화할 수 있습니다.

대상 사용자

AI 코딩 에이전트(Claude Code, Codex, Gemini, Grok 등)를 사용하며 개발 과정에서 AI 어시스턴트에게 정확한 시각적 피드백과 컨텍스트를 제공하고자 하는 개발자.

주요 특징

• 정확한 선택: 개별 요소 클릭, 텍스트 선택, 다중 선택, 드래그를 통한 특정 영역 정의 지원.
• 에이전트 통합: 복사 및 붙여넣기 또는 MCP 서버를 통한 직접적인 실시간 동기화를 통해 모든 AI 도구와 연동 가능.
• 상태 캡처: CSS 애니메이션, Web Animations, 비디오를 일시 정지하여 특정 시각적 상태를 캡처 가능.
• 심층 접근: shadow roots 및 동일 출처(same-origin) iframes 내부의 요소 선택 가능.
• 경량화: React 18+ 외에 런타임 의존성 없음.