• 한국어

      • 설치 및 연결

      React Native MCP를 사용하려면 MCP 서버, 클라이언트 설정, 앱 쪽 설정, 네이티브 도구(idb/adb) 가 필요합니다.

      1. MCP 서버 설치

      전역 설치 (npm, pnpm, bun, yarn, deno):

      npm
      yarn
      pnpm
      bun
      deno
      npm install -g @ohah/react-native-mcp-server

      설치 없이 실행만 (npx, pnpx, bunx 등):

      npx -y @ohah/react-native-mcp-server

      Cursor·Claude·Copilot 설정에서는 보통 설치 없이 실행하는 방식을 사용합니다.

      2. 클라이언트에 서버 등록

      사용하는 AI 클라이언트에 MCP 서버를 등록해야 합니다.

      3. React Native 앱 설정

      MCP 서버가 앱과 통신하려면 Babel 프리셋을 적용하고 앱 진입점에서 MCP 런타임을 활성화해야 합니다. 콘솔/네트워크 도구는 Metro를 평소처럼 실행하면 됩니다 (MCP 서버가 Metro 디버거에 연결하며, Metro 설정 변경은 필요 없습니다).

      Babel 프리셋

      babel.config.js에 프리셋 추가 (AppRegistry 래핑, testID 자동 주입):

      module.exports = {
  presets: ['module:@react-native/babel-preset', '@ohah/react-native-mcp-server/babel-preset'],
};

      개발 빌드에서만 적용하려면:

      const isDev = process.env.NODE_ENV !== 'production';
const mcpPreset = isDev ? ['@ohah/react-native-mcp-server/babel-preset'] : [];
module.exports = {
  presets: ['module:@react-native/babel-preset', ...mcpPreset],
};

      렌더 하이라이트 (선택)

      리렌더 시 컴포넌트에 색상 오버레이를 그리는 시각적 하이라이트입니다. Babel 프리셋 옵션으로 앱 로드 시 켤 수 있습니다. 기본 스타일은 'react-mcp'(시안 #61dafb, DevTools 아이콘 톤)입니다.

      옵션설명
      renderHighlight: true로드 시 켜기, 스타일 'react-mcp' (시안, 기본).
      renderHighlight: { style: 'react-mcp' }위와 동일.
      renderHighlight: { style: 'react-scan' }로드 시 켜기, 스타일 'react-scan' (보라).
      생략 또는 false기본값은 꺼짐. MCP 도구나 VS Code DevTools Renders 패널에서 나중에 켤 수 있음.

      예시:

      module.exports = {
  presets: [
    'module:@react-native/babel-preset',
    ['@ohah/react-native-mcp-server/babel-preset', { renderHighlight: true }],
  ],
};

      4. 네이티브 도구 (idb / adb)

      탭·스와이프·스크린샷 등은 idb(iOS) / adb(Android)를 통해 동작합니다. 반드시 설치해야 합니다.

      Android — adb

      • Android Studio에 포함되어 있음
      • 별도 설치: brew install --cask android-platform-tools (macOS)
      • 확인: adb devices

      iOS 시뮬레이터 — idb

      idb (iOS Development Bridge) 설치:

      brew tap facebook/fb && brew install idb-companion
pip3 install fb-idb

      확인: idb list-targets

      idb는 macOS 전용이며 시뮬레이터만 지원합니다. 실기기는 별도 설정이 필요합니다.

      5. 동작 확인

      1. Metro로 앱 실행 (bun run start 또는 npm start)
      2. iOS 시뮬레이터 또는 Android 에뮬레이터에서 앱 실행
      3. Cursor(또는 사용 중인 클라이언트)에서 MCP 연결 후, 스냅샷·탭 등 도구가 동작하는지 확인

      문제가 있으면 MCP 사용법의 트러블슈팅이나 저장소 이슈를 참고하세요.