Serveur MCP React Native · iOS et Android
react-native-eye connecte Claude Code, Cursor ou tout autre client MCP à une app React Native en cours d'exécution. L'agent lit l'écran, touche et saisit du texte, puis vérifie les logs, le réseau et l'état. Tout passe par Metro : l'app n'a besoin ni de SDK ni de modification du code.
L'ajouter à Claude Code
claude mcp add react-native-eye -- npx -y react-native-eye@latest
L'écran
Ce que lit l'agent
Exemple de sortie pour un écran de connexion. Pointez une ligne pour retrouver l'élément.
Avec la plupart des outils, chaque toucher coûte à l'agent un aller-retour avec le modèle. Ici, l'agent envoie les étapes ensemble et le serveur les enchaîne. Un redbox ou une exception non interceptée arrête le parcours aussitôt, et l'agent reçoit le résultat de chaque étape.
observeCapture d'écran, éléments interactifs, erreurs et logs récents.run_flowTouchers, saisie, attentes et assertions, exécutés côté serveur.check_stateRoute actuelle, état du store et erreurs non gérées.{ "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"}) — ok35 outils en cinq groupes. Chaque réponse indique le chemin utilisé : rien ne change en silence.
Les positions des éléments viennent du runtime JS de l'app en 80 ms environ. L'OCR lit ce que l'arbre ne contient pas : images, WebViews et dialogues natifs.
observescreenshotget_layoutread_screen_textget_component_treeUn appui JS appelle le onPress de l'élément lui-même en une milliseconde environ. Un vrai toucher passe par le driver installé sur l'appareil, pour les gestes, les dialogues système et les vues natives.
run_flowtaptype_textswipescroll_topress_keynavigateopen_urlLogs, requêtes réseau avec leur contenu, état du store et évaluation de JS. Les plantages avalés par LogBox sont signalés eux aussi.
check_stateget_logsget_errorsget_networkget_stateeval_jsget_jobQuels composants ont été rendus et pourquoi, un profil CPU Hermes, le CPU par thread et le temps par image. Aucune configuration dans l'app.
profile_rendersprofile_jssample_cpuget_fpsInstaller, lancer et recharger l'app, accorder des permissions et enregistrer une vidéo.
connectlist_targetslist_deviceslaunch_appreload_appinstall_appopen_simulatorset_permissionrecord_videostop_recordingpingOutils composites : un appel au lieu de plusieurs.
Le serveur atteint l'app par deux chemins et choisit le moins coûteux pour chaque appel.
≈ 1 ms par appui · ≈ 80 ms pour le layout d'un écran entier
Le serveur parcourt l'arbre de fibers de React via le Chrome DevTools Protocol. Il mesure les éléments et appelle directement les gestionnaires d'appui et de texte, sans aucun toucher.
Précompilé dans le paquet npm · s'installe tout seul au premier usage
Un runner XCUITest sur iOS et un serveur d'instrumentation sur Android envoient de vrais touchers et saisissent n'importe quel texte Unicode. Si le driver ne démarre pas, la saisie se rabat sur axe ou adb, et la réponse le signale.
Mesuré : le driver de l'appareil face aux outils qu'il remplace
Issu des tests de terrain du projet sur un fil vidéo chargé, avec un simulateur iOS 26 et un émulateur Android 16. Les deux graphiques partagent la même échelle.
# dans le dossier de votre projet
claude mcp add react-native-eye -- npx -y react-native-eye@latest// .cursor/mcp.json
{
"mcpServers": {
"react-native-eye": {
"command": "npx",
"args": ["-y", "react-native-eye@latest"]
}
}
}# ~/.codex/config.toml
[mcp_servers.react-native-eye]
command = "npx"
args = ["-y", "react-native-eye@latest"]// la configuration MCP standard, Claude Desktop compris
{
"mcpServers": {
"react-native-eye": {
"command": "npx",
"args": ["-y", "react-native-eye@latest"]
}
}
}Lancez l'app dans un simulateur iOS ou un émulateur Android comme d'habitude. Metro est détecté automatiquement sur les ports 8081–8083 et 19000–19002. Pour un autre port, ajoutez --port 8090 aux arguments.
Connecte-toi à mon app et dis-moi ce qu'il y a à l'écran.
L'agent appelle connect, puis observe. Le premier appel sur chaque appareil installe le driver une seule fois.
Le seul trafic réseau va vers localhost : Metro et les drivers de l'appareil. Un test fait échouer le build si une URL externe apparaît dans le code du serveur.
Bon à savoir
globalThis.__RNE_STORES__ = …, facilite la lecture de l'état des stores.