MCP Expo — AI Code → Expo Go Demo

MCP server nhận code từ AI tool, ghi vào expo-demo-template/App.tsx, và trả URL để mở app trên Expo Go.

Cấu trúc

/Users/sonnguyen/Documents/Momo/
├── expo-demo-template/   ← App Expo cố định (Metro đọc ở đây)
│   ├── App.tsx           ← File bị ghi đè mỗi lần gọi tool
│   ├── app.json
│   └── package.json
│
└── mcp-expo/            ← MCP server
    ├── server.mjs        ← MCP server (ESM, stdio)
    └── package.json

Setup

cd /Users/sonnguyen/Documents/Momo/mcp-expo
npm install

Chạy MCP

node server.mjs

Cấu hình MCP client (Claude Code / Claude Desktop):

{
  "mcpServers": {
    "expo-demo": {
      "command": "node",
      "args": ["/Users/sonnguyen/Documents/Momo/mcp-expo/server.mjs"]
    }
  }
}

Tools

push_screen_and_run

Ghi code AI vào App.tsx, khởi động Metro nếu cần, trả URL.

{
  "code": "import React from 'react';\nimport { View, Text } from 'react-native';\n\nexport default function Demo() {\n  return <View><Text>Hello!</Text></View>;\n}",
  "reset": false
}

| Param | Type | Mô tả | |-------|------|--------| | code | string | Nội dung TSX/JSX từ AI | | reset | boolean | true = kill + restart Metro trước. Mặc định: false |

Response:

{
  "ok": true,
  "message": "Code updated. App is reloading via HMR...",
  "expoUrl": "http://localhost:8081"
}

stop_expo

Kill Metro server đang chạy.

get_expo_status

Kiểm tra trạng thái:

{
  "isRunning": true,
  "expoUrl": "http://localhost:8081",
  "pid": 12345
}

Flow

1. AI gen code → gọi push_screen_and_run
2. MCP ghi code vào App.tsx
3. Metro bundler khởi động (hoặc reload HMR nếu đang chạy)
4. Trả URL → mở Expo Go trên điện thoại, trỏ vào URL đó
5. App hiện màn hình AI vừa gen

Lưu ý

• Metro chạy ở --lan (cùng WiFi). URL: http://<IP>:8081
• Expo Go cần kết nối cùng mạng WiFi với máy tính
• CI=1 được set tự động để tránh interactive prompts
• Nếu máy có firewall, allow port 8081