Which integrations are available for this server?

Supports Android development within the Expo ecosystem, including platform-specific configurations and EAS builds. Supports Apple platform development including iOS configurations and Apple Sign-in authentication integration. Enables code quality analysis and adherence to best practices using ESLint within Expo projects. Provides comprehensive tools for Expo development, including project initialization, EAS Build/Submit/Update integration, and SDK feature management. Supports the implementation of Google Sign-in authentication within Expo applications. Supports iOS development within the Expo ecosystem, including platform-specific configurations and EAS builds. Provides optimization and management tools for the Metro bundler used in React Native development. Ensures consistent code formatting across Expo projects through Prettier integration. Supports the development and deployment of Progressive Web Apps (PWA) using Expo. Facilitates development using React Native and React Navigation, including navigation configuration and component development. Integrates and manages local data persistence using Expo SQLite. Supports component-driven development through Storybook integration within Expo projects. Automates the setup and management of TypeScript-based Expo projects. Supports project dependency management via the Yarn package manager during project initialization.

How do I use Expo MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Expo MCP Server Start an EAS production build for iOS and Android" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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種類の専門ツール

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

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

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

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

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

手動インストール手順

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

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

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開発ベストプラクティス

パフォーマンス最適化

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

セキュリティ強化

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

開発効率向上

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

🤝 貢献

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

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

📄 ライセンス

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

🆘 サポート

問題が発生した場合：

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

🔗 関連リンク

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