@momo-kits/mcp-expo 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/mcp-expo",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "description": "MCP server: push AI-generated code to Expo and get LAN URL for Expo Go demo",
   "type": "module",
   "main": "server.mjs",

package/remote-server.mjs

@@ -97,8 +97,23 @@ async function ensureDeps() {
   }
 }
 
+async function killPort(port) {
+  try {
+    const { execSync } = await import('child_process');
+    const pids = execSync(`lsof -ti:${port} 2>/dev/null`, { encoding: 'utf8' }).trim();
+    if (pids) {
+      for (const pid of pids.split('\n')) {
+        try { process.kill(parseInt(pid), 'SIGTERM'); } catch {}
+      }
+      log(`Killed existing processes on port ${port}: ${pids.replace(/\n/g, ', ')}`);
+      await new Promise(r => setTimeout(r, 1000));
+    }
+  } catch {}
+}
+
 async function startExpoMetro() {
   await ensureDeps();
+  await killPort(8081);
 
   return new Promise((resolve, reject) => {
     let settled = false;
@@ -112,7 +127,7 @@ async function startExpoMetro() {
 
     log(`Starting Expo Metro in ${TEMPLATE_DIR}...`);
 
-    metroProcess = spawn('npx', ['expo', 'start', '--lan', '--port', '8081'], {
+    metroProcess = spawn('npx', ['expo', 'start', '--tunnel', '--port', '8081'], {
       cwd: TEMPLATE_DIR,
       stdio: ['pipe', 'pipe', 'pipe'],
       env: { ...process.env, FORCE_COLOR: '0' },

package/server.mjs

@@ -125,9 +125,66 @@ async function handleGetStatus() {
 
 // ── MCP Server ─────────────────────────────────────────────────────────────────
 
+const SERVER_INSTRUCTIONS = `
+You are connected to the mcp-expo server — a tool for live-previewing React Native UI on a real device via Expo Go.
+
+## How to use push_screen_and_run
+
+The "code" field must be a **complete, self-contained App.tsx file**. Follow these rules:
+
+1. **Default export required**: The file must \`export default\` a React component.
+2. **Only use built-in React Native + Expo packages**:
+   - react, react-native (View, Text, ScrollView, TouchableOpacity, StyleSheet, Image, TextInput, FlatList, etc.)
+   - expo-status-bar, expo-linear-gradient, expo-constants
+   - Do NOT import packages that aren't pre-installed (no react-navigation, no external UI libs).
+3. **Inline all styles**: Use StyleSheet.create() at the bottom of the file. No external style files.
+4. **Inline all assets**: Use emoji, Unicode, or remote image URLs. No local asset imports.
+5. **No multi-file**: Everything must be in one single file. Define all sub-components in the same file.
+6. **TypeScript OK**: The file is App.tsx, TypeScript is supported.
+
+## Example skeleton
+
+\`\`\`tsx
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, StatusBar } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="dark-content" />
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Hello World</Text>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+  content: { padding: 24, paddingTop: 60 },
+  title: { fontSize: 24, fontWeight: '700' },
+});
+\`\`\`
+
+## Workflow
+1. Generate the full App.tsx code following the rules above.
+2. Call push_screen_and_run with the code.
+3. The app will reload on the user's device via HMR. Share the expo URL if it's the first run.
+4. If the user wants changes, update the code and call push_screen_and_run again (no need for reset=true unless there's a crash).
+
+## Common mistakes to avoid
+- Do NOT use \`import\` for local files or uninstalled packages — this will crash Metro.
+- Do NOT forget \`export default\`.
+- Do NOT use \`require()\` for images — use URL strings instead.
+- Do NOT send partial code or snippets — always send the complete file.
+`.trim();
+
 const server = new Server(
   { name: 'mcp-expo', version: '2.0.0' },
-  { capabilities: { tools: {} } }
+  {
+    capabilities: { tools: {} },
+    instructions: SERVER_INSTRUCTIONS,
+  }
 );
 
 const tools = [

package/template/App.tsx

@@ -1,154 +1,175 @@
-import React from 'react';
+
+import React, { useState } from 'react';
 import {
   View,
   Text,
   StyleSheet,
-  TouchableOpacity,
   ScrollView,
   StatusBar,
+  TouchableOpacity,
+  Platform,
 } from 'react-native';
 
+const Typography: Record<string, { fontSize: number; fontWeight: string; lineHeight: number; textDecorationLine?: string }> = {
+  headline_default_bold: { fontSize: 28, fontWeight: '700', lineHeight: 36 },
+  header_m_bold: { fontSize: 22, fontWeight: '700', lineHeight: 28 },
+  header_default_bold: { fontSize: 20, fontWeight: '700', lineHeight: 26 },
+  header_s_semibold: { fontSize: 18, fontWeight: '600', lineHeight: 24 },
+  header_xs_semibold: { fontSize: 16, fontWeight: '600', lineHeight: 22 },
+  body_default_regular: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
+  body_default_regularstrikethrought: { fontSize: 16, fontWeight: '400', lineHeight: 24, textDecorationLine: 'line-through' },
+  description_default_regular: { fontSize: 14, fontWeight: '400', lineHeight: 20 },
+  description_default_regularstrikethrought: { fontSize: 14, fontWeight: '400', lineHeight: 20, textDecorationLine: 'line-through' },
+  description_xs_regular: { fontSize: 12, fontWeight: '400', lineHeight: 18 },
+  description_xs_regularstrikethrought: { fontSize: 12, fontWeight: '400', lineHeight: 18, textDecorationLine: 'line-through' },
+  label_default_medium: { fontSize: 16, fontWeight: '500', lineHeight: 22 },
+  label_s_medium: { fontSize: 14, fontWeight: '500', lineHeight: 20 },
+  label_xs_medium: { fontSize: 12, fontWeight: '500', lineHeight: 18 },
+  action_default_bold: { fontSize: 16, fontWeight: '700', lineHeight: 22 },
+  action_s_bold: { fontSize: 14, fontWeight: '700', lineHeight: 20 },
+  action_xs_bold: { fontSize: 12, fontWeight: '700', lineHeight: 18 },
+  action_xxs_bold: { fontSize: 10, fontWeight: '700', lineHeight: 16 },
+};
+
+const TextColors = [
+  { name: 'default', color: '#1A1A1A' },
+  { name: 'secondary', color: '#7A7A7A' },
+  { name: 'disable', color: '#B8B8B8' },
+  { name: 'primary', color: '#D82D8B' },
+  { name: 'success', color: '#00C853' },
+  { name: 'warning', color: '#FF9100' },
+  { name: 'error', color: '#FF1744' },
+];
+
+type Tab = 'typography' | 'color';
+
 export default function App() {
+  const [activeTab, setActiveTab] = useState<Tab>('typography');
+
   return (
     <View style={styles.container}>
-      <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
-      <ScrollView
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <Text style={styles.logo}>🍎</Text>
-        <Text style={styles.title}>MCP Expo</Text>
-        <Text style={styles.subtitle}>
-          AI-generated code will replace this file via the{' '}
-          <Text style={styles.bold}>push_screen_and_run</Text> MCP tool.
-        </Text>
+      <StatusBar barStyle="dark-content" />
+      <View style={styles.header}>
+        <Text style={styles.title}>Text</Text>
+        <Text style={styles.subtitle}>@momo-kits/foundation</Text>
+      </View>
 
-        <View style={styles.card}>
-          <Text style={styles.cardTitle}>Quick Test</Text>
-          <Text style={styles.cardText}>
-            This is a working Expo template. When the MCP server writes new code,
-            it overwrites this App.tsx and the app reloads via HMR.
-          </Text>
-        </View>
-
-        <View style={styles.buttonGroup}>
-          <TouchableOpacity style={styles.button} activeOpacity={0.7}>
-            <Text style={styles.buttonText}>Primary</Text>
-          </TouchableOpacity>
+      <View style={styles.tabRow}>
+        {(['typography', 'color'] as Tab[]).map(tab => (
           <TouchableOpacity
-            style={[styles.button, styles.buttonOutline]}
-            activeOpacity={0.7}
+            key={tab}
+            style={[styles.tab, activeTab === tab && styles.tabActive]}
+            onPress={() => setActiveTab(tab)}
           >
-            <Text style={[styles.buttonText, styles.buttonTextOutline]}>
-              Secondary
+            <Text style={[styles.tabText, activeTab === tab && styles.tabTextActive]}>
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
             </Text>
           </TouchableOpacity>
-        </View>
+        ))}
+      </View>
 
-        <View style={styles.statusRow}>
-          <View style={styles.dot} />
-          <Text style={styles.statusText}>Metro ready · HMR enabled</Text>
-        </View>
+      <ScrollView contentContainerStyle={styles.content}>
+        {activeTab === 'typography' && (
+          <View>
+            <Text style={styles.sectionTitle}>Typography Scale</Text>
+            {Object.entries(Typography).map(([name, style]) => (
+              <View key={name} style={styles.typoCard}>
+                <Text
+                  style={{
+                    fontSize: style.fontSize,
+                    fontWeight: style.fontWeight as any,
+                    lineHeight: style.lineHeight,
+                    textDecorationLine: (style.textDecorationLine as any) || 'none',
+                    color: '#1A1A1A',
+                  }}
+                >
+                  {name}
+                </Text>
+                <Text style={styles.meta}>
+                  {style.fontSize}px / {style.fontWeight} / LH {style.lineHeight}
+                  {style.textDecorationLine ? ' / strikethrough' : ''}
+                </Text>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {activeTab === 'color' && (
+          <View>
+            <Text style={styles.sectionTitle}>Text Colors</Text>
+            {TextColors.map(item => (
+              <View key={item.name} style={styles.colorCard}>
+                <View style={styles.colorRow}>
+                  <View style={[styles.colorDot, { backgroundColor: item.color }]} />
+                  <View style={styles.colorInfo}>
+                    <Text style={[styles.colorSample, { color: item.color }]}>
+                      The quick brown fox jumps over the lazy dog
+                    </Text>
+                    <Text style={styles.colorMeta}>
+                      {item.name} — {item.color}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            ))}
+          </View>
+        )}
       </ScrollView>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
-    paddingTop: 48,
-    paddingBottom: 40,
-    alignItems: 'center',
-  },
-  logo: {
-    fontSize: 64,
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: '#111111',
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 15,
-    color: '#666666',
-    textAlign: 'center',
-    lineHeight: 22,
-    marginBottom: 32,
-    paddingHorizontal: 8,
+  container: { flex: 1, backgroundColor: '#F8F8F8' },
+  header: {
+    paddingTop: Platform.OS === 'ios' ? 60 : 48,
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    backgroundColor: '#fff',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#E0E0E0',
+  },
+  title: { fontSize: 28, fontWeight: '700', color: '#1A1A1A' },
+  subtitle: { fontSize: 13, color: '#999', marginTop: 2 },
+  tabRow: {
+    flexDirection: 'row',
+    backgroundColor: '#fff',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    gap: 8,
   },
-  bold: {
+  tab: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    backgroundColor: '#F0F0F0',
+  },
+  tabActive: { backgroundColor: '#D82D8B' },
+  tabText: { fontSize: 14, fontWeight: '500', color: '#666' },
+  tabTextActive: { color: '#fff' },
+  content: { padding: 16, paddingBottom: 40 },
+  sectionTitle: {
+    fontSize: 18,
     fontWeight: '600',
-    color: '#111111',
+    color: '#1A1A1A',
+    marginBottom: 12,
   },
-  card: {
-    width: '100%',
-    backgroundColor: '#ffffff',
-    borderRadius: 16,
-    padding: 20,
-    marginBottom: 24,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    elevation: 2,
-  },
-  cardTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111111',
+  typoCard: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
     marginBottom: 8,
   },
-  cardText: {
-    fontSize: 14,
-    color: '#666666',
-    lineHeight: 20,
-  },
-  buttonGroup: {
-    flexDirection: 'row',
-    gap: 12,
-    marginBottom: 32,
-  },
-  button: {
-    flex: 1,
-    backgroundColor: '#111111',
+  meta: { fontSize: 11, color: '#999', marginTop: 6 },
+  colorCard: {
+    backgroundColor: '#fff',
     borderRadius: 12,
-    paddingVertical: 14,
-    alignItems: 'center',
-  },
-  buttonOutline: {
-    backgroundColor: 'transparent',
-    borderWidth: 1.5,
-    borderColor: '#111111',
-  },
-  buttonText: {
-    fontSize: 15,
-    fontWeight: '600',
-    color: '#ffffff',
-  },
-  buttonTextOutline: {
-    color: '#111111',
-  },
-  statusRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  dot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#22c55e',
-  },
-  statusText: {
-    fontSize: 13,
-    color: '#888888',
+    padding: 16,
+    marginBottom: 8,
   },
+  colorRow: { flexDirection: 'row', alignItems: 'center' },
+  colorDot: { width: 32, height: 32, borderRadius: 16, marginRight: 12 },
+  colorInfo: { flex: 1 },
+  colorSample: { fontSize: 15, fontWeight: '500', lineHeight: 22 },
+  colorMeta: { fontSize: 11, color: '#999', marginTop: 4 },
 });