MCP 사용법
Cursor, Claude Desktop, GitHub Copilot CLI에서 React Native MCP 서버를 연결하고 사용하는 방법입니다.
공통 설정
각 클라이언트에서 MCP 서버를 다음처럼 등록합니다.
- Command:
npx - Args:
-y @ohah/react-native-mcp-server
서버가 실행되면 stdio로 MCP 프로토콜을 주고받고, 앱은 Metro를 통해 WebSocket으로 서버에 연결됩니다.
Cursor
- Cursor 설정 → MCP 로 이동하거나, 프로젝트
.cursor/mcp.json편집 - 다음 내용 추가:
- Cursor 재시작 또는 MCP 새로고침
- 앱에서 Metro로 번들 실행 후 시뮬레이터/에뮬레이터에서 앱 실행
- 채팅에서 MCP 도구(take_snapshot, tap, assert_text 등)를 사용해 앱 제어·검증
Claude Desktop / Claude CLI
방법 A: Claude CLI mcp add (권장)
Claude Code 또는 Claude CLI를 쓰는 경우, 다음 명령으로 서버를 등록할 수 있습니다.
등록 후 앱을 실행하고 대화에서 MCP 도구를 사용하면 됩니다. claude mcp list로 서버 등록 여부를 확인할 수 있습니다.
방법 B: 설정 파일 직접 편집
- 설정 파일 편집
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
- macOS:
- 다음 내용 추가:
- Claude Desktop 재시작
- 앱 실행 후 Claude와 대화하면서 MCP 도구 사용
GitHub Copilot CLI
- Copilot CLI 실행 후
/mcp add react-native-mcp입력 - 프롬프트에서:
- Command:
npx - Args:
-y @ohah/react-native-mcp-server
- Command:
- 또는
~/.copilot/mcp-config.json에 직접 위와 같은 형식으로 추가 - Copilot CLI 재시작
사용 가능한 도구 개요
연결이 되면 12개 카테고리에 걸쳐 42개 도구를 사용할 수 있습니다 — 인터랙션, 검증, 화면 캡처, 네트워크 모킹, 상태 인스펙션, 렌더 프로파일링 등.
AI에게 "지금 앱 화면 스냅샷 찍어줘", "로그인 버튼 눌러줘"처럼 요청하면 해당 도구를 자동으로 호출해 동작합니다.
모든 도구의 상세 파라미터, 예제, 플랫폼별 팁은 도구 레퍼런스 를 참고하세요. 실전 활용 시나리오는 쿡북 에서 확인할 수 있습니다.
MCP 런타임 활성화
앱이 MCP 서버(WebSocket 12300)에 연결되려면 빌드 시 환경변수로 활성화합니다. 앱 진입점(index.js)에 코드를 넣을 필요 없습니다.
-
Metro 실행 시:
REACT_NATIVE_MCP_ENABLED=true또는REACT_NATIVE_MCP_ENABLED=1 -
개발 모드(
__DEV__ === true)에서는 이 환경변수 없이도 자동으로 연결을 시도합니다.
연결이 안 될 때
"No app connected"가 나오거나 도구가 동작하지 않을 때는 문제 해결 페이지에서 단계별 진단을 확인하세요 — 중복 프로세스, 포트 충돌, localhost 문제, 런타임 미주입 등을 다룹니다.