🎯도구

React Grab: 웹사이트에서 바로 AI 코딩 에이전트에 컨텍스트 전달하기

웹페이지의 UI 요소를 선택하면 파일명, React 컴포넌트, HTML 소스코드를 자동으로 복사해주는 개발 도구

#React#개발도구#AI코딩#생산성

React Grab이란?

React Grab은 웹사이트의 UI 요소를 가리키고 단축키를 누르면 해당 요소의 소스코드 정보를 자동으로 복사해주는 도구입니다. Cursor, Claude Code, Copilot 같은 AI 코딩 도구의 성능을 최대 3배 향상시킬 수 있습니다.

▸

간편한 복사: 원하는 UI 요소에 마우스를 올리고 `⌘C` (Mac) 또는 `Ctrl+C` (Windows/Linux) 누르기

▸

자동 추출: 파일명, React 컴포넌트, HTML 소스코드를 자동으로 클립보드에 복사

▸

AI 도구 최적화: 정확한 컨텍스트 제공으로 AI 코딩 에이전트의 속도와 정확도 향상

프로젝트 루트 디렉토리에서 다음 명령어를 실행하세요:

bash

npx -y grab@latest init

Model Context Protocol과 연결하려면:

bash

npx -y grab@latest add mcp

로그인 폼의 비밀번호 찾기 링크를 복사하면 다음과 같은 정보가 클립보드에 저장됩니다:

html

<a class="ml-auto inline-block text-sm" href="#">
  Forgot your password?
</a>
in LoginForm at components/login-form.tsx:46:19

app/layout.tsx 파일에 다음 코드를 추가하세요:

tsx

import Script from "next/script";

export default function Layout({ children }) {
  // Script 컴포넌트 추가
}

AI 코딩 에이전트에게 정확한 컨텍스트를 제공하면 더 빠르고 정확한 코드 수정이 가능합니다. 수동으로 파일을 찾고 코드를 복사하는 시간을 절약할 수 있습니다.