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

package/package.json

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

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,161 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  StatusBar,
-} from 'react-native';
-
-export default function App() {
+
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet, ActivityIndicator, Alert } from 'react-native';
+
+const Colors = {
+  primary: '#D82D8B',
+  danger: '#E53935',
+  white: '#FFFFFF',
+  black: '#1A1A1A',
+  textSecondary: '#6D6D6D',
+  textDisable: '#BDBDBD',
+  bgSurface: '#FFFFFF',
+  bgTonal: '#FCE4F0',
+  bgDisable: '#F0F0F0',
+  borderDefault: '#E0E0E0',
+  sectionBg: '#F5F5F5',
+};
+
+const SizeConfig: Record<string, any> = {
+  large:  { height: 48, px: 16, minWidth: 128, radius: 8, fontSize: 16 },
+  medium: { height: 36, px: 12, minWidth: 80,  radius: 8, fontSize: 14 },
+  small:  { height: 28, px: 8,  minWidth: 60,  radius: 8, fontSize: 12 },
+};
+
+function getTypeStyle(type: string) {
+  switch (type) {
+    case 'primary': return { bg: Colors.primary, text: Colors.white, border: '' };
+    case 'tonal': return { bg: Colors.bgTonal, text: Colors.primary, border: '' };
+    case 'secondary': return { bg: Colors.bgSurface, text: Colors.black, border: Colors.borderDefault };
+    case 'outline': return { bg: Colors.bgSurface, text: Colors.primary, border: Colors.primary };
+    case 'text': return { bg: 'transparent', text: Colors.primary, border: '' };
+    case 'danger': return { bg: Colors.danger, text: Colors.white, border: '' };
+    case 'disabled': return { bg: Colors.bgDisable, text: Colors.textDisable, border: '' };
+    default: return { bg: Colors.primary, text: Colors.white, border: '' };
+  }
+}
+
+function KitButton(props: { title: string; type?: string; size?: string; full?: boolean; loading?: boolean; onPress?: () => void }) {
+  const { title = 'Button', type = 'primary', size = 'large', full = true, loading = false, onPress } = props;
+  const s = SizeConfig[size] || SizeConfig.large;
+  const t = getTypeStyle(type);
+  const isDisabled = type === 'disabled' || loading;
+
+  const containerStyle: any = {
+    height: s.height,
+    paddingHorizontal: s.px,
+    minWidth: s.minWidth,
+    borderRadius: s.radius,
+    backgroundColor: t.bg,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    opacity: loading ? 0.75 : 1,
+    alignSelf: full ? 'stretch' : 'flex-start',
+  };
+
+  if (t.border) {
+    containerStyle.borderWidth = 1;
+    containerStyle.borderColor = t.border;
+  }
+
   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>
-
-        <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>
+    <TouchableOpacity activeOpacity={0.7} disabled={isDisabled} onPress={onPress} style={containerStyle}>
+      {loading && <ActivityIndicator size="small" color={t.text} style={{ marginRight: 8 }} />}
+      <Text style={{ color: t.text, fontSize: s.fontSize, fontWeight: '700' }}>{title}</Text>
+    </TouchableOpacity>
+  );
+}
 
-        <View style={styles.buttonGroup}>
-          <TouchableOpacity style={styles.button} activeOpacity={0.7}>
-            <Text style={styles.buttonText}>Primary</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[styles.button, styles.buttonOutline]}
-            activeOpacity={0.7}
-          >
-            <Text style={[styles.buttonText, styles.buttonTextOutline]}>
-              Secondary
-            </Text>
-          </TouchableOpacity>
-        </View>
+function App() {
+  const [loadingId, setLoadingId] = useState('');
+
+  const simulateLoading = (id: string) => {
+    setLoadingId(id);
+    setTimeout(() => setLoadingId(''), 2000);
+  };
+
+  const types = ['primary', 'tonal', 'secondary', 'outline', 'text', 'danger', 'disabled'];
+  const sizes = ['large', 'medium', 'small'];
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: '#FFF' }} contentContainerStyle={{ padding: 20, paddingTop: 60 }}>
+      <Text style={{ fontSize: 28, fontWeight: '800', color: Colors.black, marginBottom: 4 }}>Button</Text>
+      <Text style={{ fontSize: 14, color: Colors.textSecondary, marginBottom: 24 }}>@momo-kits/foundation</Text>
 
-        <View style={styles.statusRow}>
-          <View style={styles.dot} />
-          <Text style={styles.statusText}>Metro ready · HMR enabled</Text>
+      <Text style={styles.sectionTitle}>TYPES</Text>
+      <View style={styles.section}>
+        {types.map((type) => (
+          <View key={type} style={{ marginBottom: 10 }}>
+            <KitButton title={type.charAt(0).toUpperCase() + type.slice(1)} type={type} onPress={() => Alert.alert('Pressed', type)} />
+          </View>
+        ))}
+      </View>
+
+      <Text style={styles.sectionTitle}>SIZES</Text>
+      <View style={styles.section}>
+        {sizes.map((size) => (
+          <View key={size} style={{ marginBottom: 10 }}>
+            <KitButton title={size + ' (' + SizeConfig[size].height + 'px)'} size={size} onPress={() => Alert.alert('Size', size)} />
+          </View>
+        ))}
+      </View>
+
+      <Text style={styles.sectionTitle}>WIDTH</Text>
+      <View style={styles.section}>
+        <View style={{ marginBottom: 10 }}>
+          <KitButton title="Full Width (default)" full={true} onPress={() => {}} />
         </View>
-      </ScrollView>
-    </View>
+        <KitButton title="Auto Width" full={false} onPress={() => {}} />
+      </View>
+
+      <Text style={styles.sectionTitle}>LOADING STATE</Text>
+      <View style={styles.section}>
+        {['primary', 'secondary', 'danger'].map((type) => (
+          <View key={type} style={{ marginBottom: 10 }}>
+            <KitButton
+              title={loadingId === type ? 'Loading...' : 'Tap to load (' + type + ')'}
+              type={type}
+              loading={loadingId === type}
+              onPress={() => simulateLoading(type)}
+            />
+          </View>
+        ))}
+      </View>
+
+      <Text style={styles.sectionTitle}>SIZE x TYPE</Text>
+      <View style={styles.section}>
+        {sizes.map((size) => (
+          <View key={size}>
+            <Text style={{ fontSize: 12, fontWeight: '600', color: Colors.textSecondary, marginBottom: 6 }}>{size}</Text>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
+              {['primary', 'tonal', 'outline', 'danger'].map((type) => (
+                <KitButton key={size + type} title={type.slice(0, 3).toUpperCase()} type={type} size={size} full={false} onPress={() => {}} />
+              ))}
+            </View>
+          </View>
+        ))}
+      </View>
+
+      <View style={{ height: 48 }} />
+    </ScrollView>
   );
 }
 
+export default App;
+
 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,
-  },
-  bold: {
-    fontWeight: '600',
-    color: '#111111',
-  },
-  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,
+  sectionTitle: {
+    fontSize: 13,
     fontWeight: '600',
-    color: '#111111',
-    marginBottom: 8,
-  },
-  cardText: {
-    fontSize: 14,
-    color: '#666666',
-    lineHeight: 20,
-  },
-  buttonGroup: {
-    flexDirection: 'row',
-    gap: 12,
-    marginBottom: 32,
+    color: '#6D6D6D',
+    letterSpacing: 0.5,
+    marginTop: 24,
+    marginBottom: 12,
   },
-  button: {
-    flex: 1,
-    backgroundColor: '#111111',
+  section: {
+    backgroundColor: '#F5F5F5',
     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,
   },
 });