react-native-eye

React Native MCP सर्वर · iOS और Android

आपका कोडिंग एजेंट उस ऐप को देख सकता है जिसे वह बना रहा है।

react-native-eye, Claude Code, Cursor या किसी भी MCP क्लाइंट को चल रहे React Native ऐप से जोड़ता है। एजेंट स्क्रीन पढ़ता है, टैप और टाइप करता है, और लॉग, नेटवर्क व स्टेट की जाँच करता है। यह Metro के ज़रिए काम करता है, इसलिए ऐप में न कोई SDK चाहिए और न कोड में कोई बदलाव।

Claude Code में जोड़ें

claude mcp add react-native-eye -- npx -y react-native-eye@latest
Cursor, Codex और अन्य क्लाइंट
  • 35 टूल
  • iOS सिम्युलेटर, Android एम्युलेटर
  • कोई टेलीमेट्री नहीं
  • MIT

स्क्रीन

Welcome back Email Password Log in Forgot password? Create account

एजेंट क्या पढ़ता है

› observe
LAYOUT (js):
ERRORS:
none
LOGS:
[log] auth: no saved session
› get_layout {"search": ["Log in"]} Log in @196,468 (layout: js)

लॉगिन स्क्रीन के लिए उदाहरण आउटपुट। एलिमेंट ढूँढने के लिए किसी पंक्ति पर कर्सर ले जाएँ।

पूरा फ़्लो एक ही कॉल में

ज़्यादातर डिवाइस टूल में हर टैप के लिए एजेंट को मॉडल का एक चक्कर लगाना पड़ता है। यहाँ एजेंट सारे स्टेप एक साथ भेजता है और सर्वर उन्हें लगातार चलाता है। redbox या कोई अनकॉट एक्सेप्शन आते ही फ़्लो रुक जाता है, और एजेंट को हर स्टेप का नतीजा मिलता है।

  • observeस्क्रीनशॉट, इंटरैक्टिव एलिमेंट, हाल की त्रुटियाँ और हाल के लॉग।
  • run_flowटैप, टाइपिंग, प्रतीक्षा और जाँच, सब सर्वर पर चलते हैं।
  • check_stateमौजूदा रूट, स्टोर की स्टेट और अनहैंडल्ड त्रुटियाँ।
अनुरोध · run_flow
{ "steps": [
  { "type": { "text": "a@b.c", "into": { "placeholder": "Email" } } },
  { "type": { "text": "hunter2", "into": { "placeholder": "Password" } } },
  { "tap": { "text": "Log in", "via": "os" } },
  { "wait_for": { "text": "Home", "timeout_ms": 3000 } },
  { "expect_not": { "text": "Error" } }
] }
जवाब
Flow completed.

1. type({"text":"a@b.c","into":{"placeholder":"Email"}}) — ok (input: js)
2. type({"text":"hunter2","into":{"placeholder":"Password"}}) — ok (input: js)
3. tap({"text":"Log in","via":"os"}) — ok (input: os/runner)
4. wait_for({"text":"Home","timeout_ms":3000}) — ok
5. expect_not({"text":"Error"}) — ok

एजेंट क्या कर सकता है

पाँच समूहों में 35 टूल। हर जवाब बताता है कि कौन-सा रास्ता इस्तेमाल हुआ, इसलिए चुपचाप कुछ नहीं बदलता।

  • स्क्रीन देखना

    एलिमेंट की पोज़िशन ऐप के JS रनटाइम से लगभग 80 ms में मिलती हैं। OCR वह पढ़ता है जो ट्री में नहीं होता: इमेज, WebView और नेटिव डायलॉग।

    observescreenshotget_layoutread_screen_textget_component_tree

  • कार्रवाई करना

    JS प्रेस एलिमेंट के अपने onPress को लगभग एक मिलीसेकंड में कॉल करता है। असली टच डिवाइस पर मौजूद ड्राइवर से जाता है: जेस्चर, सिस्टम डायलॉग और नेटिव व्यू के लिए।

    run_flowtaptype_textswipescroll_topress_keynavigateopen_url

  • डीबग करना

    लॉग, बॉडी सहित नेटवर्क अनुरोध, स्टोर की स्टेट और JS इवैल्यूएशन। जिन क्रैश को LogBox दबा देता है, वे भी रिपोर्ट होते हैं।

    check_stateget_logsget_errorsget_networkget_stateeval_jsget_job

  • मापना

    कौन-से कंपोनेंट रेंडर हुए और क्यों, Hermes CPU प्रोफ़ाइल, थ्रेड के हिसाब से CPU और फ़्रेम टाइमिंग। ऐप में कोई सेटअप नहीं चाहिए।

    profile_rendersprofile_jssample_cpuget_fps

  • डिवाइस सँभालना

    ऐप इंस्टॉल, लॉन्च और रीलोड करना, परमिशन देना और वीडियो रिकॉर्ड करना।

    connectlist_targetslist_deviceslaunch_appreload_appinstall_appopen_simulatorset_permissionrecord_videostop_recordingping

कंपोज़िट टूल: कई कॉल की जगह एक कॉल।

ऐप तक पहुँचने के दो रास्ते

सर्वर दो रास्तों से ऐप तक पहुँचता है और हर कॉल के लिए सस्ता रास्ता चुनता है।

आपका एजेंटClaude Code, Cursor, Codex
MCP · stdio
react-native-eyeआपकी मशीन पर चलता है
CDP · Metro
JS रनटाइम (Hermes)लेआउट, प्रेस, टाइपिंग, लॉग, नेटवर्क, स्टेट
HTTP · localhost
डिवाइस पर ड्राइवरअसली टच, कीज़, OS व्यू हायरार्की, स्क्रीनशॉट

JS रनटाइम के ज़रिए

हर प्रेस ≈ 1 ms · पूरी स्क्रीन का लेआउट ≈ 80 ms

सर्वर Chrome DevTools Protocol के ज़रिए React के fiber ट्री को पढ़ता है। वह एलिमेंट मापता है और प्रेस व टेक्स्ट हैंडलर को सीधे कॉल करता है, बिना किसी टच के।

डिवाइस के ज़रिए

npm पैकेज में पहले से बना हुआ · पहले इस्तेमाल पर खुद इंस्टॉल होता है

iOS पर XCUITest रनर और Android पर instrumentation सर्वर असली टच भेजते हैं और कोई भी Unicode टेक्स्ट टाइप करते हैं। ड्राइवर शुरू न हो पाए तो इनपुट axe या adb पर चला जाता है, और जवाब में यह बताया जाता है।

मापा गया: डिवाइस ड्राइवर बनाम वे टूल जिनकी जगह वह लेता है

iOS सिम्युलेटर। फ़ीड का एक स्वाइप, 40 का मीडियन।
ड्राइवर
0.93 s
axe
26.68 s
40 में से 3 का 90 s पर टाइमआउट हुआ
Android एम्युलेटर। चलते वीडियो के ऊपर व्यू हायरार्की, 10 का मीडियन।
ड्राइवर
4.60 s
uiautomator
27.10 s
10 में से 9 विफल रहे

ये आँकड़े प्रोजेक्ट के अपने फ़ील्ड टेस्ट से हैं, जो व्यस्त वीडियो फ़ीड पर iOS 26 सिम्युलेटर और Android 16 एम्युलेटर में किए गए। दोनों चार्ट का पैमाना एक ही है।

तीन स्टेप में कनेक्ट करें

  1. सर्वर को अपने क्लाइंट में जोड़ें

    # अपने प्रोजेक्ट फ़ोल्डर में
claude mcp add react-native-eye -- npx -y react-native-eye@latest

  2. Metro और डेव बिल्ड शुरू करें

    ऐप को iOS सिम्युलेटर या Android एम्युलेटर में वैसे ही चलाएँ जैसे आप हमेशा चलाते हैं। पोर्ट 8081–8083 और 19000–19002 पर Metro अपने आप मिल जाता है। किसी और पोर्ट के लिए आर्ग्युमेंट में --port 8090 जोड़ें।

  3. एजेंट से कहें

    मेरे ऐप से कनेक्ट करो और बताओ कि स्क्रीन पर क्या है।

    एजेंट पहले connect और फिर observe कॉल करता है। हर डिवाइस पर पहली कॉल ड्राइवर को एक बार इंस्टॉल करती है।

कोई टेलीमेट्री नहीं। कोई अकाउंट नहीं। कोई क्लाउड नहीं।

नेटवर्क ट्रैफ़िक सिर्फ़ localhost पर जाता है: Metro और डिवाइस ड्राइवर तक। सर्वर के सोर्स में कोई बाहरी URL आ जाए तो एक टेस्ट बिल्ड को फ़ेल कर देता है।

जानने लायक

  • सिर्फ़ डेव बिल्ड। प्रोडक्शन बिल्ड में जुड़ने के लिए कोई Metro कनेक्शन नहीं होता।
  • iOS सिम्युलेटर और Android एम्युलेटर पर टेस्ट किया गया।
  • 0.85 से पुराना React Native एक समय में एक ही डीबगर चलने देता है, इसलिए पहले बाकी डीबगर बंद करें।

React Native MCP सर्वर: आम सवाल

React Native MCP सर्वर क्या है?
MCP सर्वर AI कोडिंग एजेंट को ऐसे टूल देता है जिन्हें वह कॉल कर सके। React Native MCP सर्वर इन टूल्स को चल रहे React Native ऐप से जोड़ता है, ताकि एजेंट कोड लिखते समय स्क्रीन पढ़ सके, टैप और टाइप कर सके, और लॉग, नेटवर्क रिक्वेस्ट और स्टेट देख सके। react-native-eye यह Metro के ज़रिए करता है, ऐप में किसी SDK के बिना।
यह किन AI एजेंटों के साथ काम करता है?
Claude Code, Cursor, Codex, Claude Desktop और हर वह क्लाइंट जो stdio पर MCP सर्वर चलाता है।
क्या यह Expo के साथ काम करता है?
हाँ। यह Expo SDK 54+ और React Native 0.70+ को सपोर्ट करता है, डेव बिल्ड के रूप में, जिसमें Metro और Hermes चल रहे हों।
क्या ऐप का कोड बदलना होगा?
नहीं। सर्वर उसी डीबगर एंडपॉइंट से जुड़ता है जो Metro पहले से देता है। एक वैकल्पिक लाइन, globalThis.__RNE_STORES__ = …, स्टोर की स्टेट पढ़ना आसान बनाती है।
क्या यह iOS और Android दोनों पर चलता है?
हाँ: macOS पर iOS सिम्युलेटर और adb के ज़रिए Android एम्युलेटर। इसके लिए डेव बिल्ड चाहिए; प्रोडक्शन बिल्ड में जुड़ने के लिए कोई Metro नहीं होता।
क्या यह मुफ़्त है?
हाँ। यह MIT लाइसेंस के तहत है, बिना अकाउंट, बिना इस्तेमाल की सीमा और बिना टेलीमेट्री के।