Expo MCP Server 🚀

Expo開発を劇的に効率化するためのModel Context Protocol (MCP) サーバーです。Cursor、Claude、その他のAIアシスタントでExpo/React Nativeアプリの開発を簡単に行えます。

✨ 主要機能

🎯 Expo開発の包括的サポート

• プロジェクト初期化: テンプレート選択から設定まで瞬時にセットアップ
• EAS統合: Build、Submit、Update操作をワンコマンドで実行
• クロスプラットフォーム: iOS、Android、Web対応の統一開発体験
• 開発サーバー管理: ホットリロード、トンネリング、デバッグモード制御

🔧 10種類の専門ツール

1. Project Initializer: Expoプロジェクトの瞬時セットアップ
2. Config Generator: app.json/app.config.js最適化設定生成
3. Development Manager: 開発サーバーとデバッグ環境管理
4. Build Manager: EASビルドとローカルビルド統合管理
5. EAS Manager: Expo Application Services完全統合
6. Deployment Helper: OTA更新、Webデプロイ、ストア申請
7. Authentication Setup: 認証プロバイダー統合とセキュア実装
8. Storage Manager: AsyncStorage、SecureStore、SQLite統合
9. Navigation Helper: Expo Router/React Navigation完全サポート
10. Best Practices: コード品質分析とパフォーマンス最適化

🚀 Cursorでのクイックインストール

ワンクリックインストール

次のリンクをクリックするだけでCursorにMCPサーバーをインストールできます：

📱 Cursor に Expo MCP Server をインストール

手動インストール手順

1. Cursorで Cmd+Shift+P を押下
2. "Preferences: Open User Settings (JSON)" を選択
3. mcpServers セクションに以下を追加：

{
  "mcpServers": {
    "expo": {
      "command": "node",
      "args": [
        "{{path}}/expo-mcp-server/dist/index.js"
      ],
      "env": {
        "NODE_ENV": "production"
      },
      "disabled": false,
      "autoApprove": []
    },
  }
}

4. Cursorを再起動

🛠️ 基本的な使い方

インストール後、Cursorで以下のコマンドを使用してExpoプロジェクトの開発を開始できます：

新規プロジェクト作成

@expo 新しいTypeScriptプロジェクトをExpo Routerで作成して

EASビルド設定

@expo EASでiOSとAndroidの本番ビルド設定を生成して

認証システム構築

@expo GoogleとAppleサインインの認証システムを実装して

ナビゲーション設定

@expo タブナビゲーションとモーダル画面の構成を作成して

OTA更新デプロイ

@expo 本番環境にOTA更新をデプロイして

📋 利用可能なツール詳細

1. プロジェクト初期化 (expo_project_init)

// 使用例
{
  template: 'blank-typescript',
  projectName: 'MyAwesomeApp',
  packageManager: 'yarn',
  features: ['expo-router', 'expo-notifications', 'expo-auth-session'],
  platforms: ['ios', 'android', 'web']
}

2. 設定生成 (expo_config_generate)

// 使用例
{
  platform: ['ios', 'android', 'web'],
  environment: 'production',
  features: ['push-notifications', 'deep-linking', 'splash-screen'],
  buildProfile: 'production'
}

3. 開発サーバー管理 (expo_dev_server)

// 使用例
{
  platform: 'all',
  port: 8081,
  tunnel: true,
  devClient: true,
  host: 'lan'
}

4. ビルド管理 (expo_build)

// 使用例
{
  platform: 'all',
  profile: 'production',
  local: false,
  autoSubmit: true
}

5. EAS操作 (expo_eas)

// 使用例
{
  operation: 'build',
  platform: 'all',
  profile: 'production',
  message: 'v1.0.0 リリース',
  autoPublish: true
}

🎨 Expo最新機能の活用例

Expo Router (App Directory)

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
    </Stack>
  );
}

EAS Update

# 開発環境へのOTA更新
eas update --branch development --message "新機能追加"

# 本番環境への自動更新
eas update --branch production --auto

Expo Dev Client

// Development builds with custom native code
{
  "plugins": [
    "expo-dev-client",
    [
      "expo-notifications",
      {
        "icon": "./assets/notification-icon.png"
      }
    ]
  ]
}

🔧 開発者向け情報

ローカル開発

git clone <repository-url>
cd expo-mcp-server
npm install
npm run build
npm run dev

テスト実行

npm test
npm run test:coverage

MCP Debug Mode

NODE_ENV=development npm start

📦 対応するExpo機能

コア機能

• ✅ Expo SDK 50+ 完全対応
• ✅ Expo Router (App Directory)
• ✅ EAS Build & Submit
• ✅ EAS Update (OTA)
• ✅ Expo Dev Client
• ✅ Metro bundler最適化

プラットフォーム

• ✅ iOS (React Native)
• ✅ Android (React Native)
• ✅ Web (React DOM)
• ✅ PWA対応

ライブラリ統合

• ✅ React Navigation
• ✅ Expo Router
• ✅ Expo Authentication
• ✅ Expo Secure Store
• ✅ Expo SQLite
• ✅ Expo Notifications
• ✅ Expo Location
• ✅ Expo Camera
• ✅ Expo AV

🌟 Expo開発ベストプラクティス

パフォーマンス最適化

1. バンドルサイズ削減: 不要なモジュールの除去
2. 画像最適化: WebP形式とレスポンシブ画像
3. レンダリング最適化: FlatList、memo、useMemo活用
4. OTA更新戦略: 段階的ロールアウト

セキュリティ強化

1. SecureStore使用: 機密データの暗号化保存
2. 証明書ピニング: ネットワーク通信のセキュリティ
3. コード難読化: リリースビルドの保護
4. 権限管理: 最小権限の原則

開発効率向上

1. TypeScript活用: 型安全性とIDE支援
2. ESLint/Prettier: コード品質とフォーマット統一
3. Storybook: コンポーネント開発
4. E2Eテスト: Detox/Maestroでの自動テスト

🤝 貢献

プルリクエストを歓迎します！以下の手順で貢献してください：

1. このリポジトリをフォーク
2. フィーチャーブランチを作成 (git checkout -b feature/amazing-feature)
3. コミット (git commit -m 'Add amazing feature')
4. プッシュ (git push origin feature/amazing-feature)
5. プルリクエストを作成

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細は LICENSE ファイルを参照してください。

🆘 サポート

問題が発生した場合：

1. Issues で既存の問題を確認
2. 新しいissueを作成
3. 詳細な再現手順を含めて報告

🔗 関連リンク

• Expo Documentation
• EAS Documentation
• Expo Router Documentation
• Model Context Protocol
• Cursor Documentation
• React Native Documentation

---

Expo MCP Server で次世代のモバイル/Web開発体験を始めましょう！ 🚀✨