react-grab으로 UI에서 바이브 코딩하기

개요

React Grab은 브라우저 내에서 DOM 요소를 선택하여 AI Agent 질의를 바로 수행하여 코드를 수정할 수 있는 라이브러리로,
2025년 10월에 나와 최신버전이 0.1.14인 만큼 안정적이지는 않지만 Vibe Coding시 활용도가 있어보이기에 리서치를 진행
(https://github.com/aidenybai/react-grab)

FE개발 시 어느 특정 부분에 기능을 추가하거나 버그를 수정하는 경우 특정 UI에 해당하는 코드를 찾는과정, 위치를 찾고 의도를 변환하는 과정에서 손실이 발생한다.
react-grab은 그러한 비용 손실을 줄이기 위해 탄생하였으며, React.js가 페이지에서 요소의 소스 위치를 노출하기에 이를 통해 문제를 해결하고자 하였다.
그리하여 AI Agent가 파일 경로를 참조하게 해 검색단계를 줄여, 코드 작업 시간을 단축시켰다. → 크레딧 비용 감소

Demo site(https://www.react-grab.com/)에 접속하면 어떻게 사용하는지 설명이 없이도 바로 사용 가능할 만큼 사용방법이 간단하고 직관적이다. (ctrl+c 를 통해 화면상 요소를 클릭or드래그 후 AI 질의 가능)
이를 사용하는 가장 좋은 사례로는 간격 조정, 레이아웃 수정 및 사소한 시각적 변형같이 중요도가 낮은 작업에 사용하는것으로 더욱 중요도가 높은 요구사항 작업에 집중할 수 있게 도와준다.

사용방법

1. Vite 사용 기준으로 "pnpm add react-grab@latest --save-dev" devDependencies에 react-grab 추가
2. index.html에 script문 추가

<script type="module"> if (import.meta.env.DEV) {import("react-grab");}</script>

3. ctrl + c 를 누른 채로 클릭or드래그 수행 하면 해당 요소 경로 복사
   

@<App>

<button type="submit" class="add-btn" data-react-grab-frozen="">
  추가
</button>
  in App (at /src/App.tsx)

4. Github copilot에 해당 요소와 함께 질의
   

5. (선택)pnpm add @react-grab/claude-code 같이 플러그인과 Claude Code CLI를 설치해 브라우저 내에서 바로 질의가 가능하지만
   내부망 + Claude에서 데이터를 수집하는 이슈로 인해 사용은 불가함

기대효과

• UI상 코드 위치 검색 시간 감소 및 AI Agent 질의 시간 단축 및 의도 구체화
• MFE환경에서 패키지 경로를 빠르게 탐색 가능 및 신규 팀원 온보딩 속도 향상
• 추 후 깃헙 코파일럿 연동이 가능해지면 브라우저 상에서 코드 수정까지 빠르게 수행 가능하며 DX 증가