Firebase Studio の Firebase MCP

1. 概要

プレビュー版: Firebase Studio と Firebase MCP はプレビュー版です。そのため、SLA または非推奨ポリシーの対象ではなく、下位互換性のない方法で変更される可能性があります。

この Codelab では、Firebase Studio でアプリ プロトタイピング エージェントと Firebase MCP サーバーを使用して、Firestore を使用するフルスタックのウェブアプリを作成します。

学習内容

• アプリ プロトタイピング エージェントを使用して静的ウェブアプリを生成する
• Firebase MCP サーバーを設定する
• Firebase MCP を使用して Firestore を追加する

必要なもの

• 任意のブラウザ（Google Chrome など）
• Firebase プロジェクトの作成と管理に使用する Google アカウント

2. App Prototyping エージェントを使用してアプリを生成する

アプリ プロトタイピング エージェントは、Gemini in Firebase を使用してアプリを構築します。同じプロンプトを使用した場合でも、結果が異なることがあります。行き詰まった場合は、この Codelab のいくつかのチェックポイントでラボを再開するために、ワークスペースに追加できる一連のファイルが用意されています。

1. Google アカウントにログインし、Google デベロッパー プログラムに参加して、Firebase Studio を開きます。
2. [AI を使用してアプリのプロトタイプを作成する] フィールドに、アプリの説明を入力します。

   An app for a picker wheel that allows custom input.
   

3. [プロンプトを改善] をクリックします。改善されたプロンプトを確認します。
4. [AI でプロトタイプを作成する] をクリックします。
5. 提案されたアプリ ブループリントを確認します。[カスタマイズ] をクリックして編集します。
6. [保存] をクリックします。
7. ブループリントで更新の組み込みが完了したら、[このアプリのプロトタイプを作成する] をクリックします。
8. ブループリントに AI 要素が含まれている場合、エージェントは Gemini Gemini キーの入力を求めるプロンプトを表示します。独自の Gemini API キーを追加するか、[自動生成] をクリックして Gemini API キーを生成します。[自動生成] をクリックすると、Firebase Studio によって Firebase プロジェクトが作成され、Gemini API キーが生成されます。
9. アプリ プロトタイピング エージェントは、ブループリントを使用してアプリの最初のバージョンを作成します。完了すると、アプリのプレビューが Gemini チャット インターフェースとともに表示されます。アプリを確認してテストします。エラーが発生した場合は、チャットで [エラーを修正] をクリックして、エージェントがエラーを修正できるようにします。

3. Firebase Studio で Firebase MCP を設定する

Firebase MCP サーバーは、Firebase Authentication、Cloud Firestore、Firebase Data Connect などの Firebase サービスからデータを設定、管理、取得するためにエージェントが呼び出すことができるツールを提供することで、アプリ プロトタイピング エージェントの機能を拡張します。設定方法は次のとおりです。

1. Firebase Studio で、 [コードに切り替える] をクリックしてコードビューを開きます。
2. ターミナル（Shift+Ctrl+C）で次のコマンドを実行して Firebase アカウントにログインし、画面に表示される手順に沿って操作して、すべてのデフォルト オプションをそのままにします。

   firebase login --no-localhost
   

3. エクスプローラ（Ctrl+Shift+E）で、.idx フォルダを右クリックして [新しいファイル] を選択します。ファイルに「mcp.json」という名前を付け、Enter キーを押します。
4. サーバー構成を .idx/mcp.json に追加します。

   {
       "mcpServers": {
           "firebase": {
               "command": "npx",
               "args": [
                   "-y",
                   "firebase-tools@latest",
                   "experimental:mcp"
               ]
           }
       }
   }
   

   Firebase MCP サーバーに接続していることを確認します。[出力] パネルに同様のログエントリが表示され、右側のチャネルとして [Gemini] が選択されているはずです。

4. Firebase MCP を使用して Firestore を追加する

目標 1: アプリに Firebase を追加する

1. Prototyper に切り替えます。チャット インターフェースで、エージェントに Firebase プロジェクトの作成を依頼します。

   Create a Firebase project.
   

   Gemini API キーを取得するために自動生成オプションを使用して Firebase プロジェクトをすでに作成している場合は、この手順をスキップします。画面の左上隅にあるワークスペース名の横に、プロジェクト ID が表示されます。または、エージェントにプロジェクトの一覧を表示してもらい、使用するプロジェクトをメモします。

   List my Firebase projects.
   

   エージェントが Firebase MCP ツール firebase_list_projects を呼び出すことを想定しています。
2. ローカル開発に Firebase プロジェクトを使用するようにエージェントに依頼します。

   Use `spinsync-3y3c6` as my Firebase project in my local environment.
   

   デフォルトの Firebase プロジェクトを設定する .firebaserc ファイルが表示されていることを確認します。このファイルは、使用する Firebase プロジェクトを Firebase CLI に伝えます。このファイルが表示されない場合は、このファイルについて再度お問い合わせください。
3. Firebase プロジェクトでウェブアプリを作成するようエージェントに依頼します。

   Create a web app in my Firebase project.
   

   エージェントがツール firebase_create_app を呼び出すことを想定します。エージェントがこの処理に失敗した場合は、もう一度試すか、こちらの手順に沿って Firebase コンソールでこのステップを完了します。エージェントは、ツール firebase_get_sdk_config を呼び出して、プロジェクトを Firebase ウェブアプリに接続するために必要なファイルを作成します。作成しない場合は、作成するよう指示します。

   Add my Firebase SDK configuration to my app.
   

   エージェントは、API キーやその他の構成を src/lib/firebase.ts に直接配置することがよくあります。アプリのセキュリティを確保するため、アプリケーション コードから移動するよう依頼します。

   Secure my code by moving my Firebase config to my `.env` file.
   

目標 2: Firestore を追加する

1. [コードに切り替え] をクリックします。チャット インターフェースで、アプリで Firestore を使用するようにエージェントに依頼します。

   Use Firestore for user entries. Give anyone read and write access.
   

   エージェントがソースコードを更新して、ユーザー エントリにローカル ストレージではなく Firestore を使用し、Firestore セキュリティ ルールを作成することを想定しています。Firebase MCP ツール firebase_init を呼び出すか、Firestore を初期化するためにターミナルで firebase init コマンドを実行するよう求めるメッセージが表示されることがあります。いずれにしても、続行する前に、次の内容のファイル firestore.rules が表示されていることを確認してください。

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   ここでは、データベースに対する読み取り / 書き込みアクセス権をすべてのユーザーに付与します。このコードラボ以外では、常にデータベースを保護する必要があります。このトピックについて詳しくは、ドキュメントをご覧ください。
2. ターミナル（Shift+Ctrl+C）で、エージェントから初期化を求められていない場合は、Firestore を初期化します。

   firebase init firestore
   

   画面上の手順に沿って操作し、デフォルトのオプションはそのままにします。前の手順のセキュリティ ルールを上書きしないでください。次に、データベース インスタンスのセキュリティ ルールをデプロイします。

   firebase deploy --only firestore
   

   これにより、Firestore データベース インスタンスがプロビジョニングされます。

目標 3: テストする

1. アプリを再読み込みし、ルーレットでエントリを作成、削除して、Firebase コンソールの Firestore ページでこれらの更新を確認します。

5. まとめ

これで完了です。Firebase MCP を使用して App Prototyping エージェントでフルスタックのウェブアプリを作成しました。Firebase MCP サーバーが提供する他のツールも試して、アプリの機能を拡張してください。

詳細

• GitHub の Firebase MCP
• Firebase のヒントとアドバイス 2
• Firebase Studio ワークスペースの詳細