expo-mcp-server

tomoyasu-sasaki/expo-mcp-server

3.2

If you are the rightful owner of expo-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The Expo MCP Server is a Model Context Protocol server implementation that indexes and retrieves content from Expo documentation, API references, and community resources, making it accessible via the MCP protocol for developer tools like Cursor.

Tools

  1. expo_read_document

    Retrieve Expo documentation and API references.

  2. expo_search_documents

    Search content across the entire Expo ecosystem.

  3. expo_recommend

    Provide context-aware recommendations.

  4. expo_get_sdk_module

    Get detailed information about SDK modules.

  5. expo_config_templates

    Generate and validate configuration files.

  6. expo_eas_command_builder

    Generate EAS CLI commands.

  7. expo_code_examples

    Executable code examples with Snack integration.

  8. expo_error_diagnosis

    Analyze errors and provide solutions.

Expo MCP Server 🚀

npm version License: MIT

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サーバーをインストールできます：

手動インストール手順

  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": []
    },
  }
}
  1. 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ライセンスの下で公開されています。詳細は ファイルを参照してください。

🆘 サポート

問題が発生した場合：

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

🔗 関連リンク

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