@momo-kits/mcp-expo 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# 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
+
+```bash
+cd /Users/sonnguyen/Documents/Momo/mcp-expo
+npm install
+```
+
+## Chạy MCP
+
+```bash
+node server.mjs
+```
+
+Cấu hình MCP client (Claude Code / Claude Desktop):
+
+```json
+{
+  "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.
+
+```json
+{
+  "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:
+```json
+{
+  "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:
+```json
+{
+  "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

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@momo-kits/mcp-expo",
+  "version": "1.0.0",
+  "description": "MCP server: push AI-generated code to Expo and get LAN URL for Expo Go demo",
+  "type": "module",
+  "main": "server.mjs",
+  "bin": {
+    "mcp-expo": "./server.mjs"
+  },
+  "scripts": {
+    "start": "node server.mjs"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0"
+  },
+  "keywords": ["mcp", "expo", "react-native", "ai", "demo"],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  }
+}

package/server.mjs

@@ -0,0 +1,308 @@
+/**
+ * MCP Server: expo-demo
+ *
+ * Nhận code từ AI tool, ghi vào App.tsx trong expo-demo-template,
+ * chạy Expo tunnel, trả exp:// URL + QR để demo trên Expo Go.
+ *
+ * Usage:
+ *   node server.mjs
+ */
+
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js';
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+
+// ── Config ───────────────────────────────────────────────────────────────────
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = path.join(__dirname, 'template');
+const APP_FILE = path.join(TEMPLATE_DIR, 'App.tsx');
+const METRO_START_TIMEOUT_MS = 90_000;
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+let metroProcess = null;
+let expoUrl = null;
+let isExpoRunning = false;
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function log(...args) {
+  console.error('[mcp-expo]', ...args);
+}
+
+function writeAppTsx(code) {
+  fs.writeFileSync(APP_FILE, code, 'utf8');
+  log(`Wrote App.tsx (${code.length} chars)`);
+}
+
+function getLocalIP() {
+  const nets = os.networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      if (net.family === 'IPv4' && !net.internal) {
+        return net.address;
+      }
+    }
+  }
+  return null;
+}
+
+function extractExpoUrl(line) {
+  // LAN URL: exp://192.168.x.x:8081  ← ưu tiên cao nhất (--lan flag)
+  const lanMatch = line.match(/(exp(?:o)?:\/\/(?:10\.\d+\.\d+.\d+|172\.(?:1[6-9]|2\d|3[01])\.\d+|\d+\.\d+\.\d+.\d+|192\.168\.\d+.\d+):\d+)/);
+  if (lanMatch) return lanMatch[1];
+  // Any exp:// URL
+  const expMatch = line.match(/(exp(?:o)?:\/\/[^\s]+)/);
+  if (expMatch) return expMatch[1];
+  // Tunnel URL
+  const tunnelMatch = line.match(/(https?:\/\/[a-zA-Z0-9.-]+\.tunnel\.expo\.test)/);
+  if (tunnelMatch) return tunnelMatch[1];
+  // Bỏ qua localhost
+  return null;
+}
+
+async function startExpoMetro() {
+  // Auto-install dependencies if node_modules missing
+  const nodeModulesPath = path.join(TEMPLATE_DIR, 'node_modules');
+  if (!fs.existsSync(nodeModulesPath)) {
+    log('Installing template dependencies...');
+    await new Promise((res, rej) => {
+      const install = spawn('npm', ['install', '--silent'], { cwd: TEMPLATE_DIR, stdio: 'pipe' });
+      install.on('close', (code) => code === 0 ? res() : rej(new Error(`npm install failed (code ${code})`)));
+    });
+    log('Dependencies installed.');
+  }
+
+  return new Promise((resolve, reject) => {
+    let settled = false;
+
+    const timer = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        reject(new Error(
+          `Metro start timeout (${METRO_START_TIMEOUT_MS / 1000}s). ` +
+          `Run 'npx expo start --lan' manually in ${TEMPLATE_DIR}.`
+        ));
+      }
+    }, METRO_START_TIMEOUT_MS);
+
+    log(`Starting Expo Metro in ${TEMPLATE_DIR}...`);
+
+    metroProcess = spawn('npx', ['expo', 'start', '--lan', '--port', '8081'], {
+      cwd: TEMPLATE_DIR,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      env: { ...process.env, FORCE_COLOR: '0' },
+    });
+
+    metroProcess.stdout.setEncoding('utf8');
+    metroProcess.stderr.setEncoding('utf8');
+
+    const onData = (streamName) => (data) => {
+      if (settled) return;
+      const text = data.toString();
+      const lines = text.split('\n');
+      for (const line of lines) {
+        if (line.trim()) {
+          log(`[${streamName}]`, line.trim());
+        }
+        // Expo prompts for interactive input
+        if (line.includes('Use port') && line.includes('?')) {
+          metroProcess.stdin.write('y\n');
+          log('[stdin] sent "y"');
+        }
+        const url = extractExpoUrl(line);
+        if (url && !settled) {
+          expoUrl = url;
+          settled = true;
+          clearTimeout(timer);
+          resolve(url);
+          return;
+        }
+        // Expo chỉ log "Waiting on localhost" khi dùng --lan, không in LAN URL
+        if (!settled && line.includes('Waiting on http://localhost:')) {
+          const localIP = getLocalIP();
+          if (localIP) {
+            expoUrl = `exp://${localIP}:8081`;
+            log(`Detected LAN IP: ${localIP} → ${expoUrl}`);
+            settled = true;
+            clearTimeout(timer);
+            resolve(expoUrl);
+            return;
+          }
+        }
+      }
+    };
+
+    metroProcess.stdout.on('data', onData('stdout'));
+    metroProcess.stderr.on('data', onData('stderr'));
+
+    metroProcess.on('error', (err) => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timer);
+        reject(new Error(`Metro process error: ${err.message}`));
+      }
+    });
+
+    metroProcess.on('exit', (code) => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timer);
+        reject(new Error(`Metro exited unexpectedly (code ${code}).`));
+      }
+    });
+  });
+}
+
+function stopMetro() {
+  if (metroProcess) {
+    metroProcess.kill('SIGTERM');
+    metroProcess = null;
+    isExpoRunning = false;
+    expoUrl = null;
+    log('Metro stopped.');
+  }
+}
+
+// ── Tool Implementations ──────────────────────────────────────────────────────
+
+async function handlePushScreen({ code, reset = false }) {
+  try {
+    writeAppTsx(code);
+
+    if (reset || !metroProcess || metroProcess.exitCode !== null) {
+      stopMetro();
+      await startExpoMetro();
+      isExpoRunning = true;
+    } else {
+      log('Code updated. Metro running — app will reload via HMR.');
+    }
+
+    return {
+      content: [
+        {
+          type: 'text',
+          text: JSON.stringify(
+            {
+              ok: true,
+              message: isExpoRunning
+                ? 'Code updated. App is reloading via HMR — tap "r" in terminal or pull to refresh.'
+                : 'Done. Scan QR with Expo Go.',
+              expoUrl,
+            },
+            null,
+            2
+          ),
+        },
+      ],
+    };
+  } catch (err) {
+    log('Error:', err.message);
+    return {
+      content: [{ type: 'text', text: JSON.stringify({ ok: false, message: err.message }) }],
+      isError: true,
+    };
+  }
+}
+
+async function handleStopExpo() {
+  stopMetro();
+  return {
+    content: [{ type: 'text', text: JSON.stringify({ ok: true, message: 'Metro stopped.' }) }],
+  };
+}
+
+async function handleGetStatus() {
+  const running = isExpoRunning && metroProcess !== null && metroProcess.exitCode === null;
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({ isRunning: running, expoUrl, pid: metroProcess ? metroProcess.pid : null }),
+      },
+    ],
+  };
+}
+
+// ── MCP Server ─────────────────────────────────────────────────────────────────
+
+const server = new Server(
+  { name: 'mcp-expo', version: '1.0.0' },
+  { capabilities: { tools: {} } }
+);
+
+// Tool definitions
+const tools = [
+  {
+    name: 'push_screen_and_run',
+    description:
+      'Nhận code TSX/JSX từ AI, ghi vào App.tsx trong expo-demo-template, ' +
+      'chạy (hoặc reload) Expo Metro tunnel và trả exp:// URL để mở app trên Expo Go. ' +
+      'Nếu Metro đang chạy, app sẽ reload tự động qua HMR.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        code: {
+          type: 'string',
+          description: 'Nội dung TSX/JSX từ AI. Có thể là full file hoặc snippet.',
+        },
+        reset: {
+          type: 'boolean',
+          description: 'true = kill + restart Metro trước khi chạy. Mặc định: false.',
+        },
+      },
+      required: ['code'],
+    },
+  },
+  {
+    name: 'stop_expo',
+    description: 'Dừng Metro server đang chạy.',
+    inputSchema: { type: 'object', properties: {} },
+  },
+  {
+    name: 'get_expo_status',
+    description: 'Kiểm tra trạng thái Metro server và lấy Expo URL hiện tại.',
+    inputSchema: { type: 'object', properties: {} },
+  },
+];
+
+// Register handlers
+server.setRequestHandler(ListToolsRequestSchema, async () => ({
+  tools,
+}));
+
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+  log(`Tool call: ${name}`);
+
+  if (name === 'push_screen_and_run') return await handlePushScreen(args || {});
+  if (name === 'stop_expo') return await handleStopExpo();
+  if (name === 'get_expo_status') return await handleGetStatus();
+
+  return {
+    content: [{ type: 'text', text: `Unknown tool: ${name}` }],
+    isError: true,
+  };
+});
+
+// ── Main ─────────────────────────────────────────────────────────────────────
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  log('MCP server connected. Ready.');
+}
+
+main().catch((err) => {
+  log('Fatal:', err);
+  process.exit(1);
+});

package/template/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/template/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/template/App.tsx

@@ -0,0 +1,147 @@
+import React, {useContext} from 'react';
+import {ApplicationContext, Button, IconSources} from '@momo-kits/foundation';
+import {Alert, View} from 'react-native';
+import DemoScreen from '../../template/DemoScreen';
+import {ItemPickerProps} from '../../template/BottomSheetPicker';
+
+const iconData: ItemPickerProps[] = Object.keys(IconSources).map(item => {
+  return {
+    id: item,
+    value: item,
+    title: item,
+  };
+});
+
+const ButtonUsage: React.FC<any> = props => {
+  const {navigator} = useContext(ApplicationContext);
+  const preview = {
+    title: {
+      title: 'Title',
+      value: [
+        {
+          value: 'Open',
+          props: {
+            onPress: () => {
+              navigator?.push({
+                options: {title: 'Test'},
+                screen: () => (
+                  <View style={{flex: 1, backgroundColor: 'red'}} />
+                ),
+              });
+            },
+          },
+        },
+      ],
+    },
+    type: {
+      title: 'Type',
+      value: [
+        'primary',
+        'tonal',
+        'secondary',
+        'outline',
+        'text',
+        {
+          value: 'danger',
+          props: {
+            onPress: () => {
+              console.log('ABC');
+            },
+          },
+        },
+        {
+          value: 'disabled',
+          props: {
+            onPress: () => {
+              Alert.alert('ABC');
+            },
+          },
+        },
+      ],
+    },
+    size: {
+      title: 'Size',
+      value: ['large', 'medium', 'small'],
+    },
+    loading: {
+      title: 'Loading',
+      value: [true],
+    },
+    iconRight: {
+      title: 'Icon right',
+      value: [
+        'https://img.mservice.com.vn/momo_app_v2/new_version/img/appx_icon/16_arrow_arrow_bold_reply_all.png',
+      ],
+    },
+    iconLeft: {
+      title: 'Icon left',
+      value: [
+        {
+          value:
+            'https://img.mservice.io/momo_app_v2/new_version/img/appx_image/ic_common_logo_momo.png',
+          props: {
+            useTintColor: false,
+          },
+        },
+      ],
+    },
+  };
+  const params = {
+    component: Button,
+    props: {
+      title: {
+        value: 'Button',
+        type: 'string',
+      },
+      type: {
+        value: 'primary',
+        type: 'enum',
+        data: [
+          'primary',
+          'secondary',
+          'tonal',
+          'danger',
+          'outline',
+          'text',
+          'disabled',
+        ],
+      },
+      size: {
+        value: 'small',
+        type: 'enum',
+        data: ['small', 'medium', 'large'],
+      },
+      full: {
+        value: true,
+        type: 'bool',
+      },
+      iconRight: {
+        type: 'options',
+        data: iconData,
+      },
+      iconLeft: {
+        type: 'options',
+        data: iconData,
+      },
+      loading: {
+        value: true,
+        type: 'bool',
+      },
+      useTintColor: {
+        value: true,
+        type: 'bool',
+      },
+    },
+  };
+
+  return (
+    <DemoScreen
+      component={Button}
+      preview={preview}
+      playground={params}
+      {...props}
+    />
+  );
+};
+
+export default ButtonUsage;

package/template/app.json

@@ -0,0 +1,10 @@
+{
+  "expo": {
+    "name": "Expo Demo Template",
+    "slug": "expo-demo-template",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
+    "assetBundlePatterns": ["**/*"]
+  }
+}