benjitaylor/agentation
AI 코딩 에이전트를 위한 시각적 웹 피드백 도구 — 페이지 요소를 클릭하고 구조화된 주석을 생성합니다.
4,060+34이번 주0 찜
325포크28이슈
중간맛 분석
TypeScript + React 18+ 환경에서 으로 설치 후 컴포넌트에 임포트하면 우측 하단에 툴바가 나타납니다. 난이도는 매우 쉬움(1/5) — 의존성 없이 순수 CSS 애니메이션으로만 작동하기 때문입니다. 클릭하면 자동으로 셀렉터·좌표·컨텍스트를 마크다운 형식으로 복사할 수 있어서 바로 AI 프롬프트에 붙여넣을 수 있습니다. 라이브 데모는 agentation.com에서 확인 가능합니다.
이런 레포예요
이럴 때 쓰면 좋아요
- AI 코딩 에이전트에게 웹페이지의 특정 UI 버그를 정확한 셀렉터와 함께 설명할 때
- 디자인 스펙 변경 사항을 개발자에게 구조화된 형식으로 전달할 때
- 웹 자동화 에이전트가 특정 페이지 영역을 식별해야 할 때
핵심 기능
클릭·텍스트 선택·다중 선택·영역 선택으로 다양한 요소 주석 방식CSS/JS 애니메이션 일시정지로 동적 상태 캡처마크다운 출력에 DOM 셀렉터·절대 좌표·컨텍스트 자동 포함
대안 대비 차별점
IDE 통합이나 런타임 의존성 없이 모든 웹앱에 주입 가능하며, 에이전트 무관 설계로 특정 AI 플랫폼에 종속되지 않습니다.
준비물
- React 18 이상
- 데스크톱 브라우저
바로 시작하기
- 프로젝트에 agentation 설치하기
npm install agentation -D
- React 컴포넌트에 Agentation 임포트 및 추가
import { Agentation } from 'agentation';
function App() {
return (
<>
<YourApp />
<Agentation />
</>
);
}
-
앱 실행 후 우측 하단 툴바 클릭
-
주석을 달 요소 클릭하기
-
마크다운 형식의 구조화된 출력 복사하기
별 추이 · 7일
4,060+34 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 26/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2026년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/benjitaylor/agentation)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
방법 ① 커넥터 URL
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp방법 ② 플러그인 (체험까지)
플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기