CLI Init — 빠른 설정

한 줄 명령어로 React Native MCP를 프로젝트에 설정합니다.

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

수동 설정(babel config, 클라이언트 config, gitignore)을 대체하는 인터랙티브 셋업 위저드입니다.


동작 과정

Terminal
$ npx -y @ohah/react-native-mcp-server init

React Native MCP Setup

Detecting project...
✓ React Native 0.83.1
✓ Expo detected (expo@~52.0.0)
✓ Package manager: bun

Checking external tools...
✓ adb — found
✓ idb — found
All tools ready!

? Which MCP client do you use?
1. Cursor
2. Claude Code (CLI)
3. Claude Desktop
4. Windsurf
5. Antigravity
> 1

Applying changes...
✓ babel.config.js — preset added
✓ MCP config — created .cursor/mcp.json
✓ .gitignore — updated

Done! Next steps:
1. Start your app: npx expo start
2. Open Cursor — MCP tools are ready to use

단계별 상세

Step 1 — 프로젝트 감지

프로젝트 디렉토리를 읽어 자동으로 감지합니다:

항목감지 방법
React Native 버전package.jsondependencies["react-native"]
Expo 여부dependencies["expo"], 또는 app.json / app.config.ts 존재
Babel 설정babel.config.js, babel.config.cjs, .babelrc
패키지 매니저bun.lock → bun, yarn.lock → yarn, pnpm-lock.yaml → pnpm, 그 외 npm

package.jsonreact-native가 없으면 에러와 함께 종료됩니다.

Step 1.5 — 외부 도구 확인

adb(Android)와 idb(iOS, macOS만)의 설치 여부를 자동으로 확인합니다.

도구용도설치 방법
adbAndroid 에뮬레이터 탭/스와이프/스크린샷Android Studio 포함, 또는 brew install android-platform-tools
idbiOS 시뮬레이터 탭/스와이프/스크린샷brew tap facebook/fb && brew install idb-companion

설치되어 있지 않으면 경고와 설치 안내를 표시하지만, 셋업은 계속 진행됩니다. 상세 안내는 설치 및 연결 — 네이티브 도구를 참고하세요.

Step 2 — MCP 클라이언트 선택

사용하는 MCP 클라이언트를 선택합니다. 설정 파일 생성 위치가 결정됩니다.

클라이언트설정 경로
Cursor{project}/.cursor/mcp.json
Claude Code (CLI)claude mcp add 명령어 실행
Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
Windsurf~/.codeium/windsurf/mcp_config.json
Antigravity~/.gemini/antigravity/mcp_config.json

생성되는 설정 내용:

{
  "mcpServers": {
    "react-native-mcp": {
      "command": "npx",
      "args": ["-y", "@ohah/react-native-mcp-server"]
    }
  }
}

파일이 이미 있으면 react-native-mcp 항목만 병합합니다. 기존 설정은 유지됩니다.

Step 3 — 변경 적용

네 단계가 적용됩니다:

  1. babel.config.jspresets 배열에 @ohah/react-native-mcp-server/babel-preset 추가.
  2. MCP 클라이언트 설정 — 위에서 설명한 경로에 생성/병합.
  3. .gitignore/results/ 추가 (E2E 테스트 출력 디렉토리).

각 단계는 멱등성을 보장합니다. 다시 실행하면 이미 적용된 변경은 건너뜁니다.

Step 4 — 다음 단계 안내

프로젝트 타입에 따라 다음 할 일을 안내합니다:

  • Expo: npx expo start
  • Bare RN: REACT_NATIVE_MCP_ENABLED=true npx react-native start

옵션

플래그설명예시
--client <name>클라이언트 선택 프롬프트 건너뜀--client cursor
-y, --yes비인터랙티브 모드 (기본: Cursor)-y
-h, --help도움말 표시--help
# CI / 자동화
npx -y @ohah/react-native-mcp-server init --client cursor -y

# 특정 클라이언트 지정
npx -y @ohah/react-native-mcp-server init --client antigravity

멱등성

init을 여러 번 실행해도 안전합니다:

Terminal — 재실행

$ npx -y @ohah/react-native-mcp-server init --client cursor -y


Applying changes...
✓ babel.config.js — preset already configured
✓ MCP config — already configured
✓ .gitignore — already has results/